html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
}

body {
  background-color: #0E1214;
  color: #fff;
  font-size: 10px;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-bottom: 5rem;
}

body > section {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 1.4rem;
  background-color: #0E1214;
}

.hidden {
  display: none;
}

ul {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #0E1214;
}

li .inner {
  height: 12rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

/* unwatched doesn't participate in the flexbox because its position is
   absolute so that it appears on top of the image instead of beside it */
.unwatched {
  background: url(images/unwatched.png) no-repeat center / 100%;
  position: absolute;
  bottom: 0;
  width: 0.4rem;
  top: 0;
}

li .inner .img {
  width: 21rem;
  overflow: hidden;
}

li .img.default {
  width: 6rem;
}

/* 1. Leave room for two rem when computing width of details
      to account for one rem margin left and right */
li .inner .details {
  line-height: 1.6rem;
  margin: 1.6rem 1rem; /* 1 */
  font-size: 1.4rem;
  color: #fff;
  width: calc(100% - 23rem); /* 1 */
  overflow: hidden;
}

li .details[data-visible] {
  visibility: visible;
}
li .after {
  color: #95a3a6;
}

span.line-break {
  display:block;
}

/* All of the main views fill the screen */
#thumbnail-views, #player-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 2.1rem;
}

/*
 * The thumbnail list appears in regular browsing mode, in selection mode,
 * and in pick mode.
 */

#thumbnails {
  position: absolute;
  left: 0;
  right: 0;
  /* top and bottom are set depending on view below */
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  /*
   * the body background is black, but remind the UA of that here to
   * keep the thumbnail view opaque if possible.
   */
  background-color: #0E1214;
  height: 100%;
}

/* thumbnails in thumbnail select view where there is a top bar */
#thumbnails.select,
#thumbnails.pick {
  top: 5rem;
  bottom: 0;
}

.thumbnail {
  border-top: 0.1rem solid;
  border-color:rgba(255,255,255, 0.1);
  margin: 0;
  height: 12rem;
  overflow: hidden;
  position: relative;
  list-style-type: none;
}

.thumbnail.selected > .inner {
  outline: solid #00aacc 0.3rem;
  outline-offset: -0.2rem;
}

/*
 * give the very last thumbnail a large bottom margin so that it doesn't
 * get stuck hidden behind the overlaid toolbar.
 * for normal thumbnails-list case, it is 4rem at bottom.
 */
#thumbnails>li:last-child{
  margin-bottom: 4rem;
}
/*
 * for normal thumbnails-select case, it is 5rem at top and 4rem at bottom.
 */
#thumbnails.select>li:last-child{
  margin-bottom: 9rem;
}

.thumbnail-group-header {
  font-size: 1.6rem;
  font-weight: 400;
  color: #8a9699;
  padding: 0;
  -moz-padding-start: 1rem;
  height: 4rem;
  line-height: 4rem;
}

#thumbnails>li:first-child .thumbnail-group-header {
  border-top: 0.1rem solid;
  border-color:rgba(255,255,255, 0.1);
}

#video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#video-container:active {
  background: none;
}

#player {
  /* size and position are set in JS depending on*/
  /* video size and screen orientation */
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

/*
 * 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,
#in-use-overlay,
#confirm-dialog {
  /* it takes up the whole screen */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#overlay,
#in-use-overlay {
  /* almost transparent gray */
  background-color: rgba(0, 0, 0, 0.4);
}

#confirm-dialog {
  background-color: #2d2d2d;
}

/*
 * In view.html (but not index.html) we put the in-use-overlay element
 * inside video-controls. In that case there is a 5rem title bar that needs
 * to be visible, so we alter the top position. And if we're handling
 * a pick activity, we also need the title bar with the back button to show.
 */
.video-controls > #in-use-overlay,
body.pick-activity > #in-use-overlay {
  top: 5rem;
}


/*
 * 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, #in-use-overlay-content {
  background-color: #2d2d2d;
  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;
  z-index: 100;
  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, #in-use-overlay-title {
  font-weight: normal;
  font-size: 1.9rem;
  color: #fff;
  margin: 0 0.5rem 0 0.5rem;
  padding: 0;
}

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

#overlay-menu {
  z-index: 100;
}

/* For overriding the style from BB */
#overlay-menu.hidden {
  display: none;
}

/* localization */
body.hidden *[data-l10n-id] {
  visibility: hidden;
}

#close {
  outline: none;
}

