body {
  font-size:12px
}

.readonly {
  background:#eee;
  border:1px solid #ddd;
  padding:8px;
}



.modal-content{}
.pure-css-bootstrap-modal {
  position: absolute; /* Don't take any space. */
}
.pure-css-bootstrap-modal label.close {
  /* Reset */
  padding: 0;
  margin: 0;
}

#modal-switch {
  display: none;
}
/* MODAL */
.modal {
  display: block;
}
#modal-switch:not(:checked) ~ .modal {
  max-width: 0;
}
#modal-switch:checked ~ .fade,
#modal-switch:checked ~ .modal .fade
{
  opacity: 1;
}
/* BACKDROP */
.modal-backdrop {
  margin: 0;
}
#modal-switch:not(:checked) ~ .modal .modal-backdrop
{
  display: none;
}
#modal-switch:checked ~ .modal .modal-backdrop
{
  filter: alpha(opacity=50);
  opacity: 0.5;
}
/* DIALOG */
#modal-switch ~ .modal .modal-dialog {
  transition: transform .3s ease-out;
  transform: translate(0, -50%);
}
#modal-switch:checked ~ .modal .modal-dialog {
  transform: translate(0, 10%);
  z-index: 1050;
}