/**
 * 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');

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;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;
}

#jscad-customizer-block {
  padding-bottom: 60px; /* hack because it gets cut off at the bottom for some reason*/
}
#jscad-customizer-block > .form-line{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 15px;
    position: relative;
}
#jscad-customizer-block > .form-line:hover{
  background: rgba(0,0,0,0.3);
}

#jscad-customizer-block > .form-line[type="group"]{
  background: rgba(255, 255, 255, 0.15);
  padding-left: 50px;
  padding-bottom: 12px;
  cursor: pointer;
}
#jscad-customizer-block > .form-line[type="group"] > label{
  cursor: pointer;
}
#jscad-customizer-block > .form-line[closed="1"]:not([type="group"]){
  display: none;
}

#jscad-customizer-block > .form-line[type="group"]:before {
  position: absolute;
  content: ">";
  left: 18px;
  top: 13px;
  font-size: 30px;
  transform: rotate(90deg);
  font-family: monospace;

}
#jscad-customizer-block > .form-line[type="group"][closed="1"]:before {
  transform: rotate(0deg);
}

#jscad-customizer-block > .form-line select,
#jscad-customizer-block > .form-line input[type="text"],
#jscad-customizer-block > .form-line input[type="range"],
#jscad-customizer-block > .form-line input[type="slider"],
#jscad-customizer-block > .form-line input[type="number"],
#jscad-customizer-block > .form-line input[type="int"],
#jscad-customizer-block > .form-line input[type="date"],
#jscad-customizer-block > .form-line input[type="email"],
#jscad-customizer-block > .form-line input[type="url"],
#jscad-customizer-block > .form-line input[type="password"]
{
  background: rgba(73, 73, 73, 0.65); 
  border: 1px solid #FFFFFF;
  width: 50%;
  padding: 2px 8px;
}
#jscad-customizer-block > .form-line > div{
  width: 50%;
}
#jscad-customizer-block > .form-line > div[type="radio"] > label{
  display: inline-block;
  margin-left: 10px;
}
#jscad-customizer-block > .form-line[type="checkbox"] > label > input{
  position: absolute;
  right: 14px;
}

#jscad-customizer-block > .form-line > label i{
  display: none;
  font-style: normal;
}

#jscad-customizer-block > .form-line[type="range"] > label i,
#jscad-customizer-block > .form-line[type="slider"] > label i,
#jscad-customizer-block > .form-line[type="color"] > label i{
  display: inline-block;  
}

#jscad-customizer-block > .form-line input[type="range"]{
  position: relative;
  top: 6px;
}
#jscad-customizer-block > .form-line > label > i{
  position: absolute;
  top: 2px;
  left: 70%;
}

#jscad-customizer-block .form-line label{
  font-family: Fira Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;

  color: #CFCFD8;
}