.phonogram-list-remarks {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.remark-tooltip {
  position: absolute;
  top: 3em;
  left: 1em;
  z-index: 10;
  background: white;
  max-width: 250px;
  overflow: hidden;
  word-break: break-word;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #cccccc;
  font-size: 1rem;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: normal;
}

.phonogram-validation-box {
  margin: 0 0 12px 12px;
}

.phonogram-list-remarks:hover + .remark-tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.phonogram-labeled-property,
.phonogram-labeled-edit {
  margin: 0 12px 12px;
}

.phonogram-labeled-property label {
  display: block;
  margin-bottom: 0;
}

.phonogram-list_button-row {
  display: flex;
  gap: 0.6em;
  justify-content: center;
}

div#phonogram-tab .phonogram-filter-row {
  margin-bottom: 16px;
  margin-left: 0px;
  margin-right: 0px;
}

.phonogram-filter-row input {
  min-height: 1.8lh;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.075);
}

.phonogram-filter-row input:focus,
textarea:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

div#phonogram-tab .phonogram-filter-heading-row {
  margin: 12px 0px 4px 0px;
}

div#phonogram-tab .phonogram-filter-heading-col {
  padding-left: 0px;
  font-size: 16px;
  font-weight: bold;
}

.phonogram-summary_coproducer-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6em;
}

.coproducer-item {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.coproducer-item input[type="checkbox"] {
  max-height: 1em;
  margin-left: 2em;
  margin-right: auto;
}

.phonogram-label {
  display: block;
  margin: 0.6em 0;
}

.phonogram-width-50 {
  width: 50%;
}

@media (min-width: 900px) {
  .phonogram-property-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .phonogram-summary_coproducer-table {
    width: 50%;
  }

  select.phonogram-input,
  .phonogram-input {
    width: 50%;
  }

  .phonogram-width-50 {
    width: 50%;
  }

  .phonogram-content-correction-table {
    display: grid;
    grid-template-columns: 1fr 300px;
  }
}

@media (min-width: 1200px) {
  div#phonogram-tab .phonogram-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 150px 1fr 150px auto;
    gap: 0.6em;
  }

  .coproducer-grid {
    display: grid;
    grid-template-columns: 50% 1fr 1fr 60px;
    grid-template-rows: repeat(2, auto 1fr);
    grid-auto-flow: column;
    column-gap: 0.6em;
  }

  .coproducer-grid label {
    margin-top: 0.6em;
  }
}