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

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

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

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

.appWindow.popupWindow.alwaysLowered {
  display: none;
}

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

/* Utility tray needs to be actionable on the attention screen */

.appWindow.attentionWindow,
.appWindow.attentionWindow .chrome .controls {
  pointer-events: none;
}

/* Attention Screen needs to be clickable */

.appWindow.attentionWindow .render,
.appWindow.attentionWindow.toaster-mode {
  pointer-events: auto;
}

.appWindow:not(.homescreen):not(.searchWindow):not(.globalOverlayWindow).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):not(.searchWindow):not(.globalOverlayWindow).render > div.browser-container {
  background-color: #fff;
}

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

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

.appWindow.enlarge {
  animation: openApp var(--transition-duration) forwards
             cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

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

.appWindow.from-cardview {
  animation: openAppFromCardView 300ms forwards cubic-bezier(.35,.9,.6,1);
}

@keyframes openAppFromNewCard {
  0% { transform: scale(0.5) translateY(200%); }
  20% { transform: scale(0.5) translateY(200%); }
  65% { transform: scale(0.5) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

.appWindow.from-new-card {
  animation: openAppFromNewCard 1200ms forwards ease-in-out;
}

/* 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 var(--transition-duration) forwards
             cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

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

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

/* Invoking app moves out */
html[dir="ltr"] .appWindow.invoking {
  animation: invokingApp_ltr var(--transition-duration) forwards linear;
}
html[dir="rtl"] .appWindow.invoking {
  animation: invokingApp_rtl var(--transition-duration) forwards linear;
}
@keyframes invokingApp_ltr {
  0%   { transform: translateX(0) }
  100% { transform: translateX(calc(-100% - 20px)); }
}
@keyframes invokingApp_rtl {
  0%   { transform: translateX(0) }
  100% { transform: translateX(calc(100% + 20px)); }
}

/* Invoked app moves in */
html[dir="ltr"] .appWindow.invoked {
  animation: invokedApp_ltr var(--transition-duration) forwards linear;
}
html[dir="rtl"] .appWindow.invoked {
  animation: invokedApp_rtl var(--transition-duration) forwards linear;
}
@keyframes invokedApp_ltr {
  0%   { transform: translateX(calc(100% + 20px)); }
  100% { transform: translateX(0); }
}
@keyframes invokedApp_rtl {
  0%   { transform: translateX(calc(-100% - 20px)); }
  100% { transform: translateX(0); }
}

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

.appWindow.fade-out {
  animation: fadeOutApp var(--transition-duration) forwards
             cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

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

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

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

.appWindow.reduce {
  animation: closeApp var(--transition-duration) 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.6.
 */
.appWindow.zoom-out {
  transform: scale(2);
  animation: zoom-out var(--transition-duration) forwards
             cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

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

.appWindow.to-cardview {
  animation: closeAppTowardsCardView 300ms forwards cubic-bezier(.35,.9,.6,1);
}

@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.5); }
}

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

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

@keyframes home-from-cardview {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes home-to-cardview {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.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: translateX(0);
  transition: transform 0.25s cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow iframe {
  visibility: visible;
}

.appWindow[transition-state="closed"]:not(.toaster-mode) > div.browser-container > iframe {
  visibility: hidden;
}

.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.inactive > .touch-blocker,
.appWindow.overlay > .touch-blocker,
.appWindow.transition-closing > .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 > .modal-dialog,
.appWindow > .authentication-dialog,
.authentication-dialog > .authentication-dialog-http {
  visibility: hidden;
}

.appWindow.searchWindow {
  overflow: visible;
}

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

.appWindow > .modal-dialog > form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  visibility: hidden;
}

.appWindow > .modal-dialog input {
  border-radius: 0.2rem;
  height: 4rem;
  font-size: 2rem;
  width: 100%;
  color: white;
  background: none;
  box-sizing: border-box;
  margin-bottom: 1.5rem; /* not overlap by menu while keyboard pop */
}

.appWindow > .modal-dialog > form.visible {
  visibility: visible;
}

/****************** Screenshot Overlay ******************/
.appWindow .screenshot-overlay {
  pointer-events: none;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;

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

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

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

.appWindow.collapsible .screenshot-overlay {
  margin-top: var(--rocketbar-urlbar-height);
}

.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.private > .identification-overlay {
  background: rgba(57, 46, 84, 0.9);
}

.appWindow.suspended > .identification-overlay,
.appWindow:not(.active):not(.in-task-manager).overlay > .identification-overlay {
  transition: none;

  visibility: visible;
  opacity: 1;
}

#screen.cards-view .appWindow.in-task-manager.overlay.no-screenshot > .identification-overlay {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in, visibility 0.2s;
}
.appWindow.overlay.no-screenshot.from-cardview.overlay > .identification-overlay {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in, visibility 0.2s;
}


/* 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:not(.no-screenshot).overlay > .identification-overlay,
.appWindow.enlarge.overlay > .identification-overlay,
.appWindow:not(.no-screenshot).from-cardview.overlay > .identification-overlay {
  opacity: 0 !important;
  transition: none !important;
}

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

.identification-overlay > div .icon {
  position: absolute;
  top: 0;
  offset-inline-start: calc(50% - 3rem);
  width: 6rem;
  height: 6rem;
  background: no-repeat center / 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;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;

  overflow: hidden;
}

.private .identification-overlay > div .title {
  color: #e7e7e7;
}

/* 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 > .browser-container .screenshot-overlay {
  z-index: 10;
}

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

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

.appWindow.slideleft {
  animation: slideLeft var(--transition-duration) forwards
             cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

.appWindow.slideright {
  animation: slideRight var(--transition-duration) forwards
             cubic-bezier(0.7, 0.0, 1.0, 1.0);
}

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

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

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

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

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

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

.appWindow.out-to-right {
  animation: outToRight var(--transition-duration) 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 var(--transition-duration) 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%)); }
}

/*
  When a mozbrowser iframe requests fullscreen with SHB enabled,
  Gecko will make that element fixed and take up the entire viewport.
  However, due to bug 879443 the transform property will make fixed
  relative to this ancestor rather than the viewport, so we unset
  the transform for this case.
  See: https://bugzilla.mozilla.org/show_bug.cgi?id=1212960
*/
#screen:-moz-full-screen-ancestor > #windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow):not(.lockScreenInputWindow).active {
  transform: unset;
}

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

/* making the appWindows moz-elementable for the cardview */
#screen #windows > .appWindow:not(.homescreen):not(.lockScreenWindow):not(.attentionWindow):not(.lockScreenInputWindow).in-task-manager {
  position: fixed;
  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: translateX(0);
}

#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));
}

#screen #windows > .appWindow.will-become-active,
#screen #windows > .appWindow.inside-edges,
#screen #windows > .appWindow.outside-edges-left,
#screen #windows > .appWindow.outside-edges-right {
  will-change: transform;
}

@media (orientation: landscape) {
  #screen.software-button-enabled:not(.fullscreen-layout-app) #windows > .appWindow.outside-edges-right {
    /* BiDi note: the software home button should not be mirrored in RTL. */
    transform: translateX(calc(100% + var(--software-home-button-height)));
  }
}

#windows .appWindow.active iframe {
  transition-property: transform;
  transition-duration: var(--transition-duration);
}

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

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

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

/* Hide chrome UI of lockScreenInputWindow since we don't need */
.appWindow.lockScreenInputWindow > .titlebar,
.appWindow.lockScreenInputWindow > .chrome {
  display: none;
}

.appWindow.lockScreenInputWindow {
  background: none;
  pointer-events: none;
}