body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: rgb(239, 244, 246);
}

a {
  color: #00B7FF;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
}

.message {
  color: red;
}


/* stuff for the editable grid */

.master-grid {
  display: grid;
  grid-template-columns: 4fr 2fr; /* Two equal-width columns */
  gap: 10px; /* Space between the two grids */
}

.grid-one, .grid-two {
  display: grid; /* Each child is also a grid container */
  /*grid-template-columns: repeat(3, 1fr); /* Example internal layout */
  grid-template-columns: 1fr; /* Example internal layout */
}

.scrollable-div {
  height: 600px;      /* Fixed height required */
  overflow-y: auto;   /* Scrollbar appears only if needed */
  border: 5px solid #ccc; /* Visual boundary */
}

.scrollable-div-recordings {
  height: 200px;      /* Fixed height required */
  overflow-y: auto;   /* Scrollbar appears only if needed */
  border: 5px solid #ccc; /* Visual boundary */
}

.scrollable-div-logos {
  height: 400px;      /* Fixed height required */
  overflow-y: auto;   /* Scrollbar appears only if needed */
  border: 5px solid #ccc; /* Visual boundary */
}

.container-scripts {
  display: grid;
  grid-template-columns: 500px 40px 90px 60px 80px 80px 120px 60px 60px 60px 60px;
  gap: 0px;
  margin-bottom: 20px; /* Space outside, after the grid */
 }

.container-editor {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
  grid-template-columns: 0px 50px 600px 80px 160px 60px 70px 45px 50px 70px;
  gap: 0px;
  margin-bottom: 20px; /* Space outside, after the grid */
 }

.container-shows {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
  grid-template-columns: 80px 100px 500px;
  gap: 0px;
  margin-bottom: 20px; /* Space outside, after the grid */
 }

.grid-item {
  border: 1px solid #ccc;
  padding: 1px;
 }

.grid-header {
  font-weight: bold;
  background-color: #becdf1;
  padding: 5px;
}

.grid-row {
  display: grid;
  grid-template-columns: subgrid; /* Requires modern browser support */
  grid-column: 1 / -1; /*Spans all columns*/
  gap: 0px;
  align-items: start;
}


.input-effect {
  color: white;
  background-color: #887d03;
}

.input-recording {
  color: white;
  background-color: #884803;
}

.input-voice {
  color: white;
  background-color: #8d8bc4;
}

.save-btn {
  background-color: #0ea53e;
  color: white;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
}

.save-btn:hover {
  background-color: #026302;
}

.delete-btn {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
}

.delete-btn:hover {
  background-color: #cc0000;
}

.paste-btn-effect {
  background-color: #887d03;
  color: white;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
}
.paste-btn-effect:hover {
  background-color: #3c3502;
}

.paste-btn-recording {
  background-color: #884803;
  color: white;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
}
.paste-btn-recording:hover {
  background-color: #3c3502;
}


.generate-btn {
  background-color: #31b4f1;
  color: white;
  border: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
}
.generate-btn:hover {
  background-color: #2b78e5;
}