.dxbl-grid .datapoint-view .datapoint-table:only-child {
  grid-row: span 2;
}
.datapoint-view .datapoint-table thead th {
  min-width: 5em;
}
.datapoint-view .datapoint-table tbody td:not(:last-child) {
  padding-right: 0.3em;
}
.datapoint-view .datapoint-table tr.blank-line-after td, .datapoint-view .datapoint-table tr.blank-line-after td::before {
  color: inherit !important;
  background-color: inherit !important;
}
.datapoint-view .datapoint-table .datapoint-value-cell {
  text-align: right;
  padding-right: 3px;
}
.datapoint-view .datapoint-table .datapoint-value-cell.writable {
  cursor: pointer;
  text-decoration: underline;
  color: var(--datapoint-color-writable);
}
.datapoint-view .datapoint-table input.datapoint-value-cell {
  margin-top: -1em;
  margin-bottom: -1em;
}
.datapoint-view .datapoint-table tr > :nth-child(4) {
  text-align: right;
}
.datapoint-view .datapoint-table .blank-line-after {
  /*background-color: var(--table-th-background-color);*/
  border-left-color: transparent;
}
.datapoint-view .datapoint-view-search-tab .datapoint-table {
  overflow: auto;
}
.datapoint-view .datapoint-view-search-tab .dxbl-row {
  margin-left: 0;
  margin-right: 0;
}

.datapoint-selector-popup {
  height: 95%;
  --dxbl-popup-width: 95%;
  --dxbl-popup-max-width: initial;
}

.datapoint-write-value-popup .table, .datapoint-toggle-value-popup .table, .datapoint-selector-popup .table {
  background-color: inherit;
  color: inherit;
}

.connection-state {
  display: flex;
  align-items: center;
}
.connection-state .connection-state__item .p-1 {
  padding: 0.4rem 0.2rem !important;
}

.intern-dp-grid {
  height: 100%;
  width: unset;
}

#bt-view-grid-container {
  grid-area: grid;
  position: relative;
}
#bt-view-grid-container .dp-grid {
  height: 100%;
}
#bt-view-grid-container .dp-grid .intern-dp-grid {
  height: 100%;
  width: unset;
}

.dp-is-true {
  background-color: var(--success);
}

.datapoint-value {
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  border-radius: 0.5em;
  color: var(--datapoint-color-readonly);
  background-color: var(--datapoint-background-color-readonly);
  border: 1px solid var(--datapoint-color-readonly);
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  width: 200px;
  height: 100px;
}
.datapoint-value.writable {
  cursor: pointer;
  text-decoration: underline;
  color: var(--datapoint-color-writeable);
  background-color: var(--datapoint-background-color-writeable);
}
.datapoint-value:hover {
  background-color: var(--datapoint-value-hover-background-color);
  color: var(--datapoint-value-hover-color);
}

.area-connections {
  color: var(--primary-2);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  font-size: var(--font-small);
  gap: 0.25rem 1rem;
  width: 100%;
}
.area-connections .area-connection {
  width: fit-content;
}
.area-connections .danger svg {
  color: var(--danger);
}
.area-connections .success svg {
  color: var(--success);
}

.area-connections-button {
  z-index: 100;
}
.area-connections-button details .area-connections {
  gap: 0.5rem;
  padding-right: 0.75rem;
  max-width: 10rem;
}
.area-connections-button details .area-connections .area-connection {
  color: var(--primary-2);
}
.area-connections-button details .area-connections .area-connection .eas-icon {
  gap: 0.5rem !important;
}
.area-connections-button details .area-connections .area-connection .eas-icon svg {
  flex-shrink: 0;
}
.area-connections-button details[open] .frame-notification {
  background-color: var(--secondary-3);
  color: var(--primary-1);
}