html {
  scroll-behavior: smooth !important;
}
.swiper-button-next, .swiper-button-prev{
    width: 35px !important;
    height: 35px !important;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
    color: #444 !important;
    font-size: 12pt !important;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    opacity: 0 !important;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev{
    right: var(--swiper-navigation-sides-offset,-20px) !important;
    left: auto !important;
    z-index: 40;
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)) !important;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next{
    left: var(--swiper-navigation-sides-offset,-20px) !important;
    right: auto !important;
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)) !important;
}

.swiper-pagination {
    position: relative !important;
}

.slide-pagination-relative {
  display: block !important;
  position: relative !important;
  margin:15px auto 0px auto !important;
  text-align: center;
}


.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    display: none;
}



  .tab-button.active {
    background: #fafafa;
  }

  .tab-pane {
   display: none
  }

  .tab-pane.active {
    display: block;
  }

  .material-symbols-outlined {
    vertical-align: 12px;
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 48
    }

.z-1{
    z-index: 1;
}
.z-2{
    z-index: 2;
}
.z-3{
    z-index: 3;
}
.z-4{
    z-index: 4;
}
.z-5{
    z-index: 5;
}

@media screen and (max-width: 900px) {
    .hidden-app{
      display: none;
    }
    .swiper-button-next{
        display: none !important;
    }
    .swiper-button-prev{
        display: none !important;
    }
    .responsive-swiper-slide{
        width: 240px !important;
    }
    .responsive-swiper-slide-2{
      width: 90px !important;
  }
    .responsive-swiper-slide-alt{
        width: 240px !important;
    }
    .responsive-swiper-slide-alt-2{
      width: 340px !important;
  }
    .responsive-swiper-wrapper-alt{
        overflow-x: scroll;

    }
    .responsive-swiper-wrapper{
        overflow-x: scroll;
        white-space: nowrap;
    }
    .swiper-4-alt .swiper-slide{
        width: 270px !important;
    }
    .toastify{
        max-width: calc(100% - 30px) !important;
    }
    .h-screen-responsive{
      height: 80vh;
    }
    .modal-product-body{
      height: calc(100vh - 100px);
      overflow-y: scroll;
    }

    .sm-order-1{
      order: 1;
    }
    .sm-order-2{
      order: 2;
    }
    .advantages-icon { font-size: 4.875rem !important; }
    .h-product-img{
      height: 300px;
    }
}

@media screen and (min-width: 901px) {
  .top-slide{
    height: calc(100vh - 42px);
  }
  .h-screen-responsive{
    height: auto;
  }
  .modal-product-body{
    /* height: 75vh */
  }
  .advantages-icon { font-size: 6.875rem !important; }
  .h-product-img{
      height: 500px;
  }
  .lg\:h-10vh{
    height: 10vh !important;
  }
  .lg\:h-20vh{
    height: 20vh !important;
  }
  .lg\:h-30vh{
    height: 30vh !important;
  }
  .lg\:h-40vh{
    height: 40vh !important;
  }
  .lg\:h-50vh{
    height: 50vh !important;
  }
  .lg\:h-60vh{
    height: 60vh !important;
  }
  .lg\:h-70vh{
    height: 70vh !important;
  }
  .lg\:h-80vh{
    height: 80vh !important;
  }
  .lg\:h-90vh{
    height: 90vh !important;
  }
}

.responsive-swiper-wrapper, .responsive-swiper-wrapper-alt{
    height: auto !important;
}

.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }
.text-2xl { font-size: 1.5rem !important; }
.text-3xl { font-size: 1.875rem !important; }
.text-7xl { font-size: 6.875rem !important; }



.dropzone {
    border: 2px dashed #cbd5e0;
    border-radius: 0.25rem;
    background-color: #f7fafc;
    padding: 1.5rem;
  }
  .dropzone .dz-message {
    color: #718096;
  }
  .dropzone .dz-message span {
    font-size: 1rem;
  }
  .dropzone.dz-started {
    background-color: #edf2f7;
  }
  .dropzone.dz-drag-hover {
    background-color: #e4f0e2;
  }
  .dz-preview {
    background-color: transparent !important;
    border:1px solid #aaa;
    border-radius: 5px;
    padding: 3px;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    display: inline-block;
  }
  .dz-preview .dz-filename {
    font-weight: bold;
    font-size: 8pt;
    display: none;
  }
  .dz-preview .dz-size {
    font-size: 0.8rem;
    color: #718096;
    display: none;
  }
  .dz-error-message{
    font-size:6pt;
    color:red;
    display: none;
  }
  .dz-success-mark{
    display: none;
  }
  .dz-error-mark{
    display: inline-block;
  }
  .dz-success-mark svg, .dz-error-mark svg {
    width: 20px;
    height: 20px;
  }
  .dz-success-mark path {
    fill: #15803d; 
  }
  .dz-error-mark path {
    fill: #dc2626; 
  }


  .switch input:checked ~ .slider {
    background-color: #087c52;
  }
  
  .switch input:checked ~ .dot {
    transform: translateX(20px);
  }

  select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
    background-position: 100%;
    background-repeat: no-repeat;
  }

  .icon-lg{
    font-size:30pt !important
  }

  .shine {
    position: relative;
    overflow: hidden;
  }
  
  .shine::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(105deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.5) 80%,  transparent 40%);
    transform: skewX(-45deg) translateX(-100%);
    animation: moveShine 4s infinite;
    z-index: 2 !important;
  }
  
  
  @keyframes moveShine {
    0% {
      transform: skewX(-45deg) translateX(-140%);
    }
    100% {
      transform: skewX(-45deg) translateX(100%);
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fadeInUp {
    animation: fadeInUp 0.4s ease-out;
  }
  

/* By default, the element with this class will be hidden */
.print-only {
  display: none !important;
}

/* When printing, the element with this class will be shown */
@media print {
  .print-only {
      display: block;
  }
  .no-print {
      display: none !important;
  }

  .print-area {
      font-family: "Arial", sans-serif !important;
  }
}


.error-highlight {
  color: red;              
  border-color: red;    
}



.fancybox-active{
  height: 100% !important;
}




.fancybox-caption{
  display: none !important
}

.border-gray-400{
  --tw-border-opacity: 0.7;
  border-color: rgba(156,163,175,var(--tw-border-opacity));
}

.bg-gray-50{
  background-color: rgba(175, 175, 175, 0.05);
}

.bg-gray-100{
  background-color: rgba(175, 175, 175, 0.15);
}

.list ul:before,.list ul:after{
  background: none !important;
}


.h-10vh{
  height: 10vh;
}
.h-20vh{
  height: 20vh;
}
.h-30vh{
  height: 30vh;
}
.h-40vh{
  height: 40vh;
}
.h-50vh{
  height: 50vh;
}
.h-60vh{
  height: 60vh;
}
.h-70vh{
  height: 70vh;
}
.h-80vh{
  height: 80vh;
}
.h-90vh{
  height: 90vh;
}

.pl-none{
  padding-left: 0px !important
}

.navbar-visible {
  display: flex !important; 
}

.border-theme{
  border-color: rgba(0, 0, 0, 0.1);
}

.border-theme-dark{
  border-color: rgba(0, 0, 0, 0.3);
}

.bg-transparent{
  background: transparent !important;
}

.img{
  border-color: transparent !important;
}

/* .gm-ui-hover-effect{
  background: white !important;
  opacity: 0;
  padding: 0px !important;
  right: 0px !important;
  top: 8px !important;
  width: auto !important;
  height: auto !important;

  border-color: #000 !important;
} */

#app-loader{
  display: none;
}