#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
  /* Since we display a sliding subview that extends to the border, we cannot
   * keep the default padding of arrow panels. We use the same padding in the
   * individual content views instead. Since we removed the padding, we also
   * have to ensure the contents are clipped to the border box. */
  padding: 0;
  overflow: hidden;
}

#login-fill-mainview,
#login-fill-details {
  padding: var(--panel-arrowcontent-padding);
}

#login-fill-doorhanger[inDetailView] > #login-fill-mainview {
  transform: translateX(-14px);
}

#login-fill-mainview,
#login-fill-details {
  transition: transform 150ms;
}

#login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
  transform: translateX(105%);
}

#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
  transform: translateX(-105%);
}

#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
  background-color: hsla(210,4%,10%,.1);
}

#login-fill-testing {
  color: #b33;
  font-weight: bold;
}

#login-fill-list {
  border: 1px solid black;
  max-height: 20em;
}

.login-fill-item[disabled] {
  color: #888;
  background-color: #fff;
}

.login-fill-item[disabled][selected] {
  background-color: #eef;
}

.login-hostname {
  margin: 4px;
  font-weight: bold;
}

.login-fill-item.different-hostname > .login-hostname {
  color: #888;
  font-style: italic;
}

.login-username {
  margin: 4px;
  color: #888;
}

#login-fill-details {
  padding: 4px;
  background: var(--panel-arrowcontent-background);
  color: var(--panel-arrowcontent-color);
  background-clip: padding-box;
  border-left: 1px solid hsla(210,4%,10%,.3);
  box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
              0 0 7px hsla(210,4%,10%,.1);
  -moz-margin-start: 38px;
}