body {
  font-family: "Inter", sans-serif;
  background-color: #182737;
  color: rgb(235, 232, 232);
  overflow-y: hidden;
}

.container {
  /* max-width: 600px; */
  margin: 0 20px 0 90px;
  padding: 20px;
  padding-top: 0;
}
.main {
  display: flex;
  gap: 20px;
}
.user-input-container {
  width: 300px;
  margin-right: 50px;
}
.user-input-container textarea {
  margin-bottom: 20px;
  height: 60px;
}
.user-input-container input::placeholder {
  /* padding-top: -40px; */
}

input,
textarea {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background-color: #ededed;
  resize: none;
}

.output {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
}

.regex-editor-container {
  /* flex-grow: 1; */
  margin-right: 30px;
  width: 600px;
}
#sampleText {
  height: 300px;
  background-color: #ededed;
}
.ai-explanation-container {
  margin-top: 20px;
  width: 400px;
}
#aiExplanation {
  height: 200px;
  width: 350px;
  background-color: #ededed;
}
h1 {
  font-size: 20px;
}
.highlight {
  background-color: yellow;
}

#regexInput {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  background-color: #ededed;
  font-weight: 600;
}
.editable-div {
  height: 300px;
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: white;
  color: black;
  white-space: pre-wrap;
  overflow-y: auto;
  margin-top: 10px;
}

.highlight {
  background-color: rgba(127, 139, 251, 0.769);
}
#matchesOutput {
  max-height: 240px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #d9d9d9;
  background-color: #ededed;
  color: black;
}

.editable-div {
  position: relative;
  min-height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
}

.editable-div:empty::before {
  content: attr(data-placeholder);
  color: #999;
  position: absolute;
  left: 10px;
  top: 10px;
  pointer-events: none;
}

.cm-highlight {
  background-color: #99beff;
}

.errorRegex {
  color: red;
  caret-color: black;
}