.green-panel,
.frame-box,
.good,
.bad,
.warning,
.info,
.doc {
  border: 1px solid var(--calc-border, var(--color-border, transparent));
  border-radius: 0.3rem;
  box-shadow: none;
  box-sizing: border-box;
  display: block;
  padding: 12px 14px 14px;
}

.green-panel,
.good {
  background: var(--green-background, var(--calc-control, transparent));
  border-color: var(--green-border, var(--calc-border, var(--color-border, transparent)));
}

.bad {
  background: var(--red-background, transparent);
  border-color: var(--red-border, var(--calc-error, var(--color-border, transparent)));
}

.warning {
  background: var(--yellow-background, transparent);
  border-color: var(--yellow-border, var(--color-border, transparent));
}

.info {
  background: var(--blue-background, transparent);
  border-color: var(--blue-border, var(--calc-border, var(--color-border, transparent)));
}

.doc {
  background: var(--color-background, var(--calc-surface, transparent));
  border-color: var(--color-border, var(--calc-border, transparent));
}

@media (min-width: 768px) {
  .green-panel,
  .frame-box,
  .good,
  .bad,
  .warning,
  .info,
  .doc {
    box-shadow: 0 5px 7px -3.5px var(--color-panel-box-shadow, transparent);
  }
}