@import "tailwindcss/base";
@import "tailwindcss/components";

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://use.typekit.net/dtt5jxg.css"); /* Poppins */

@import "carousel.css";

@import "tailwindcss/utilities";

/***********************************************************************************************************************
  This styles rails wrapping of input with validation errors in <div class='field_with_errors'/>
  B/c styles are wrapped, it can break layout. Assigning w-full seems to fix the often shrunk elements.
  Alternative solution is to remove wrapping using ActionView::Base.field_error_proc

  @see https://github.com/baoagency/polaris_view_components/pull/188
  @see https://stackoverflow.com/questions/12252286/how-to-change-the-default-rails-error-div-field-with-errors
*/
.field_with_errors { @apply w-full; }
.field_with_errors label {}
.field_with_errors input:not(.silent), .field_with_errors textarea:not(.silent), .field_with_errors select:not(.silent) {
  @apply w-full border-red-600 border-2;
}
/**********************************************************************************************************************/

input::placeholder {
}

input:focus::placeholder {
  opacity: 0;
}

.font-inter {
  font-family: Inter;
}

.bg-sidebar-circles {
  background-image: url("/assets/circles-top-right-3bc66571.svg");
}

[type='checkbox'] {
  &[disabled] {
  }
}