.dialog-component {
  background: #FFF;
  color: #666;
  position: relative;
  padding: 15px 20px;
  margin: 15px;
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.25);
  width: calc( 100% - 30px);
  display: inline-block; }
  .dialog-component .dialog-close {
    float: right;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0 none; }
  .dialog-component .dialog-title {
    float: left;
    width: calc( 100% - 30px);
    padding: 0 50px 0 0;
    color: #000;
    font-size: 18px;
    line-height: 30px; }
  .dialog-component .error.dialog-title {
    color: #EF5350; }
  .dialog-component .dialog-actions,
  .dialog-component .dialog-explanation {
    float: left;
    width: 100%;
    margin: 15px 0 0; }
    .dialog-component .dialog-actions li,
    .dialog-component .dialog-explanation li {
      display: block;
      margin: 8px 0 0; }
    .dialog-component .dialog-actions li:first-child,
    .dialog-component .dialog-explanation li:first-child {
      margin-top: 0; }
  .dialog-component .dialog-actions li {
    float: right; }
  .dialog-component .dialog-actions .dialog-button {
    display: inline-block;
    line-height: 30px;
    height: 30px;
    text-transform: uppercase;
    font-size: 15px;
    margin-left: 15px;
    font-weight: bold;
    padding: 0 5px; }
  .dialog-component .dialog-actions .dialog-button.error {
    color: #EF5350; }

.dialog-component.error {
  background: #EF5350;
  color: #FFF; }
  .dialog-component.error .dialog-title {
    color: #FFF; }