.appWindow[transition-state="closed"]:not(.fadeout):not(.homescreen):not(.attentionWindow) {
  opacity: 0;
  transform: none;
}

#screen.utility-tray #windows > .appWindow {
  pointer-events: none;
}

.appWindow:not(.homescreen) {
  background-color: black;
}

.appWindow.popupWindow {
  background-color: white;
}

.appWindow:not(.homescreen).render {
  background-image: none !important;
  background-color: transparent;
}

.appWindow:not(.homescreen).light {
  background-color: #fff;
}

/* mozbrowser iframe layout */

.appWindow iframe {
  border: none;
}

.appWindow .throbber.loading {
  height: 0.3rem;
  background-image: url('../shared/progress.gif');
  background-size: auto 0.3rem;
}

.appWindow:not(.homescreen).render > div.browser-container {
  background-color: #fff;
}

.appWindow:not(.homescreen).light.render > div.browser-container {
  background-color: #f2f2f2;
}

.appWindow:not(.homescreen).render > div.browser-container > iframe {
  background-color: #fff;
}

.appWindow.enlarge {
  animation: openApp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.transition-closing.perpendicular {
  animation-duration: 0.1s;
}

.appWindow.from-cardview {
  overflow: hidden;
  animation: openAppFromCardView 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

/* Opacity increases start up time then we don't use it anymore for opening */
@keyframes openApp {
  0%   { transform: scale(0.2);}
  100% { transform: scale(1.0);}
}

.appWindow.zoom-in {
  transform: scale(1);
  animation: zoom-in 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

@keyframes zoom-in {
  0%   { transform: scale(1); }
  100% { transform: scale(3); }
}

@keyframes openAppFromCardView {
  0%   { transform: scale(0.48); }
  100% { transform: scale(1.0); }
}

.appWindow.invoked {
  animation: invokedApp .3s forwards linear;
}

.appWindow.invoking {
  animation: invokingApp .3s forwards linear;
}

/* Invoking app moves out */
@keyframes invokingApp {
  0%   { transform: translateX(0) }
  100% { transform: translateX(calc(-100% - 20px)); }
}

/* Invoked app moves in */
@keyframes invokedApp {
  0%   { transform: translateX(calc(100% + 20px)); }
  100%  { transform: translateX(0); }
}

.appWindow.fade-in {
  animation: fadeInApp 0.6s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.fast-fade-in {
  animation: fastFadeInApp 0.3s forwards cubic-bezier(0.25, 0.0, 0.0, 1.0);
}

.appWindow.fade-out {
  animation: fadeOutApp 0.6s forwards cubic-bezier(0.25, 0.0, 0.0, 1.0);
}

/* Invoking secure app moves out */
@keyframes fadeInApp {
  0%  {
         transform: scale(2.0);
         opacity: 0.0;
      }
  50% {
         transform: scale(1.5);
         opacity: 0.5;
      }
  100% {
         transform: scale(1.0);
         opacity: 1.0;
       }
}

@keyframes fastFadeInApp {
  0%  {
         transform: scale(1.0);
         opacity: 0.0;
      }
  100% {
         transform: scale(1.0);
         opacity: 1.0;
       }
}

/* Invoked secure app moves in */
@keyframes fadeOutApp {
  0%  {
         opacity: 1.0;
      }
  100% {
         opacity: 0.0;
       }
}

#windows.slow-transition .appWindow.transition-closing,
#windows.slow-transition .appWindow.transition-opening {
  animation-duration: 3s;
}

.appWindow.reduce {
  animation: closeApp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.transition-opening.perpendicular {
  animation-duration: 0.1s;
  opacity: 0;
}


/* The scale transformation used to be 5. In order to benefit from async
 * transform the frame width/height needs to be < 4096.
 * The size of one side of the frame is equal to
 * devicePixelRatio * frame.[width|height] * scale, and as a result we need
 * to pick a value that fits well for pixel ratio between 1 and 2.
 */
.appWindow.zoom-out {
  transform: scale(3);
  animation: zoom-out 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

@keyframes zoom-out {
  0%   { transform: scale(3);}
  100% { transform: scale(1);}
}

.appWindow.to-cardview {
  overflow: hidden;
  animation: closeAppTowardsCardView 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

@keyframes closeApp {
  0%   { transform: scale(1.0); opacity: 1;}
  100% { transform: scale(0.01); opacity: 0;}
}

@keyframes closeAppTowardsCardView {
  0%   { transform: scale(1.0); }
  100% { transform: scale(0.48); }
}

.appWindow.back {
  transition: transform 0.25s cubic-bezier(0.7, 0.0, 1.0, 1.0), visibility 0.25s cubic-bezier(0.7, 0.0, 1.0, 1.0);
  transform: scale(0.86);
}

.appWindow.restored {
  transform: none;
  transition: transform 0.25s cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow iframe {
  visibility: visible;
}

.appWindow > .fade-overlay {
  background-color: black;
  visibility: hidden;
  opacity: 0.8;
}

.appWindow.homescreen.fadeout .fade-overlay.hidden {
  visibility: hidden;
}

.appWindow.fadeout .fade-overlay {
  visibility: visible;
}

.appWindow.homescreen.fadeout .fade-overlay {
  opacity: 1;
}

.appWindow > .touch-blocker {
  visibility: hidden;
  background: transparent;
  pointer-events: all;
}

.appWindow.transition-closing .touch-blocker,
.appWindow.enlarge .touch-blocker,
.appWindow.transition-opening .touch-blocker {
  /* The animation takes .3 seconds so users cannot touch the app while the
   * closing animation is performing */
  visibility: visible;
}

.appWindow > .authentication-dialog,
.authentication-dialog > .authentication-dialog-http {
  visibility: hidden;
}

.appWindow > .contextmenu {
  visibility: hidden;
}

.appWindow > .contextmenu.visible,
.appWindow > .authentication-dialog.visible,
.authentication-dialog > .authentication-dialog-http.visible {
  visibility: visible;
}

/****************** Screenshot Overlay ******************/
.appWindow .screenshot-overlay {
  pointer-events: none;
  height: 100%;
  visibility: hidden;

  /* We need this to resize hi-res screenshot */
  background-size: cover;
}

.appWindow .screenshot-overlay.visible {
  visibility: visible;
}

.appWindow.collapsible .screenshot-overlay {
  background-color: inherit;
}

/* Bug 1071235: Workaround for bug 1076783 */
.browser-container:-moz-full-screen-ancestor > .screenshot-overlay {
  visibility: hidden;
}

.appWindow.collapsible:not(.active) .screenshot-overlay {
  margin-top: 4.6rem;
}

.appWindow > .identification-overlay {
  pointer-events: none;

  background: rgba(255, 255, 255, 0.8);

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in, visibility 0.2s;
}

.appWindow.suspended > .identification-overlay,
.appWindow:not(.active):not(.in-task-manager) > .identification-overlay.visible {
  visibility: visible;
  opacity: 1;
}

/* we don't want to show the overlay at all during the opening
   transition (from the homescreen and from the cardview) */
#screen .appWindow.in-task-manager > .identification-overlay.visible,
.appWindow.enlarge > .identification-overlay.visible,
.appWindow.from-cardview > .identification-overlay.visible {
  opacity: 0 !important;
  transition: none !important;
}

.identification-overlay > div {
  position: absolute;
  top: calc(50% - 4.65rem);
  left: 1.5rem;
  width: calc(100% - 3rem);
  height: 9.3rem;
}

.identification-overlay > div .icon {
  position: absolute;
  top: 0;
  left: calc(50% - 3rem);
  width: 6rem;
  height: 6rem;

  background-size: contain;
}

.identification-overlay > div .title {
  display: block;
  position: absolute;
  top: 7.5rem;
  left: 0;
  width: 100%;
  padding: 0;

  color: #4d4d4d;
  text-align: center;
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;

  overflow: hidden;
}

.appWindow iframe.hidden {
  visibility: hidden;
}

/* inline components */

.appWindow > .appWindow {
  z-index: 65536;
}

.appWindow > .touch-blocker {
  z-index: 1026;
}

.appWindow > .fade-overlay {
  z-index: 1025;
}

.appWindow > .identification-overlay {
  z-index: 1024;
}

.appWindow > .chrome {
  z-index: 5;
}

.appWindow > .authentication-dialog {
  z-index: 100;
}

.appWindow.slideleft {
  animation: slideLeft 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.slideright {
  animation: slideRight 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.slide-from-bottom {
  animation: slideFromDown 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.slide-to-bottom {
  animation: slideToDown 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.slide-from-top {
  animation: slideFromUp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

#windows.slow-transition .appWindow.slide-from-top {
  animation: slideFromUp 3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.slide-to-top {
  animation: slideToUp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.in-from-left {
  animation: inFromLeft 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.out-to-right {
  animation: outToRight 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

@keyframes slideLeft {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

.appWindow > .contextmenu {
  z-index: 11;
}

@keyframes inFromLeft {
  0%   {
    transform: translateX(-20%);
    opacity: 0.25;
  }
  100% {
    transform: translateX(0);
    opacity: 1.0;
  }
}

@keyframes outToRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.appWindow.slidedown {
  animation: slideDown 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

@keyframes slideFromDown {
  0%   { transform: translateY(calc(100%)); }
  100% { transform: translateY(0); }
}

@keyframes slideToDown {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(100%)); }
}

@keyframes inFromLeft {
  0%   {
    transform: translateX(-20%);
    opacity: 0.25;
  }
  100% {
    transform: translateX(0);
    opacity: 1.0;
  }
}

@keyframes outToRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@keyframes slideFromUp {
  0%   { transform: translateY(calc(-100%)); }
  100% { transform: translateY(0); }
}

@keyframes slideToUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(calc(-100%)); }
}

/* Edges */
#windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow) {
  /* not in the viewport */
  transform: translateX(-100%);
  opacity: 1;
}

/* making the appWindows moz-elementable for the cardview */
#screen #windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow).in-task-manager {
  transform: none;
}

.appWindow.attentionWindow.hidden {
  display: none;
}

#screen #windows > .appWindow.will-become-inactive {
  opacity: 0;
}

#screen #windows > .appWindow.active:not(.will-become-inactive):not(.back),
#screen #windows > .appWindow.will-become-active,
#screen #windows > .appWindow.inside-edges {
  opacity: 1;
  transform: none;
}

#screen #windows > .appWindow.outside-edges-left {
  opacity: 1;
  transform: translateX(calc(-100% - 2rem));
}

#screen #windows > .appWindow.outside-edges-right {
  opacity: 1;
  transform: translateX(calc(100% + 2rem));
}

@media (orientation: landscape) {
  #screen.software-button-enabled:not(.fullscreen-layout-app) #windows > .appWindow.outside-edges-right {
    transform: translateX(100%);
  }
}

#windows .appWindow.active iframe {
  transition-property: transform;
  transition-duration: 0.5s;
}

#screen.locked #windows .appWindow.active iframe {
  transition-property: none;
}

.appWindow.attentionWindow[transition-state="closed"] > div.browser-container {
  pointer-events: none;
}

/* Hide chrome UI of attention window */
.appWindow.attentionWindow > .chrome > .controls > .urlbar > .title {
  display: none;
}

#screen #windows .transparent-inline-activity.render > div.browser-container,
#screen #windows .transparent-inline-activity.render > div.browser-container > iframe.browser {
  background-color: transparent;
}