/**************** Header ****************/
#viewer-header {
  background-color: #fff;
  border-bottom: 1px solid #aaa;
  position: fixed;
  top: 0px;
  width: 100%;
  box-shadow: 0px 0px 0.2em rgba(0, 0, 0, 0.6); }
  #viewer-header #viewer-toolbar {
    display: table; }
    #viewer-header #viewer-toolbar > p {
      display: table-cell; }
  #viewer-header #viewer-search {
    width: 100%; }
    #viewer-header #viewer-search input {
      width: 100%;
      border: none;
      padding: 0.6em;
      box-sizing: border-box;
      color: #888; }
      #viewer-header #viewer-search input:focus {
        color: #000; }
  #viewer-header #viewer-tools {
    line-height: 0px;
    vertical-align: middle;
    padding: 0px 0.4em;
    white-space: nowrap; }
    #viewer-header #viewer-tools label {
      cursor: pointer;
      opacity: 0.2; }
      #viewer-header #viewer-tools label.hide {
        display: none; }

body:not(.drag) #viewer-tools label:hover {
  opacity: 0.6; }
body:not(.drag) #viewer-tool-trash {
  display: none; }

body.drag #viewer-tool-parent:hover, body.drag #viewer-tool-trash:hover {
  opacity: 0.6; }

/**************** Viewer ****************/
#viewer {
  /**************** List ****************/
  /**************** Details ****************/
  /**************** Menu ****************/
  /**************** help ****************/ }
  #viewer:not(.list) #viewer-list {
    display: none; }
  #viewer #viewer-list .menu li {
    display: flex;
    flex-direction: row; }
    #viewer #viewer-list .menu li.drag-placeholder {
      background-color: #ddd;
      color: #888; }
    #viewer #viewer-list .menu li.drag-indicator {
      position: absolute;
      box-sizing: border-box;
      opacity: 0.8;
      background-color: #fda; }
    #viewer #viewer-list .menu li span {
      flex: 1 1 auto; }
    #viewer #viewer-list .menu li .viewer-list-dirmark {
      flex: 0 0 auto;
      margin-left: 0.4em; }
      #viewer #viewer-list .menu li .viewer-list-dirmark svg {
        display: inline-block;
        width: 1em;
        height: 1em;
        vertical-align: middle; }
    #viewer #viewer-list .menu li .viewer-list-tool {
      flex: 0 0 auto;
      margin: -0.6em;
      padding: 0.6em;
      opacity: 0.4; }
      #viewer #viewer-list .menu li .viewer-list-tool:hover, #viewer #viewer-list .menu li .viewer-list-tool:active {
        opacity: 0.8; }
      #viewer #viewer-list .menu li .viewer-list-tool svg {
        vertical-align: middle; }
    #viewer #viewer-list .menu li:not(:hover):not(.active) .viewer-list-tool {
      display: none; }
  #viewer #viewer-details {
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    box-shadow: 0px 0px 0.2em rgba(0, 0, 0, 0.6);
    width: 100%;
    box-sizing: border-box; }
    #viewer #viewer-details:not(.active) {
      display: none; }
    #viewer #viewer-details > * {
      border-top: 1px solid #aaa;
      border-radius: 0px; }
    #viewer #viewer-details input, #viewer #viewer-details textarea {
      display: block;
      padding: 0px 0.2em;
      width: 100%;
      height: 1.4em;
      box-sizing: border-box;
      border: none; }
    #viewer #viewer-details textarea:focus {
      height: 4em; }
    #viewer #viewer-details > div {
      display: flex;
      flex-direction: row; }
    #viewer #viewer-details .viewer-detail-copy-target {
      display: inline-block;
      flex: 1 1 auto; }
    #viewer #viewer-details .copy-button {
      display: inline-block;
      width: 1.4em;
      height: 1.4em;
      box-sizing: border-box;
      flex: 0 0 1.4em; }
      #viewer #viewer-details .copy-button img {
        width: 1em;
        height: 1em;
        margin: auto; }
    #viewer #viewer-details #viewer-detail-password {
      font-family: monospace; }
  #viewer:not(.menu) #viewer-menu {
    display: none; }
  #viewer #viewer-help {
    padding: 0.4em; }
    #viewer #viewer-help #viewer-help-keys dl {
      margin-left: 0.4em; }
      #viewer #viewer-help #viewer-help-keys dl dt {
        font-weight: bold; }
      #viewer #viewer-help #viewer-help-keys dl dd {
        margin-left: 1em; }
  #viewer:not(.help) #viewer-help {
    display: none; }

/**************** Overlay ****************/
.overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  text-align: center; }
  .overlay:not(.active) {
    display: none; }
  .overlay#login.active {
    display: flex;
    justify-content: center; }
  .overlay#login form {
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .overlay#login form table {
      margin: auto; }
      .overlay#login form table td {
        padding: 0.2em 0.4em; }
        .overlay#login form table td.submit {
          text-align: right; }
  .overlay#login input {
    padding: 0.1em 0.2em;
    width: 100%;
    box-sizing: border-box; }
  .overlay#login button {
    margin-left: 0.2em;
    padding: 0.1em 0.4em; }
  .overlay#loading svg {
    position: relative;
    top: 50%;
    margin-top: -32px; }

.toast {
  position: fixed;
  color: #fff;
  background-color: rgba(1, 1, 1, 0.8);
  padding: 0.2em 0.4em;
  border-radius: 0.6em;
  opacity: 0;
  margin-bottom: 0px; }
  .toast .toast-triangle {
    position: absolute;
    bottom: -10px;
    left: calc(0.6em + 14px);
    margin-left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid rgba(1, 1, 1, 0.8);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; }
  .toast.active {
    opacity: 1;
    transition: opacity 0.2s; }
  .toast.active.dismiss {
    opacity: 0;
    margin-bottom: 2em;
    transition: opacity 0.4s, margin-bottom 0.6s; }

/*# sourceMappingURL=viewer.css.map */