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

:root {
  --plyr-color-main: rgb(251, 146, 60); /* orange-400 */
}

@layer utilities {
  .bg-primary {
    background-color: #f7b261;
  }

  .border-primary {
    border-color: #f7b261;
  }

  .text-primary {
    color: #f7b261;
  }
}

@layer components {
  .aspect-square {
    aspect-ratio: 1;
  }
  
  .btn-primary {
    @apply py-2 px-3 block cursor-pointer rounded-lg 
    bg-orange-400 shadow 
    text-white font-medium
    hover:bg-orange-500
    active:bg-orange-600;
  }
  .btn-secondary {
    @apply py-2 px-3 cursor-pointer rounded-lg 
    shadow 
    flex items-center
    font-medium
    hover:bg-slate-300
    active:bg-slate-400
    bg-white text-orange-400 gap-2;
  }
  .btn-danger {
    @apply py-2 px-3 block cursor-pointer rounded-lg
    bg-red-700 shadow
    text-white font-medium
    hover:bg-red-800
  active:bg-red-900;
  }
  .btn-disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .input-container {
    @apply mb-8;
  }
  .input-label {
    @apply text-sm font-medium mb-1 flex gap-1;
  }
  .input-hint {
    @apply text-sm text-gray-400 pt-1;
  }
  .input-input {
    @apply block rounded-md border border-gray-200 focus:bg-white focus:border focus:shadow-none focus:ring-0 focus:border-gray-200 font-semibold outline-none px-3 py-2 w-full;
    margin-top: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  input[type="text"],
  input[type="url"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  textarea {
    @apply bg-[#f8fafc] focus:bg-white;
  }
  .badge {
    @apply bg-gray-100 hover:bg-gray-200 cursor-pointer px-3 inline-block py-2 rounded-xl text-sm;
  }
  .input-error {
    @apply text-sm text-red-500 pt-1;
  }
}

pre {
  @apply whitespace-pre-wrap font-sans;
}

span.radio label,
span.checkbox label {
  @apply text-sm text-gray-800 items-center gap-3 flex font-semibold;
}

input[type="radio"],
input[type="checkbox"] {
  @apply w-auto inline pl-3 mb-2 text-orange-400 focus:ring-orange-500;
}

#new_payer_insurance_plan_subscriber_review .input-label {
  @apply pb-1 block;
}

#new_payer_insurance_plan_subscriber_review .input-container {
  @apply pb-5;
}

table {
  @apply w-full mt-8;
}

.pagy-nav,
.pagy-nav-js {
  @apply flex space-x-2;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
  &:hover {
    @apply bg-gray-300;
  }
  &:active {
    @apply bg-gray-400 text-white;
  }
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
  &:hover {
    @apply text-gray-400 bg-gray-200;
  }
  &:active {
    @apply text-gray-400 bg-gray-200;
  }
}

.pagy-nav .page.active,
.pagy-nav-js .page.active {
  @apply text-white cursor-default bg-gray-400;
  &:hover {
    @apply text-white bg-gray-400;
  }
  &:active {
    @apply bg-gray-400 text-white;
  }
}

.pagy-combo-nav-js {
  @apply flex max-w-max rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
}

.pagy-combo-nav-js .pagy-combo-input {
  @apply bg-white px-2 rounded-sm;
}

.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
  &:hover {
    @apply text-gray-800;
  }
  &:active {
    @apply text-gray-800;
  }
}

.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
}

.nested-fields .input-container {
  @apply block w-full;
}

.animation-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }

  70% {
    transform: scale(0.5);
    box-shadow: 0 0 0 20px rgba(229, 62, 62, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 20px rgba(229, 62, 62, 0);
  }
}

.bg-gradient {
  background: linear-gradient(-45deg, #6abed3, #f0740e, #23a6d5, #ffb948);
  background-size: 400% 400%;
  animation: gradient 60s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.dropzone {
  @apply border-2 rounded-lg border-gray-400 border-dashed;
}

.dropzone .dz-drag-hover {
  @apply border-2 rounded-lg border-gray-200 border-dashed;
}

.dropzone .dz-message {
  opacity: 0.9;
}

.dropzone.dz-started .dz-message {
  display: block;
}

.dz-success-mark svg {
  @apply fill-green-500;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
  right: 0.8rem !important;
}

.swal2-actions {
  width: 100% !important;
  width: 100% !important;
  justify-content: space-between !important;
  padding: 0 25px !important;
}

.swal2-html-container{
  max-height: 600px;
}

.select2-selection__placeholder {
  @apply input-label text-sm;
}

.select2-container--bootstrap-5 .select2-selection {
  @apply input-input;
}



$primary_encoded: "%23" + unquote("#{str-slice(ie-hex-str(#ffb55e), 4)}");

.select2-container--bootstrap-5 .select2-selection {
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: #f8fafc !important;
}

.select2-selection--single {
  margin-top: 0.75rem;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='#{$primary_encoded}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.select2-selection__rendered {
  font-weight: 600 !important;
}

.select2-results__option.select2-results__option--selectable.select2-results__option--highlighted,
.select2-results__option.select2-results__option--selectable.select2-results__option--selected {
  background-color: #f8fafc !important;
  color: black !important;
  font-weight: 600 !important;
}

.select2-selection--single:hover {
  background-color: #f1f5f9 !important;
}

.select2-container--bootstrap-5.select2-container--open .select2-selection {
  box-shadow: none !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: rgb(206, 212, 218) !important;
  box-shadow: none !important;
}

.select2-container--bootstrap-5 .select2-selection {
  min-height: 40px !important;
}

.select2-container .select2-search--inline {
  float: none !important;
}

.select2-selection--multiple .select2-search .select2-search__field {
  resize: none !important;
  box-shadow: none !important;
}
.clamped-text-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  /* -webkit-box-orient: vertical; */
}
#tooltip-contents {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
  }
  #tooltip {
    z-index: 99999;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
    display: none;
  }
  #arrow,
  #arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
  }
  #arrow {
    visibility: hidden;
  }
  #arrow::before {
    visibility: visible;
    content: "";
    transform: rotate(45deg);
  }
  #tooltip[data-popper-placement^="top"] > #arrow {
    bottom: -4px;
  }
  #tooltip[data-popper-placement^="bottom"] > #arrow {
    top: -4px;
  }
  #tooltip[data-popper-placement^="left"] > #arrow {
    right: -4px;
  }
  #tooltip[data-popper-placement^="right"] > #arrow {
    left: -4px;
  }
  #tooltip[data-show] {
    display: block;
  }
  
/*
 * 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.
 *



 */