.editor-main {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6rem;
}


.editor-form {
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  top: 3.5rem;
  margin-bottom: 0.75rem;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  min-height: 47vh;
}

.editor-container {
  width: 100%;
}

.editor-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  width: max-content;
}

.form-box {
  border-radius: 0px !important;
}

.form-box__W {
  background-color: green !important;
  color: white !important;
}

.form-box__L {
  background-color: red !important;
  color: white !important;
}

.form-box__D {
  background-color: yellow !important;
  color: black !important;
}

.editor-group-item {
  display: flex;
  flex-direction: column;
  width: max-content;
}

.editor-form-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .editor-container {
      max-width: 640px;
  }
}

@media (min-width: 768px) {
  .editor-main {
    margin-top: 0px;
    padding-top: 6rem;
}

  .editor-container {
      max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .editor-container {
      max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .editor-container {
      max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .editor-container {
      max-width: 1536px;
  }
}

.relative {
  position: relative;
}

.compiler-container {
  grid-column: span 3 / span 3;
  display: flex;
  min-height: 57vh;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.compiler-container {
  padding-left: 0px;
  padding-right: 0px;
}

@media (min-width: 768px) {
.compiler-container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
}

@media (min-width: 1024px) {
  .compiler-container {
      grid-column: span 2 / span 2;
      padding-left: 0px;
      padding-right: 0px;
  }
}

.mt-10 {
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .lg\:max-w-lg {
      max-width: 32rem;
  }
}
.items-center {
  align-items: center;
}
.flex-col {
  flex-direction: column;
}
.w-full {
  width: 100%;
}
.flex {
  display: flex
;
}
@media (min-width: 1024px) {
  .lg\:max-w-lg {
      max-width: 32rem;
  }
}
.items-center {
  align-items: center;
}
.flex-col {
  flex-direction: column;
}
.w-full {
  width: 100%;
}
.flex {
  display: flex
;
}
@media (min-width: 1024px) {
  .lg\:max-w-lg {
      max-width: 32rem;
  }
}
.items-center {
  align-items: center;
}
.flex-col {
  flex-direction: column;
}
.w-full {
  width: 100%;
}
.flex {
  display: flex
;
}
.min-heightd {
  min-height: 47vh;
}


.form-box-wrapper {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.form-box-wrapper {
  margin-top: 0.5rem;
  display: flex !important
;
}

.form-input {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: 
cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 640px) {
  .editor-group {
    column-gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .avg-goals-input {
      max-width: 72px;
  }
  .editor-group {
    column-gap: 3.5rem;
  }
}

/* @media (prefers-color-scheme: dark) {
  .avg-goals-input {
      background-color: transparent !important;
  }
} */
.avg-goals-input {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin-top: 0.5rem;
  max-width: 44px;
  font-weight: 700 !important;
}

.form-input, .form-textarea, .form-select, .form-multiselect {
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-box-wrapper > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(7px * var(--tw-space-x-reverse));
  margin-left: calc(7px * calc(1 - var(--tw-space-x-reverse)));
}

.items-end {
  align-items: flex-end;
}

.primary-btn {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
  border: none;
}
.btn {
  z-index: 20;
  display: flex;
  width: auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: 
cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
}

.ac-btn {
  margin-top: 16px;
}

.glow {
  --glow-color: rgba(0, 0, 0, 0.87);
  border: 1px solid var(--glow-color) !important;
  background-color:var(--glow-color) !important;
  color: white !important;
}

.w-max {
  width: max-content;
}