.important {
  background: rgba(var(--admonition-color-important), 0.057);
  border-color: rgb(var(--admonition-color-note));
}

.note {
  background: rgba(var(--admonition-color-note), 0.057);
  border-color: rgb(var(--admonition-color-note));
}

.warning {
  background: rgba(var(--admonition-color-warning), 0.057);
  border-color: rgb(var(--admonition-color-warning));
}

.tip {
  background: rgba(var(--admonition-color-tip), 0.057);
  border-color: rgb(var(--admonition-color-tip));
}

.admonitionblock {
  word-break: break-word;
  border: 1px solid;
  padding: .5em;
}

.admonitionblock > table {
  table-layout: fixed;
  position: relative;
}

.admonitionblock.note .icon {
  background: rgb(var(--admonition-color-note));
  border-color:  rgb(var(--admonition-color-note));
  color: #fff;
}

.admonitionblock.warning .icon {
  background: rgb(var(--admonition-color-warning));
  border-color:rgb(var(--admonition-color-warning));
  color: #fff;
}

.admonitionblock.important .icon {
  background: rgb(var(--admonition-color-important));
  border-color: rgb(var(--admonition-color-important));
  color: #fff;
}

.admonitionblock.tip .icon {
  background: rgb(var(--admonition-color-tip));
  border-color: rgb(var(--admonition-color-tip));
  color: #fff;
}

.admonitionblock .icon {
  position: absolute;
  top: -.5em;
  left: -.5em;
  font-size: .83333rem;
  padding: 0 .5rem;
  text-transform: uppercase;
  border-radius: .45rem;
  -webkit-transform: translate(-.5rem,-50%);
  transform: translate(-.5rem,-50%);
}