.smalltalk {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 20px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100; }
  .smalltalk .dialog-page {
    border-radius: 3px;
    background: white;
    box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #333;
    min-width: 400px;
    padding: 0;
    position: relative;
    z-index: 0; }
    .smalltalk .dialog-page > .close-button {
      background-image: url(../img/IDR_CLOSE_DIALOG.png);
      background-position: center;
      background-repeat: no-repeat;
      height: 14px;
      position: absolute;
      right: 7px;
      top: 7px;
      width: 14px;
      z-index: 1; }
      .smalltalk .dialog-page > .close-button:hover {
        background-image: url(../img/IDR_CLOSE_DIALOG_H.png); }
    .smalltalk .dialog-page header {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 500px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      color: #333;
      font-size: 120%;
      font-weight: bold;
      margin: 0;
      padding: 14px 17px 14px;
      text-shadow: white 0 1px 2px; }
    .smalltalk .dialog-page .content-area {
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 6px 17px 6px;
      position: relative;
      max-width: 500px; }
    .smalltalk .dialog-page .action-area {
      padding: 14px 17px; }
    .smalltalk .dialog-page .button-strip {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
      justify-content: flex-end; }
      .smalltalk .dialog-page .button-strip > button {
        -webkit-margin-start: 10px;
        -moz-margin-start: 10px;
        -ms-margin-start: 10px; }
  .smalltalk button:enabled:focus, .smalltalk input:enabled:focus {
    -webkit-transition: border-color 200ms;
    -moz-transition: border-color 200ms;
    -ms-transition: border-color 200ms;
    -o-transition: border-color 200ms;
    transition: border-color 200ms;
    border-color: #4d90fe;
    outline: none; }
  .smalltalk button:enabled:active {
    background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
    background-image: -moz-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
    background-image: -ms-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
    background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
    box-shadow: none;
    text-shadow: none; }
  .smalltalk button, .smalltalk .smalltalk {
    min-height: 2em;
    min-width: 4em; }
  .smalltalk button::-moz-focus-inner {
    border: 0; }
  .smalltalk button {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
    background-image: -moz-linear-gradient(#ededed, #ededed 38%, #dedede);
    background-image: -ms-linear-gradient(#ededed, #ededed 38%, #dedede);
    background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
    border: 1px solid black;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
    color: #444;
    font: inherit;
    margin: 0 1px 0 0;
    outline: none;
    text-shadow: 0 1px 0 #f0f0f0; }
  .smalltalk button:enabled:focus, .smalltalk input:enabled:focus {
    -webkit-transition: border-color 200ms;
    -moz-transition: border-color 200ms;
    -ms-transition: border-color 200ms;
    -o-transition: border-color 200ms;
    transition: border-color 200ms;
    border-color: #4d90fe;
    outline: none; }
  .smalltalk input {
    width: 100%;
    margin: 6px 0;
    border: 1px solid #bfbfbf;
    border-radius: 2px;
    box-sizing: border-box;
    color: #444;
    font: inherit;
    min-height: 2em;
    padding: 3px;
    outline: none; }

@media only screen and (max-width: 500px) {
  .smalltalk .dialog-page {
    min-width: 0; } }