@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-primarylue-200;
  }
}

*/

.flash-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  overflow: hidden;
}

.flash-progress-error {
  height: 100%;
  background-color: red;
  animation: fillProgress 4s linear forwards;
}

.flash-progress-success {
  height: 100%;
  background-color: green;
  animation: fillProgress 4s linear forwards;
}

.centerSlider .slick-dots li {
  width: 12px;
  height: 12px;
  color: red;
}

.centerSlider .slick-dots li button:before {
  color: white;
  opacity: 30%;
  font-size: 12px;
  opacity: 1;
}

.centerSlider .slick-dots .slick-active button:before {
  color: white;
}

#dropdownPhone .iti--allow-dropdown{
width: 100%;
}

@media (min-width: 1024px) {
  .centerSlider .slick-dots {
    left: -160px;
  }
}
 
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.current {
  background-color: #FF1654 !important;
  border-radius: 0px;
  padding: 6px;
  margin: 4px;
  color: white !important;
  font-size: 0.875rem; /* Equivalent to Tailwind's text-sm */
  font-weight: normal; /* Removes bold text */
  width: 30px; /* Set the width to 30px */
  height: 30px; /* Set the height to 30px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.next {
  margin: 4px !important;
}

.previous_page::after {
  content: '' !important;
  margin-right: 8px;
  color: white;
  width: 100%;
  height: 100%;
  display: none !important;
}

.next_page::before {
  content: '' !important;
  margin-right: 8px;
  width: 100%;
  height: 100%;
  color: white;
  display: none !important;
}

.pagination span,
.pagination em,
.pagination a,
.pagination a:last-child {
  padding: 2px 8px;
  text-decoration: none;
  font-style: normal;
  font-weight: normal; /* Removes bold text */
  font-size: 0.875rem; /* Equivalent to Tailwind's text-sm */
  line-height: 16px;
  background-color: #FFFFFF;
  color: black;
}

.pagination .previous_page {
  color: transparent !important;
  margin-right: 10px !important;
  width: 30px;
  height: 30px;
  background-image: url("Pager Nav Button.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.pagination .next_page {
  color: transparent !important;
  margin-left: 10px !important;
  width: 30px;
  height: 30px;
  background-image: url(/assets/rightarrow-a954d7d522e01d993907e7b30faeed7dc16f0700624af53a91a036739bc508f9.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none !important;
}
.scrollbar-hide {
  -ms-overflow-style: none !important;  
  scrollbar-width: none !important;     
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 /* Make sure the table container allows overflow */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}