#detail-popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  overflow: auto;
}

#record {
  position: relative;
  background: white;
  padding: 10px;
  height: 100%;
  margin-bottom: 25px;
  overflow-y: scroll;
}

#popup-content {
  width: 980px;
  margin: 25px auto;
  height: 90%;
}

/* POPUP ACTION BAR */

ul#popup-actions {
  list-style: none;
  padding: 0;
}

ul#popup-actions li {
  width: 38px;
  height: 38px;
  margin-top: 5px;
  background-color: white;
  cursor: pointer;
  text-align: center;
}

#popup-actions [data-do="edit"] {
  margin-top: 22px;
  background: url(../images/edit-schloss-close.svg) white no-repeat center;
  background-size: 70%;
}

#popup-actions [data-do="edit"].locked, #popup-actions [data-do="pdf"].locked {
  background: url(../images/spinner.gif) white no-repeat center;
  background-size: 70%;
}

.editable #popup-actions [data-do="edit"] {
  background: url(../images/edit-schloss.svg) white no-repeat center;
  background-size: 70%;
}

.editable [data-exemplar="originalImage"] {
  display: none;
}

#popup-actions [data-do="up"] {
  margin-top: 42px;
}

#popup-actions [data-do="up"], #popup-actions [data-do="down"] {
  background-color: transparent;
}

#popup-actions [data-do="clip"] img {
  height: 24px;
  margin-top: 7px;
}

#popup-actions [data-do="delete"] {
  background: url(../images/iconLoeschen.svg) white no-repeat center;
  background-size: 65%;
}

#popup-actions [data-do="reset"] {
  background: url(../images/iconZuruecksetzen.svg) white no-repeat center;
  background-size: 60%;
}

#popup-actions [data-do="close"] {
  background: url(../images/iconClose.svg) white no-repeat center 2px;
  background-size: 100%;
}

#popup-actions [data-do="clip"] {
  background: url(../images/Werk_in_die_Auswahl_01.svg) white no-repeat center 6px;
  background-size: 70%;
}

#popup-actions [data-do="pdf"] {
  background: url(../images/PDF_01.svg) white no-repeat center 6px;
  background-size: 70%;
}

#popup-actions [data-do="delete"],
#popup-actions [data-do="reset"] {
  visibility: hidden;
}

.editable #popup-actions [data-do="delete"],
.editable #popup-actions [data-do="reset"] {
  visibility: visible;
}

#popup-actions [data-do="delete"] img,
#popup-actions [data-do="reset"] img {
  height: 20px;
  margin-top: 9px;
}

ul#popup-actions li:first-child {
  margin-top: 0;
}

/* EDITABLE POPUP TEXT */

#popup-values {
  list-style: none;
  margin-top: 25px;
}

#edit-notes {
  margin-bottom: 24px;
}

#popup-values li {
  border-bottom: 1px solid #d3d3d3;
  padding-left: 15px;
}

#popup-values p {
  padding: 4px 5px 0 5px;
}

#popup-values p:first-child,
#edit-notes p:first-child {
  font-size: 1.3em;
  margin-bottom: 0;
  margin-top: 9px;
  color: #333;
  font-weight: bold;
}

#popup-values p:last-child,
#edit-notes p:last-child {
  margin-bottom: 5px;
  color: #8b8b8b;
}

#popup-values p[contenteditable="true"],
#edit-notes p[contenteditable="true"] {
  background: lightyellow;
}

/* POPUP SIDEBAR */

#popup-sidebar {
  position: relative;
  padding-top: 20px;
}

#popup-sidebar p {
  margin-left: 10px;
  font-size: 0.9em;
}

#popup-sidebar ul[data-record="history"],
#popup-sidebar ul[data-record="locationHistory"] {
  list-style: none;
  padding-left: 10px;
}

.history-caption {
  text-decoration: underline;
}

/* EXEMPLAR IMAGE AND IMAGE UPLOAD */

#exemplar-image {
  text-align: center;
  height: 300px;
  margin: 10px 0px 44px 10px;
  position: relative;
}

#exemplar-image img {
  max-height: 260px;
  max-width: 220px;
}

input[data-exemplar="image-upload"] {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
}

.editable [data-exemplar="archiveSelect"] a.selected {
  color: inherit;
  cursor: default;
}

.editable [data-exemplar="archiveSelect"] a {
  margin-right: 9px;
  
}
.delete-image,
[data-exemplar="archiveSelect"] .select-list,
.editable [data-exemplar="archiveSelect"] .select-view {
  display: none;
}

.editable input[data-exemplar="image-upload"],
.editable [data-exemplar="archiveSelect"] .select-list {
  display: inline;
}

.editable .delete-image {
  display: block;
  padding-left: 15px;
  margin-left: 8px;
  text-indent: -15px;
  font-weight: normal;
}

#record .archive-info {
  position: absolute;
  right: 24px;
  top: 13px;
  color: #008AC4;
  font-size: 1.1em;
}

/* TAGS (TECHNIKEN) */
.ui-autocomplete-input {
  margin: 0 !important;
  position: relative;
  top: -2px;
}

span[data-tagid] img {
  width: 13px;
  vertical-align: baseline;
}

span[data-tagid] img,
.ui-autocomplete-input,
.editable .tag-separator,
span[data-tagid]:last-child .tag-separator {
  display: none;
}

.editable span[data-tagid] img,.editable .ui-autocomplete-input {
  display: inline;
}

/* COLUMN SELECT POPUP FOR EXPORT */
#detail-popup .export-columns {
  padding: 20px;
}

#detail-popup .export-columns label {
  display: inline-block;
  width: 25%;
}

#popup-actions [data-do="clip"].clipped {
  background: url(../images/Werk_in_die_Auswahl_02.svg) white no-repeat center 6px;
  background-size: 70%;
}

/* GROESSE / DIMENSION */

#detail-popup .dimension div {
  width: 133px;
  display: inline-block;
}