/*
 * The overlay is where we display messages like Scanning, No Videos,
 * No SD card and SD Card in Use along with instructions for resolving
 * the issue.  The user can't interact with the app while the overlay
 * is displayed.
 */
.overlay {
  /* it takes up the whole screen */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* almost transparent gray */
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 110;
}

/*
 * The overlay content area holds the text of the overlay.
 * It has borders and a less transparent background so that
 * the overlay text shows up more clearly
 */
.overlay-content {
  background:
  url(images/ui/pattern.png) repeat left top,
  url(images/ui/gradient.png) no-repeat left top;
  background-size: auto auto, 100% 100%;
  /* We can't use shortand with background size because is not implemented yet:
  https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
  created by white-spaces and break lines in the code betewen inline-block elements */
  color: #fff;
  padding: 11rem 2.5rem 0 2.5rem;
}

.overlay-title {
  font-weight: normal;
  font-size: 1.9rem;
  color: #fff;
  margin: 0 0.5rem 0 0.5rem;
  padding: 0;
}

.overlay-text {
  padding: 1rem 0.5rem 0 0.5rem;
  border-top: 0.1rem solid #686868;
  font-weight: 300;
  font-size: 2.5rem;
  color: #ebebeb;
}

/** Menu Close
 ---------------------------------------------------------*/

/**
 * 1. Override high specificity of
 *    conifrm.css selectors.
 */

.overlay-menu-close {
  display: none !important; /* 1 */
}

/**
 * @closable=true
 */

.overlay[data-closable=true] .overlay-menu-close {
  display: block !important; /* 1 */
}

/** Menu Storage
 ---------------------------------------------------------*/

/**
 * 1. Override high specificity of
 *    conifrm.css selectors.
 */

.overlay-menu-storage {
  display: none !important; /* 1 */
}

/**
 * @nocard
 */

.overlay[data-type=unavailable] .overlay-menu-storage {
  display: block !important; /* 1 */
}

/*
 * Because the css selector specificity, if we use .hidden, we will not get the
 * hidden menu whose display is set as "block" by confirm.css. This css rule
 * overrides it as none.
 */
.overlay menu.hidden {
  display: none;
}

.overlay menu button.hidden {
  display: none;
}