@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import "flowbite";
@layer components {
  /* general style */
  .bs-container {
    @apply md:px-2 lg:px-4 md:mt-6 lg:mt-8 md:ml-0 lg:ml-[16.5rem];
  }
  .bs-sidebar {
    @apply fixed top-0 left-0 z-40 w-[16.5rem] h-screen text-sm shadow transition-transform overflow-x-hidden;
  }
  .burger-btn {
    @apply md:flex lg:hidden justify-between items-center px-3 mt-2;
  }
  .sidebar-container {
    @apply h-full px-3 py-4 bg-primary text-gray-100 flex flex-col overflow-y-auto overflow-x-hidden;
  }
  .sidebar-body {
    @apply space-y-2 font-medium;
  }
  .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .sidebar-link {
    @apply flex items-center p-2 rounded-lg hover:bg-primaryActive;
  }
  .sidebar-link.active {
    @apply bg-primaryActive font-bold;
  }
  .sidebar-dropdown {
    @apply grid grid-rows-[0fr] opacity-0 py-0 bg-primaryHover rounded-lg shadow-lg transition-[grid-template-rows,opacity,padding] duration-300 ease-in-out;
  }
  .sidebar-dropdown.open {
    @apply grid-rows-[1fr] opacity-100 py-2;
  }
  .sidebar-dropdown-inner {
    @apply overflow-hidden min-h-0 space-y-2;
  }
  .sidebar-dropdown-inner .sidebar-link {
    @apply mx-2;
  }
  .dropdown-icon {
    @apply transition-all transform ease-in-out duration-300;
  }
  .dropdown-icon.rotate {
    @apply rotate-180;
  }
  .star-sign {
    @apply text-warning;
  }
  .btn {
    @apply p-4 px-[18px] transition-all duration-300 inline-block text-center;
  }
  .btn-primary {
    @apply bg-primary text-white hover:bg-primaryHover active:bg-primaryActive;
  }
  .btn-sm {
    @apply !p-1 !px-2 text-sm;
  }
  .btn-link {
    @apply p-0 text-primary font-semibold hover:text-primaryHover text-sm;
  }
  .btn-success {
    @apply bg-primary text-sm text-white py-2 hover:bg-primaryHover rounded-3xl;
  }
  .btn-warning {
    @apply bg-warning py-2 text-sm text-white hover:bg-warningHover rounded-3xl;
  }
  .btn-link-fff {
    @apply text-white font-semibold hover:opacity-70 text-sm p-0;
  }
  .btn-gray {
    @apply bg-slate50 text-gray400 hover:bg-slate100 hover:text-white;
  }
  .btn-outline-danger {
    @apply border border-rose-700 text-rose-700 hover:bg-rose-100 rounded-lg py-2 px-4 text-sm font-semibold;
  }
  .btn-outline-primary {
    @apply border-primary border py-1 px-2 text-primary hover:bg-primary hover:text-white rounded-lg;
  }
  .btn-outline-secondary {
    @apply border-gray-700 border py-2 px-2 text-black hover:bg-gray-100 rounded-lg;
  }
  .btn-filter {
    @apply bg-white border border-gray300 p-3 rounded-lg;
  }
  .bs-navbar {
    @apply bg-offWhite shadow py-4;
  }
  .header-links-wrapper {
    @apply md:flex items-center md:space-x-2 lg:space-x-4;
  }
  .header-link {
    @apply text-gray500 flex gap-1 items-center hover:text-darkBlue transition duration-300;
  }
  .header-link.active {
    @apply text-darkBlue font-semibold;
  }
  .inventory-dropdown {
    @apply py-2 text-sm text-gray-700;
  }
  .inventory-dropdown-item {
    @apply block px-4 py-2 text-gray500 hover:text-darkBlue transition duration-300 hover:bg-gray-100;
  }
  .inventory-dropdown-item.active {
    @apply text-darkBlue font-semibold;
  }
  .profile-list-link {
    @apply grid grid-cols-[20%_78%] items-center gap-2 text-darkBlue hover:text-darkBlueHover transition w-full p-2 text-sm font-semibold hover:bg-slate-100 text-left;
  }
  .notification-btn {
    @apply lg:w-10 md:w-7 lg:h-10 md:h-7 bg-gray-100 rounded-full hover:bg-gray-200 flex justify-center items-center;
  }
  .profile-btn {
    @apply lg:w-10 md:w-7 lg:h-10 md:h-7 rounded-full cursor-pointer overflow-hidden border border-mutedBlue flex justify-center items-center bg-mutedBlue;
  }
  .notfication-dropdown {
    @apply z-20 hidden w-full max-w-sm bg-white divide-y divide-gray-100 rounded-lg shadow;
  }
  .notification-header {
    @apply block px-4 py-2 font-medium text-center text-gray-700 rounded-t-lg bg-gray-50;
  }
  .notification-lsit {
    @apply divide-y divide-gray-100;
  }
  .nofication-item {
    @apply flex px-4 py-3 hover:bg-gray-100;
  }
  .notification-detail {
    @apply text-gray-500 text-sm mb-1.5;
  }
  .notification-detail span {
    @apply font-semibold text-gray-900;
  }
  .notfication-footer {
    @apply block py-2 text-sm font-medium text-center text-gray-900 rounded-b-lg bg-gray-50 hover:bg-gray-100;
  }
  .profile-dropdown {
    @apply z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 border border-gray300;
  }
  .row-2-child {
    @apply grid grid-cols-2 gap-4 mb-2;
  }
  .card {
    @apply border border-[#E3E3F1] p-4 rounded-lg bg-[#FAFAFB];
  }
  .card-secondary {
    @apply bg-[#FAFAFB] p-5 rounded-2xl text-[#20265D] border border-[#E3E3F1];
  }
  .card-secondary h5 {
    @apply text-[18px];
  }
  .card-header {
    @apply flex justify-between items-center mb-4;
  }
  .badge {
    @apply rounded-full flex gap-2 items-center p-1 pr-3 w-max;
  }
  .badge-success {
    @apply bg-successBG text-success;
  }
  .badge-error {
    @apply bg-errorBG text-error;
  }
  .badge-warning {
    @apply bg-warningBG text-warning;
  }
  .badge-secondary {
    @apply rounded py-1 px-2;
  }
  .badge-primary {
    @apply bg-primary100 text-primary;
  }
  .pending-select {
    @apply text-gray200 hover:text-gray500 text-xs !pr-7 font-medium border-0 bg-transparent focus:ring-0;
  }
  .tooltip-container {
  @apply relative;
}
.tooltip-text {
  @apply bg-gray400 hidden text-white text-center p-1 px-2 rounded-md absolute text-xs !font-normal bottom-[110%] left-2/4 transition-all duration-300 ease-out;
  transform: translateX(-50%);
}
.tooltip-container:hover .tooltip-text {
  display: inline-block;
}
  table {
    @apply w-full text-sm text-left;
  }
  table thead {
    @apply text-xs uppercase bg-gray-50;
  }
  table thead th {
    @apply border-b border-lavender px-6 py-3 text-left whitespace-nowrap;
  }
  table tbody tr { 
    @apply bg-gray-50 border-b hover:bg-white;
  }
  table tfoot td,
  table tbody td {
    @apply px-6 py-3;
  }
  table .actions {
    @apply text-right flex justify-items-end;
  }
  .table-secondary th {
    @apply uppercase font-medium text-sm text-gray500;
  }
  .table-secondary td {
    @apply font-bold text-sm text-primary300;
  }
  .table-navigation {
    @apply flex;
  }
  .table-sticky th {
    @apply sticky top-0 bg-offWhite z-20;
  }
  .table-sticky-column th:nth-child(1),
  .table-sticky-column th:nth-child(2),
  .table-sticky-column td:nth-child(1),
  .table-sticky-column td:nth-child(2) {
    @apply sticky left-0 bg-offWhite;
  }
  .table-sticky-column th:nth-child(2),
  .table-sticky-column td:nth-child(2) {
    @apply left-24;
  }
  .table-sticky-column th:nth-child(1),
  .table-sticky-column th:nth-child(2) {
    @apply z-10;
  }
  .table-sticky-TT th.first-column,
  .table-sticky-TT td.first-column,
  .table-sticky-TT th.second-column,
  .table-sticky-TT th.third-column,
  .table-sticky-TT td.second-column,
  .table-sticky-TT td.third-column {
    @apply sticky left-0 bg-offWhite z-10;
  }
  .table-sticky-TT th.second-column,
  .table-sticky-TT td.second-column {
    @apply left-12;
  }
  .table-sticky-TT th.third-column,
  .table-sticky-TT td.third-column {
    @apply left-44;
  }
  .table-sticky-TT th.third-column,
  .table-sticky-TT th.second-column,
  .table-sticky-TT th.first-column {
    @apply z-20;
  }
  .right-tf,
  .left-tf {
    @apply flex w-1/2 items-center gap-12;
  }
  .left-chevron svg {
    @apply transform rotate-90;
  }
  .right-chevron svg {
    @apply transform -rotate-90;
  }
  .pill {
    @apply p-2 py-1 rounded-md;
  }
  .pill-primary {
    @apply bg-lavender text-primary;
  }
  .pill-secondary {
    @apply bg-lavender1 text-purple;
  }
  .pill-primaryActive {
    @apply bg-primaryActive/10 text-primaryActive;
  }
  .pill-draft {
    @apply bg-yellow-100 text-gray400 font-semibold;
  }
  .pill-in_transit {
    @apply bg-lavender1 text-primary font-semibold;
  }
  .pill-completed {
    @apply bg-successBG text-success font-semibold;
  }
  .modal {
    @apply fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center transition-all duration-75;
  }
  .modal-box {
    @apply bg-white rounded-lg shadow-lg w-full max-w-md p-6;
  }
  .modal-wrapper {
    @apply relative p-4 w-full max-w-2xl max-h-full;
  }
  .modal-header {
    @apply flex justify-between items-center mb-4;
  }
  .close-modal {
    @apply text-gray-500 text-2xl hover:text-gray-700 bg-primary100 h-auto p-1 rounded-lg hover:bg-primary200;
  }
  .close-modal svg {
    @apply text-primary w-4 h-4;
  }
  .quantityfield {
    @apply !w-28 !h-10 !font-medium !bg-lavenderLight !text-darkBlue !p-2 !px-6 flex justify-center items-center;
  }
  .breadcrumb {
    @apply inline-flex items-center mb-3 space-x-1 md:space-x-2 rtl:space-x-reverse;
  }
  .breadcrumb-link {
    @apply ms-1 text-sm font-medium text-gray600 hover:text-gray400 md:ms-2;
  }
  .breadcrumb-link.active {
    @apply mx-1 text-sm font-medium text-slate800 md:mx-2;
  }
  .result-gadget-wrapper {
    @apply relative pr-6 mr-6 before:absolute before:top-1/4 before:-right-0 before:h-5 before:w-[1px] before:bg-gray600 last:before:hidden last:pr-0 last:mr-0;
  }
  .result-gadget-wrapper h5 {
    @apply text-slate300 text-lg;
  }
  .result-gadget-wrapper p {
    @apply text-gray500 text-xs;
  }
  /* authentication screens */
  .authentication-wrapper {
    @apply flex h-screen;
  }
  .authentication-left {
    background: linear-gradient(to bottom, #94994a, #5a5e30, #3c3f24);
    @apply w-full p-10 text-white relative flex justify-between flex-col;
  }
  .authentication-right {
    @apply w-full p-4 grid place-content-center;
  }
  .form-wrapper {
    @apply w-[450px] mx-auto;
  }
  .input-field {
    @apply !px-11;
  }
  .input-icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2;
  }
  .input-eye {
    @apply absolute right-3 top-1/2 -translate-y-1/2 opacity-65 hover:opacity-100;
  }
  .user-avatar {
    @apply w-36 h-36 rounded-full bg-primary300 flex justify-center items-center mb-2 relative;
  }
  .userFirst-alphabet {
    @apply text-6xl block font-semibold text-white;
  }
  .uplaod-img {
    @apply absolute bottom-0 right-1 border-2 border-darkBlue p-1.5 rounded-full bg-white;
  }
  /* dashboard style */
  .inventory-wrapper {
    @apply grid md:grid-cols-2 lg:grid-cols-4 items-center justify-between gap-4 md:gap-2;
  }
  .discrepancy-grid {
    @apply grid-cols-3;
  }
  .inv-content h5 {
    @apply text-[#2B3674] overflow-hidden text-lg;
  }
  .inv-card {
    @apply rounded-2xl p-3 px-4 flex gap-2 items-center min-h-[92px];
  }
  .inv-icon {
    @apply w-12 h-12 bg-white/30 rounded-full flex items-center justify-center;
  }
  .inv-sub-heading {
    @apply text-xs mb-1 text-gray400 font-medium;
  }
  .inv-content .text-xs {
    @apply text-gray500;
  }
  .north-arrow {
    @apply bg-[#e6f0fc] flex items-center justify-center absolute bottom-3 right-3 rounded-full w-5 h-5;
  }
  .lavender-bg {
    @apply bg-[#edeefc];
  }
  .lavender-bg .inv-icon {
    @apply bg-white/30;
  }
  .warning-bg {
    @apply bg-warningBG;
  }
  .warning-bg .inv-icon {
    @apply bg-warningLight text-warning;
  }
  .alert-bg {
    @apply bg-alertBG;
  }
  .alert-bg .inv-icon {
    @apply bg-alertLight;
  }
  .primary-bg {
    @apply bg-[#e6f0fc];
  }
  .success-card-bg {
    @apply bg-success/10;
  }
  .success-card-bg .inv-icon {
    @apply bg-success/15 text-success;
  }
  .invetory-header {
    @apply grid grid-cols-2 gap-3 items-center;
  }
  .filters-wrapper {
    @apply grid grid-cols-3 gap-3 items-center justify-end;
  }
  .form-group {
    @apply w-full;
  }

  /* for pagy */
  .pagy {
    @apply flex items-center space-x-1 font-semibold text-sm text-gray-500;
    a:not(.gap) {
      @apply block rounded-lg px-3 py-1 bg-transparent;
      &:hover {
        @apply bg-transparent;
      }
      &:not([href]) {
        /* disabled links */
        @apply text-gray-300 bg-transparent cursor-default hidden;
      }
      &.current {
        @apply text-white bg-transparent ;
      }
    }
    label {
      @apply inline-block whitespace-nowrap bg-transparent rounded-lg px-3 py-0.5;
      input {
        @apply bg-transparent border-none text-sm;
      }
    }
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      -moz-appearance: textfield;
    }
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  -moz-appearance: textfield;
}
.input-bullet {
  @apply flex items-center gap-2 border border-transparent rounded-full p-2 py-1;
}
.input-bullet:hover {
  @apply bg-gray-50 border-gray-300;
}
.input-bullet-emerald {
  @apply bg-emerald-50/60 hover:bg-emerald-50/60 border-emerald-600 hover:border-emerald-600 px-1;
}
.input-bullet-red {
  @apply bg-rose-50/60 hover:bg-rose-50/60 border-rose-500 hover:border-rose-500 px-1;
}
.input-bullet .btn-cntrl {
  opacity: 0;
  transition: .3s ease-in-out;
}
.input-bullet:hover .btn-cntrl {
  opacity: 1;
}
.input-bullet-always-visible {
  @apply border-lavender bg-white;
}
.input-bullet-always-visible:hover {
  @apply border-lavender bg-white;
}
.input-bullet-always-visible .btn-cntrl {
  opacity: 1;
}
@layer components {
  body {
    @apply md:text-sm lg:text-base font-mont;
  }
  input[type="email"],
  input[type="password"],
  input[type="text"],
  input {
    @apply px-4 py-3 bg-white rounded-2xl border border-lavenderLight w-full;
  }
  .authentication-left::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    background: url('data:image/svg+xml,<svg width="351" height="257" viewBox="0 0 351 257" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="72.5" cy="304.5" r="278" stroke="%233c3f24"/><circle cx="-8.5" cy="278.5" r="278" stroke="%233c3f24"/></svg>');
    width: 350px;
    height: 250px;
  }
  label {
    @apply text-darkBlue w-full block mb-1 text-xs leading-4; /* font-size: 12px */
  }
  .form-filter {
    @apply h-12 w-full px-4 py-3 bg-white rounded-2xl border flex items-center justify-between border-lavenderLight;
  }
  input[type="date"].form-filter {
    @apply relative cursor-pointer;
  }
  input[type="date"].form-filter::-webkit-calendar-picker-indicator {
    @apply absolute inset-0 w-full h-full m-0 p-0 opacity-0 cursor-pointer;
  }
  .date-range-input {
    @apply block min-w-[220px] border border-lavenderLight bg-white rounded-xl py-[.45rem] pl-9 pr-12 text-sm text-gray-700 shadow-sm cursor-pointer;
  }
  .date-range-input::placeholder {
    @apply text-gray-500;
  }
  .select-dropdown {
    @apply z-10 hidden w-48 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600;
  }
  .select-dropdown-option {
    @apply w-4 h-4 text-primaryActive bg-gray-100 border-primaryActive rounded focus:ring-primaryActive;
  }
  .select-dropdown-label {
    @apply ms-2 text-sm font-medium text-darkBlue;
  }
  .modal {
    @apply flex overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full;
  }
  .modal-overlay {
    @apply fixed inset-0 bg-lavender300 bg-opacity-5 max-h-full;
  }
  .modal-content {
    @apply relative bg-white rounded-lg shadow;
  }
  .modal-header {
    @apply flex items-center justify-center p-4 md:p-8 md:pb-4 rounded-t m-0;
  }
  .heavy-tick {
    @apply text-success absolute -top-10 left-0 right-0 w-20 h-20 bg-white flex items-center justify-center rounded-full mx-auto border-[5px] border-lavender300;
  }
  .cross-btn {
    @apply text-primary bg-primary200 hover:bg-primary100 rounded-lg text-sm w-6 h-6 ms-auto inline-flex justify-center items-center;
  }
  .modal-body {
    @apply px-4 md:px-8 space-y-4 text-mutedBlue text-center;
  }
  .modal-footer {
    @apply flex gap-3 justify-center p-4 md:p-8 rounded-b;
  }
  .toggle-wrapper {
    @apply flex gap-3 items-center; 
  }
  .toggle-btn {
    @apply btn-outline-primary p-1 px-2 transition-all duration-300 text-sm;
  }
  .toggle-btn.active {
    @apply bg-primary text-white ;
  }

  /* Sort arrow indicators */
  th a {
    @apply relative inline-flex items-center gap-1;
  }

  /* Hide Ransack's default sort indicator characters (▲ ▼) */
  th a[href*="q%5Bs%5D"]::before {
    content: none !important;
  }

  th.sort-asc a::after,
  th.sort-desc a::after {
    content: '';
    @apply inline-block w-0 h-0 ml-1;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  th.sort-asc a::after {
    border-bottom: 6px solid currentColor;
  }

  th.sort-desc a::after {
    border-top: 6px solid currentColor;
  }
}
/*hide the inputs/checkmarks and submenu*/
input[name="menu"],
ul.submenu {
  display: none;
}
/*position the label*/
label {
  position: relative;
  display: block;
  cursor: pointer;
}
/*show the submenu when input is checked*/
input:checked ~ ul.submenu {
  display: block;
}
input[type="search"],
.input-search {
  @apply bg-white py-2 pr-4 border border-gray300 rounded-lg w-full;
  padding-left: 36px !important;
}
textarea {
  @apply block p-2.5 w-full text-sm text-gray-800 bg-white rounded-lg border border-lavenderLight focus:ring-primary300 focus:border-primary;
}

.custom-checkbox {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: auto;
  display: inline-flex;
  margin-bottom: 0;
}
.custom-checkbox input[type="checkbox"] {
  display: none;
}
.custom-checkbox div:first-of-type {
  width: 1rem;
  height: 1rem;
  border-width: 1px;
  border-color: #373A43;
  border-radius: 0.125rem;
}
.custom-checkbox input[type="checkbox"]:checked ~ div:first-of-type {
  background: #3c3f24;
  border-color: #3c3f24;
}
.select2-container .select2-selection--single {
  @apply h-12 w-full px-4 py-3 rounded-2xl border flex items-center justify-between border-lavenderLight !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  @apply !h-12;
}
.select2-container .select2-selection--single {
  justify-content: flex-start !important;
}

/* AJAX Select2 dropdown improvements */
.select2-container--open .select2-selection--single {
  @apply border-primary !important;
}

.select2-dropdown {
  @apply rounded-lg border border-gray-300 shadow-lg mt-1 !important;
}

.select2-search--dropdown {
  @apply p-2 !important;
}

.select2-search--dropdown .select2-search__field {
  @apply w-full px-4 py-3 rounded-lg border border-gray-300 text-base !important;
  @apply focus:border-primary focus:ring-2 focus:ring-primary200 outline-none !important;
}

.select2-results__option {
  @apply px-4 py-3 text-sm !important;
}

.select2-results__option--highlighted {
  @apply bg-primary text-white !important;
}

/* Hide the placeholder tooltip when dropdown is open (single select only) */
.select2-container--open .select2-selection--single .select2-selection__rendered {
  @apply text-transparent !important;
}

/* Multi-select styling */
.select2-container--default .select2-selection--multiple {
  @apply w-full rounded-2xl border border-lavenderLight px-2 min-h-[48px] !important;
  background: white !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  @apply border-primary !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 4px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  @apply bg-primary100 text-primary border border-primary200 rounded-lg px-2 py-0.5 text-sm !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  float: none !important;
  margin: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  @apply text-primary200 hover:text-primary !important;
  border: none !important;
  background: none !important;
  float: none !important;
  order: 2 !important;
  margin-left: 4px !important;
  margin-right: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  order: 1 !important;
}
.stocktake-vendor-select + .select2-container--default .select2-selection--multiple .select2-selection__choice,
.po-vendor-select + .select2-container--default .select2-selection--multiple .select2-selection__choice,
.po-vendor-select-modal + .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex !important;
  align-items: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  position: static !important;
}
.stocktake-vendor-select + .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.po-vendor-select + .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.po-vendor-select-modal + .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: static !important;
  left: auto !important;
  top: auto !important;
  border-right: none !important;
  padding: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  @apply text-gray-400 !important;
  line-height: 38px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
  @apply text-gray-400 hover:text-gray-600 !important;
  float: right !important;
  margin-top: 10px !important;
  margin-right: 4px !important;
  font-size: 16px !important;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
  @apply text-sm !important;
}
.drawer,
.drawer-backdrop {
  transition-duration: 300ms !important; /* or even 200ms */
}
/*
 * 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.
 *


 */

 /* typography  */
 p {
  font-size: 16px;
  font-weight: 400;
 }
 label {
  font-size: 13px;
  line-height: 16px;
 }
 h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
 }
 h1 {
  font-size: 44px;
  line-height: 48px;
 }
 h2 {
  font-size: 36px;
  line-height: 40px;
 }
 h3 {
  font-size: 29px;
  line-height: 35px;
 }
 h4 {
  font-size: 24px;
  line-height: 30px;
 }
 h5 {
  font-size: 20px;
  line-height: 20px;
 }
 h6 {
  font-size: 16px;
  line-height: 20px;
 }