/* Сравнительная таблица */

table#overview {
  font-size: 80%;
  border-collapse: collapse;
}

table#overview kbd {
  font-size: 80%;
  font-weight: bold;
}

table#overview ul {
  margin-inline-start: 0px;
}

table#overview .channelName {
  display: none;
}

table#overview .videoName {
  max-width: 8em;
}

table#overview .toolCompleteness,
table#overview .explanationCompleteness,
table#overview .tempo {
  text-align: center;
}

table#overview .version {
  max-width: 4em;
  text-wrap: wrap;
  text-align: center;
}

table#overview .task {
  max-width: 16em;
}

table#overview .domain, 
table#overview .userRequirements, 
table#overview .duration, 
table#overview .videoPublicationDate, 
table#overview .recordDate, 
table#overview .lang {
  text-align: center;
}

table#overview .lang img {
  width: 1.5em;
  border: 1px solid #cccccc;
}

table#overview .comment {
  display: none;
}

table#overview .recordRef {
  text-align: center;
}

table#overview .recordRef img {
  width: 1.5em;
  margin-top: 0.3em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

table#overview li::marker {
  content: "";
}

table#overview li {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

table#overview li:hover {
  background-color: var(--overview-table-color-li-hover);
}

table#overview .empty-list {
  display: block;
  width: 100%;
  text-align: center;
}

.completeness-icon {
  width: 20px;
  height: 20px;
}


/* Панель фильтрации и сортировки */

.sortfilter-panel {
  background-color: var(--panel-color-bg);
  padding: 0.5em;
  margin-bottom: 0.5em;
}

.sortfilter-panel__params {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
}

@media (width >= 1600px) {
  .sortfilter-panel__params {
    display: flex;
    flex-direction: row;
  }
}

@media (width < 800px) {
  .sortfilter-panel__params {
    display: grid;
    grid-template-columns: auto auto;
  }
}

.sortfilter-panel__params > fieldset {
  display: grid;
  grid-template-columns: min-content auto;
  align-items: center;
  flex-grow: 1;
}

.sortfilter-panel__params input[type="radio"] {
  position: relative;
  top: -0.3ex;
  margin-right: 0.5em;
}

.sortfilter-panel__params label > img {
  height: 1.5ex;
  margin-right: 0.5em;
} 

.sortfilter-panel__actions {
  display: flex;
  width: 100%;
  margin: 0.3em auto 0em;
  justify-content: center;
}

.sortfilter-panel__actions button, .sortfilter-panel__actions a {
  display: block;
  padding: 0.5em 1em;
  text-align: center;
  font-size: 1em;
}

/* Свойства видео */

.record-properties > div {
  display: flex;
  flex-wrap: wrap;
}

.record-properties dt {
  flex-basis: 100%;
  flex-shrink: 0;
  font-weight: bold;
}

.record-properties dd {
  display: block;
  flex-shrink: 0;
}

.record-properties dd:nth-child(2) {
  flex-basis: max-content;
  flex-grow: 0;
}

.record-properties dd:nth-child(3) {
  font-style: italic;
  text-align: right;
  flex-basis: min-content;
  flex-grow: 1;
}

.record-properties dd:nth-child(3)::before {
  content: "—";
  margin-right: 1em;
}

.record-properties img {
  width: 2ex;
  position: relative;
  top: 0.2ex;
  margin-right: 0.5em;
}

.similar-records > ul {
  margin-inline-start: 1em;
}