#h1 {
  background: none !important;
}

section[role="region"] > header {
  /* Need to use !important,else color is not reflecting */
  background: rgba(0, 0, 0, 0.85) !important;
}

section[role="region"] header:first-child h1 {
  font-size: 2.5rem;
  line-height: 5rem;
  margin: 0 0 0 3.4rem;
}

/* the indeterminate progress bar displayed while scanning */
#throbber {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.3rem;
  overflow: hidden;
  background-size: 1rem;
  background-image: repeating-linear-gradient(135deg,
                                              #000 0%,  #000 42%,
                                              #32D1F2 42%, #32D1F2 57%,
                                              #000 57%, #000 100%);
  z-index: 100;
}

#throbber.throb {
  animation: throb 1s steps(10) infinite;
}

@keyframes throb {
  from { background-position: 0 0; }
  to   { background-position: -1rem 0; }
}

/* buttons */
a.button {
  display: block;
  padding: 0;
  margin: 0;
  border-width: 0;

  /* for buttons that display text */
  font-size: 1.4rem;
  text-align: center;
  line-height: 4rem;
}

a.button:active, a.button:focus {
  outline: none;
}

a.button.disabled {
  opacity: 0.4;
  pointer-events: none;
}

footer {
  background: rgba(0, 0, 0, 0.75);
  height: 4rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#thumbnails-video-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
}

#thumbnails-select-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
}

#thumbnails-delete-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  border-right: 0.1rem solid #000;
}

#thumbnails-share-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
}

header .icon:after {
  background: none !important;
}

/* video player controls */
.video-controls {
  position: absolute;
  width: 100%;
  z-index: 10;
  opacity: 1;
  will-change: opacity, visibility;
  transition: visibility 0s, opacity var(--transition-duration);
}
.video-controls-hidden .video-controls {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.5s, 0s;
}

.video-controls.bottom {
  bottom: 0;
}

/* main control bar: play|pause, timeupdate, rwd|fwd
   For landscape mode here. Settings for portrait mode is written in
   media query at bottom */
#videoBar {
  position: absolute;
  right: 0;
  bottom: 4.4rem;
  left: 0;
  height: 4rem;
  font-size: 0;
  border-bottom: 0.1rem solid rgba(255,255,255, 0.1);
  background-color: rgba(0,0,0, 0.85);
  white-space: nowrap;
  z-index: 10;
}

#videoBar:last-child {
  bottom: 0;
}

#elapsed-text,
#timeSlider,
#slider-wrapper,
#duration-text {
  display: inline-block;
  position: relative;
  line-height: 4.2rem;
  vertical-align: top;
}

#elapsed-text, #duration-text {
  color: #ffffff;
  font-size: 1.4rem;
}

/* elapsed-text and duration-text have padding on left and right
   to support ltr and rtl locales */
#elapsed-text {
  width: 3.8rem;
  padding: 0 1.5rem;
  text-align: center;
}

#duration-text {
  width: 3.8rem;
  padding: 0 1.5rem;
  text-align: center;
}

/* time slider */
#timeSlider {
  position: relative;
  width: 100%;
  z-index: 10;
}

#slider-wrapper {
  /* Take into account width and padding of elapsed and duration text */
  width: calc(100% - 13.6rem);
  height: 4.2rem;
}

#slider-wrapper div {
  position: absolute;
  pointer-events: none;
}

.progress {
  height: 0.3rem;
  width: 0;
  top: 50%;
  margin-top: -0.1rem;
}

#elapsedTime {
  background-color: #00caf2;
  z-index: 30;
  margin-top: -0.2rem;
}

#bufferedTime {
  background-color: blue;
  z-index: 20;
}

#timeBackground {
  width: 100%;
  height: 0.1rem;
  background-color: #a6b4b6;
  z-index: 10;
}

#videoControlBar {
  height: 4.5rem;
}

#videoToolBar {
  position: relative;
  height: 4.8rem;
  font-size: 0;
  vertical-align: top;
  border-top: 0.1rem solid rgba(255,255,255, 0.1);
  background-color: #000;
  overflow: hidden;
  direction: ltr
}

#seek-backward,
#seek-forward,
#play {
  position: relative;
  height: 100%;
  padding: 0;
  font-weight: 500;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 3rem;
}

#seek-backward,
#seek-forward {
  width: 33%;
}

#play {
  width: 34%;
}

