.xbee-document {
  position: relative;
  display: table;
  width: 450px;
  height: 250px;
  padding: 10px;
  background-color: #d1eedd; }
  .xbee-document a:active, .xbee-document a:hover, .xbee-document a:focus, .xbee-document img:active, .xbee-document img:hover, .xbee-document img:focus {
    box-shadow: none !important; }
  .xbee-document:hover .xbee-dropzone {
    border-style: solid; }
  .xbee-document .xbee-dropzone {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 20px;
    position: relative;
    border: 2px dashed #3fcb78; }
    .xbee-document .xbee-dropzone .xbee-upload-icon {
      width: 3em;
      fill: #3fcb78; }
    .xbee-document .xbee-dropzone .xbee-dropzone-text {
      font-size: 1.25em;
      margin-bottom: 0.5em; }
    .xbee-document .xbee-dropzone .xbee-params {
      margin: 0 auto;
      display: table;
      table-layout: fixed; }
      .xbee-document .xbee-dropzone .xbee-params .xbee-field {
        display: table-row; }
        .xbee-document .xbee-dropzone .xbee-params .xbee-field label {
          display: table-cell;
          text-align: left;
          padding: 0.25em; }
        .xbee-document .xbee-dropzone .xbee-params .xbee-field .required {
          color: #f00; }
        .xbee-document .xbee-dropzone .xbee-params .xbee-field .xbee-param {
          display: table-cell;
          text-align: left;
          padding: 0.25em; }
          .xbee-document .xbee-dropzone .xbee-params .xbee-field .xbee-param input {
            padding: 0.25em 0.5em;
            height: 2em;
            width: 10em;
            line-height: 2; }
    .xbee-document .xbee-dropzone.dz-drag-hover {
      border-style: solid;
      opacity: 0.5; }
    .xbee-document .xbee-dropzone .xbee-previews {
      margin-top: 20px; }
      .xbee-document .xbee-dropzone .xbee-previews .xbee-preview {
        background-color: rgba(255, 255, 255, 0.7);
        padding: 10px;
        border-radius: 10px;
        position: relative;
        max-width: 300px;
        margin: 0 auto 10px auto; }
        .xbee-document .xbee-dropzone .xbee-previews .xbee-preview .xbee-image {
          width: 40px;
          font-size: 0;
          display: inline-block;
          vertical-align: top; }
        .xbee-document .xbee-dropzone .xbee-previews .xbee-preview .xbee-details {
          width: 230px;
          line-height: 1;
          display: inline-block;
          vertical-align: top;
          text-align: left;
          padding: 0 0 0 10px; }
          .xbee-document .xbee-dropzone .xbee-previews .xbee-preview .xbee-details .xbee-filename {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; }
          .xbee-document .xbee-dropzone .xbee-previews .xbee-preview .xbee-details .xbee-size {
            font-weight: bold;
            margin-top: 5px; }
        .xbee-document .xbee-dropzone .xbee-previews .xbee-preview.dz-processing .dz-progress:after {
          display: none;
          content: "";
          background-image: url("../../dist/images/spinner.gif");
          background-repeat: no-repeat;
          background-size: 15px 15px;
          width: 20px;
          height: 20px;
          position: absolute;
          bottom: 5px;
          right: 25px; }
        .xbee-document .xbee-dropzone .xbee-previews .xbee-preview .dz-remove {
          position: absolute;
          border-radius: 50%;
          padding: 5px;
          bottom: 5px;
          right: 5px; }
          .xbee-document .xbee-dropzone .xbee-previews .xbee-preview .dz-remove img {
            display: block;
            content: "";
            height: 15px;
            width: 15px; }
          .xbee-document .xbee-dropzone .xbee-previews .xbee-preview .dz-remove:hover {
            background: rgba(0, 0, 0, 0.05); }
        .xbee-document .xbee-dropzone .xbee-previews .xbee-preview.dz-processing .dz-progress:after {
          display: block; }
    .xbee-document .xbee-dropzone .xbee-actions {
      position: absolute;
      bottom: 15px;
      left: 0;
      width: 100%; }
      .xbee-document .xbee-dropzone .xbee-actions button,
      .xbee-document .xbee-dropzone .xbee-actions input[type="button"],
      .xbee-document .xbee-dropzone .xbee-actions input[type="submit"] {
        padding: 0.5em 0.75em; }
    .xbee-document .xbee-dropzone .xbee-progress-bar {
      background: rgba(255, 255, 255, 0.5); }
      .xbee-document .xbee-dropzone .xbee-progress-bar .xbee-progress {
        animation: xbee-progress-bar 2s linear infinite;
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-size: 1em 1em;
        width: 0;
        height: 1em;
        background-color: #3fcb78;
        background-size: 1em 1em;
        transition: width 0.3s ease; }

@keyframes xbee-progress-bar {
  to {
    background-position: 60px 100%; } }
  .xbee-document .xbee-response {
    display: none;
    background: #d1eedd;
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0; }
    .xbee-document .xbee-response .xbee-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer; }
      .xbee-document .xbee-response .xbee-close svg {
        fill: #3fcb78; }
    .xbee-document .xbee-response .xbee-message {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      padding: 20px; }
      .xbee-document .xbee-response .xbee-message > * {
        margin-bottom: 10px !important; }
      .xbee-document .xbee-response .xbee-message *:last-child {
        margin-bottom: 0 !important; }
      .xbee-document .xbee-response .xbee-message img {
        max-height: 50px; }
      .xbee-document .xbee-response .xbee-message img,
      .xbee-document .xbee-response .xbee-message p {
        display: block;
        margin: 0 auto; }
  .xbee-document a.xbee-powered {
    text-decoration: none;
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 1.25em;
    box-shadow: none; }
    .xbee-document a.xbee-powered .xbee-powered-logo {
      float: left;
      border-radius: 50%;
      padding: 5px;
      width: 2.5em;
      height: 2.5em;
      box-shadow: none; }
    .xbee-document a.xbee-powered .xbee-powered-text {
      display: none;
      vertical-align: middle;
      padding: 0 1em;
      font-size: 0.85em;
      color: #000;
      float: left; }
    .xbee-document a.xbee-powered:hover {
      background: rgba(255, 255, 255, 0.9);
      box-shadow: none; }
      .xbee-document a.xbee-powered:hover .xbee-powered-text {
        display: inline-block; }