/**
 * START --- TAILWIND GENERATOR EDIT
 *
 * `yarn rw generate util tailwind` placed these imports here
 * to inject Tailwind's styles into your CSS.
 * For more information, see: https://tailwindcss.com/docs/installation#add-tailwind-to-your-css
 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap');
/**
 * END --- TAILWIND GENERATOR EDIT
 */

.markdown-overrides h4 {
  @apply text-lg font-bold;
}
.markdown-overrides {
  @apply bg-gray-200 border border-gray-300;
}
.markdown-overrides div {
  @apply bg-gray-200 text-indigo-800;
}
.markdown-overrides div a {
  @apply bg-gray-200 text-indigo-500;
}

.markdown-overrides div h3 {
  @apply text-xl text-indigo-800;
}
.markdown-overrides div h2 {
  @apply text-2xl text-indigo-800;
}
.markdown-overrides div h1 {
  @apply text-3xl text-indigo-800;
}
.markdown-overrides ol {
  @apply list-decimal;
}
.markdown-overrides ul {
  @apply list-disc;
}

#cadhub-ide.mosaic-toolbar-overrides .mosaic-blueprint-theme {
  background-color: #0D0D13;
}
#cadhub-ide.mosaic-toolbar-overrides .mosaic-root {
  top: 0;
}
.mosaic-toolbar-overrides .mosaic-window .mosaic-window-toolbar {
  /* makes the height of the toolbar based off the content inside instead of hardcoded to 30px */
  height: unset;
}
/* used in IdeContainer component */
#cadhub-ide .mosaic-window.console .mosaic-window-body {
  overflow-y: auto;
}


/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
.svg-shadow {
  filter: drop-shadow(0 15px 10px #00000036) drop-shadow(0 4px 6px #00000036);
}

/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
.landing-bg-clip-path {
  clip-path: polygon(0 0, 100% 62%, 100% 100%, 0% 100%);
}

/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
@media only screen and (max-width: 1600px) {
  .landing-bg-clip-path {
    clip-path: polygon(0 10%, 100% 55%, 100% 100%, 0% 100%);
  }
}
/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
@media only screen and (max-width: 800px) {
  .landing-bg-clip-path {
    clip-path: polygon(0 12%, 100% 70%, 100% 100%, 0% 100%);
  }
}

.material-ui-overrides,.MuiPopover-paper {
  /* stop pop over from scrolling */
  overflow: visible !important;
}
html {
  scroll-behavior: smooth;
}
body {
  /* TODO can I use a tailwind class here? */
  background-color: #f7fafc;
}

button, input, label, textarea {
  display: block;
  outline: none;
}

label {
  margin-top: 1rem;
}

.error {
  color: red;
}

input.error, textarea.error {
  border: 1px solid red;
}