/**
 * user/assets/styles/modal.css
 *
 * @author Pablo Rubio
 * @version 0.8
 */

#modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.72);
  top: 0px;
  left: 0px;
  z-index: 900;
  overflow: auto;
  padding: 0px;
  opacity: 0;
  display: none;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translate(0%, 0%) scale(1, 1);
}

#modal.loading {
  background-image: url('../images/spinner.gif');
  background-position: center;
  background-size: 20px;
  background-repeat: no-repeat;
}

#modal.loading,
#modal.complete {
  opacity: 1;
  transform: translate(0%, 0%), scale(1, 1);
}

#modal .outer,
#modal .outer .inner,
#modal .outer .inner .content {
  height: 100%;
  width: 100%;
}

#modal .inner .content {
  margin: 0px auto;
  background-color: rgba(255, 255, 255, 0.72);
  border-radius: 0px;
  padding: 0px;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#modal.complete .inner .content {
  opacity: 1;
}