#play.paused:before {
  content: 'play';
  padding-left: 4px;
}

.player-controls-button {
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  background: transparent;
}

.player-controls-button:hover {
  background: transparent;
}

.player-controls-button:active {
  background: #00caf2;
}

.player-controls-button:disabled {
  opacity: 0.3;
}

.player-controls-button:disabled:active {
  background: transparent;
}

#playHead {
  position: absolute;
  top: calc(50% - 1.15rem);
  width: 2.3rem;
  height: 2.3rem;

  /* For LTR langauges, position the playhead 1.15 rems to the left 
   * so that the center of the playhead aligns with the beginning of
   * the time slider.
   */
  margin-left: -1.15rem;

  /* For RTL langauges, position the playhead 1.15 rems to the right 
   * so that the center of the playhead aligns with the end of
   * the time slider.
   */
  margin-right: -1.15rem;
 
  border: none;
  background: none;
  pointer-events: none;
  z-index: 40;
}

#playHead:after {
  content: "";
  position: absolute;
  top: calc(50% - 1.15rem);
  left: calc(50% - 1.15rem);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background-color: #fff;
}

#playHead.active:before {
  content: "";
  position: absolute;
  top: calc(50% - 3.05rem);
  left: calc(50% - 3.05rem);
  width: 6.1rem;
  height: 6.1rem;
  border-radius: 50%;
  background-color: #00CAF2;
}

/* layout changes for pick activity */
body:not(.pick-activity) #picker-title,
body:not(.pick-activity) #picker-done,
body:not(.pick-activity) #picker-close {
  display: none;
}

/**
 * 1. COMPLEX: Scoped style-sheets within <gaia-header>
 *    trump all other rules. !important is required
 *    for an app to over-ride the default appearance
 *    of content within the custom-element. This may
 *    change when we get `:host` and `:content` selectors
 *    in shadow-dom.
 */

body:not(.pick-activity) #picker-done,
body:not(.pick-activity) #picker-header {
  display: none !important; /* 1 */
}

/* hide options when picking */
body.pick-activity #options,
body.pick-activity #thumbnails-bottom {
  display: none !important; /* 1 */
}

#two-column-spearator {
  display: none;
}

/* details of a thumbnail */
.thumbnail .details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.thumbnail .details .title {
  order: 1;
  align-self: auto;
  word-break: break-all;
  direction: ltr /* the title is from the file name : always ltr */
}

.thumbnail .details .duration-text {
  order: 2;
  align-self: auto;
}

.thumbnail .details .size-type-group {
  order: 3;
  align-self: auto;
}

/**
 * 1. COMPLEX: Scoped style-sheets within <gaia-header>
 *    trump all other rules. !important is required
 *    for an app to over-ride the default appearance
 *    of content within the custom-element. This may
 *    change when we get `:host` and `:content` selectors
 *    in shadow-dom.
 */
#thumbnail-list-title {
  display: none !important; /* 1 */
}

/* we don't have fullscreen button when we are not in large layout */
#fullscreen-button {
  display: none;
}

.large-only {
  display: none !important; /* 1 */
}

/* not selection mode */
body:not(.layout-selection) .thumbnails-select,
/* not list mode */
body:not(.layout-list) .thumbnails-list,
/* not fullscreen-player mode */
body:not(.layout-fullscreen-player) #player-view {
  display: none !important; /* 1 */
}

.layout-fullscreen-player #thumbnails {
  display: none;
}

/* overlay mode */
.overlay #app-container, .info-view #app-container,
.options-view #app-container, .in-use-overlay #app-container,
.confirm-dialog #app-container {
  visibility: hidden;
}

/* spinner is only valid for tablet and landscape mode */
body:not(.view-activity) #spinner-overlay {
  display: none;
}

/* make videocontrolbar visible  when picking */
body.pick-activity .video-controls #videoBar {
  bottom: 4.4rem;
}

/*
 * increase specificity to overwrite confirm.css rules for dialog buttons
 */
form[role="dialog"][data-type="confirm"] button.hidden {
  display: none;
}

@media screen and (orientation: portrait) {
  li.details {
    width: 8rem;
  }
}

:focus { outline:none; }
::-moz-focus-inner {
  outline: none;
  border: none;
  padding: 0;
}

/*
 * By default do not allow any user text selection, only enable
 * on a per-element/region area.
 */
* {
  -moz-user-select: none;
}

html[dir=rtl] #video-title {
  direction: ltr;
}