.calculation_entry {
  display: grid;
  grid-template-columns: auto 1fr  auto auto auto;
  grid-template-rows:    auto auto auto;

  border: 1px solid var(--col-cardlist-border);
  margin: 0.2rem 0;

  background: var(--col-cardlist-background);
}

.calculation_entry.darker {
  border: 1px solid var(--col-cardlist-2-border);
  background: var(--col-cardlist-2-background);
}

.calculation_entry .title12   { grid-column: 1/3;  grid-row: 1; }
.calculation_entry .title1    { grid-column: 1;    grid-row: 1; }
.calculation_entry .title2    { grid-column: 2;    grid-row: 1; }
.calculation_entry .type      { grid-column: 3;    grid-row: 1; }
.calculation_entry .date      { grid-column: 4;    grid-row: 1; }
.calculation_entry .del       { grid-column: 6;    grid-row: 1; }
.calculation_entry .copy      { grid-column: 5;    grid-row: 1; }
.calculation_entry .underline { grid-column: 1/-1; grid-row: 2; }
.calculation_entry .comment   { grid-column: 1/5;  grid-row: 3; }
.calculation_entry .state     { grid-column: 6;    grid-row: 3; }

.calculation_entry .type {
  display: flex;
  align-items: center;
  margin-right: 1ch;
}

.calculation_entry .type span {
  border: 1px solid #666;
  background-color: #CCC;
  font-size: 1rem;
  padding: 0;
  border-radius: 4px;
  line-height: 1.2;
  padding: 0 0.25rem;
}
.calculation_entry:hover .type span { background-color: transparent; }

.calculation_entry a, .calculation_entry a:hover {
  text-decoration: none;
  color: inherit;
}

.calculation_entry:hover {
  cursor: pointer;
  border: 1px solid var(--col-cardlist-border-linkhover);
  background: var(--col-cardlist-background-linkhover);
  color: var(--col-cardlist-color-linkhover);
}
.calculation_entry .title12 {
  flex-grow: 1;
  text-overflow: ellipsis;
  padding-left: 8px;
  font-weight: bold;
}

.calculation_entry .title1 {
  flex-grow: 1;
  text-overflow: ellipsis;
  padding-left: 8px;
  font-weight: normal;
  opacity: 0.5;
}

.calculation_entry .title2 {
  flex-grow: 1;
  text-overflow: ellipsis;
  padding-left: 8px;
  font-weight: bold;
}

.calculation_entry .date {
  flex-grow: 0;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.calculation_entry .del {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-grow: 0;
  padding: 0 0.2rem;
}
.calculation_entry .copy {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-grow: 0;
  padding: 0 0.2rem;
}

.calculation_entry .comment {
  white-space: pre-wrap;
  padding: 8px;
  line-height: 1.25;
  opacity: 0.75;
}

.calculation_entry .del i {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.15rem;
  background-color: transparent;
  border: 1px solid transparent;
}

.calculation_entry .copy i {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.15rem;
  background-color: transparent;
  border: 1px solid transparent;
}

.calculation_entry .del:hover i {
  background-color: var(--col-btn-danger-background);
  border: 1px solid var(--col-btn-danger-border);
  color: var(--col-btn-danger-foreground);
}

.calculation_entry .copy:hover i {
  background-color: var(--col-btn-primary-background);
  border: 1px solid var(--col-btn-primary-border);
  color: var(--col-btn-primary-foreground);
}

.calculation_entry .state {
  align-self: end;
  padding: 0 0.2rem;
}

.calculation_entry .state a {
  display: none;
  text-align: center;
}

.calculation_entry.state_okay  .state .icon_okay  { display: inherit; }
.calculation_entry.state_warn  .state .icon_warn  { display: inherit; }
.calculation_entry.state_error .state .icon_error { display: inherit; }
.calculation_entry.state_empty .state .icon_empty { display: inherit; }

.calculation_entry .icon_warn  , .calculation_entry .icon_warn:hover  { color: #BB4;    }
.calculation_entry .icon_error , .calculation_entry .icon_error:hover { color: #880000; }
.calculation_entry .icon_okay  , .calculation_entry .icon_okay:hover  { color: #080;    }
.calculation_entry .icon_empty , .calculation_entry .icon_empty:hover { color: #999;    }


@media only screen and (max-width: 45rem) { /* < 720px */
  .calculation_entry
  {
    grid-template-columns: 1fr  auto auto auto;
    grid-template-rows:    auto auto auto;
  }

  .calculation_entry .date      { grid-column: 1;     grid-row: 1; }
  .calculation_entry .state     { grid-column: 2;     grid-row: 1; }
  .calculation_entry .del       { grid-column: 3;     grid-row: 1; }
  .calculation_entry .copy      { grid-column: 4;     grid-row: 1; }


  .calculation_entry .type      { grid-column: 1/-1;  grid-row: 2; }

  .calculation_entry .title12   { grid-column: 1/-1;  grid-row: 3; }
  .calculation_entry .title1    { grid-column: 1/-1;  grid-row: 3; }
  .calculation_entry .title2    { grid-column: 1/-1;  grid-row: 4; }

  .calculation_entry .comment   { grid-column: 1/-1;  grid-row: 5; }

  .calculation_entry .underline { grid-column: 1/-1; grid-row: 2; }


  .calculation_entry .type { padding-left: 8px; padding-bottom: 1em; }
  .calculation_entry .type span {  flex-grow: 1; }
  .calculation_entry .date { padding-left: 8px; }

  .calculation_entry .comment { padding-top: 1em; }

  .calculation_entry .comment { word-break: break-all;}
}