html,
body {
  height: 100%;
  width: 100%;
  position: absolute;
  font-family: Helvetica;
  overflow: hidden;
  margin: 0px;
}

input {
  margin-bottom: 20px;
}

#modal {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0.17;
  position: absolute;
  z-index: 1;
}

/* header and Canvas*/

.headerAndCanvas {
  margin-top: 5px;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 1px 125px 1px auto;
}

.header {
  display: grid;
  margin-left: 5px;
  grid-template-rows: 50px 75px;
}

#headlineAndButtons {
  display: grid;
  grid-template-columns: auto 390px 3px;
}

#headline {
  font-size: 17pt;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphenate-character: auto; /* not supported by Chrome*/
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 40px;
  cursor: pointer;
}

#currentDomainNameContainer {
  font-size: 10pt;
}

#headline:hover {
  color: #42aebb;
}

#headline:hover > #edit {
  opacity: 100;
}

#edit {
  opacity: 0;
}

#infoContainer {
  height: 75px;
}

#infoText {
  height: 100%;
  margin-bottom: 3px;
  position: relative;
  font-size: 10pt;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphenate-character: auto; /* not supported by Chrome*/
}

.infoText:hover {
  cursor: default;
}

.ButtonContainer {
  margin-top: 0.2em;
  position: relative;
}

#replayStep {
  padding: 1px;
  opacity: 0;
  margin-top: -2.05em;
  margin-left: 9.5em;
}

#line {
  padding: 2px;
  position: relative;
  right: 0em;
  left: 0em;
  width: 100%;
  border-bottom: solid 2px #ccc;
  margin-top: -5px;
}

#canvas,
#canvas > div {
  top: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Buttons */

#exportConfigurationButton {
  height: 36px;
  border: 1px solid transparent;
}

#importConfigurationButton {
  height: 36px;
  border: 1px solid transparent;
}

#resetIconConfigButton {
  justify-self: left;
  height: 30px;
}

#uploadCutomIcon {
  height: 30px;
}

#customIconConfigSaveButton {
  height: 30px;
}

#cancelIconCustomizationButton {
  height: 30px;
}

#customIconConfigCancelButton {
  margin-right: 3px;
}

#buttonImport,
#export,
#buttonImageDownloads,
#dictionaryButton {
  margin-right: -2px;
  background-color: white;
  border: 1px solid white;
}

#buttonSVG,
#buttonPNG {
  margin-right: -2px;
  font-size: 12pt;
  background-color: white;
  border: 1px solid #ddd;
}

#buttonPNG {
  margin-left: 1px;
}

#dictionaryButton {
  opacity: 0.2;
  pointer-events: "none";
}

#buttonImport:hover,
#importConfigurationButton:hover,
#exportConfigurationButton:hover,
#export:hover,
#buttonImageDownloads:hover,
#buttonSVG:hover,
#buttonPNG:hover,
#buttonStartReplay:hover,
#buttonStopReplay:hover,
#buttonNextStep:hover,
#buttonPreviousStep:hover,
#brokenDSTDialogCuttonCancel:hover,
#closeNoContentOnCanvasInfo:hover,
#keyboardShortcutInfoDialogButtonCancel:hover,
#iconCustomizationButton:hover,
#downloadDialogCancelButton:hover,
#keyboardShortcutInfoButton:hover {
  border: 1px solid #ccc;
  cursor: pointer;
}

#buttonStartReplay,
#buttonStopReplay,
#buttonNextStep,
#buttonPreviousStep,
#keyboardShortcutInfoButton,
#iconCustomizationButton {
  background-color: white;
  border: 1px solid white;
  margin-right: -4px;
}

#iconCustomizationButton {
  margin-right: 0px;
}

#closeDSTLogoInfo,
#closeWPSLogoInfo,
#closeIncompleteStoryInfo,
#closeVersionDialog,
#keyboardShortcutInfoDialogButtonCancel,
#downloadDialogCancelButton,
#brokenDSTDialogButtonCancel,
#closeNoContentOnCanvasInfo {
  position: absolute;
  font-size: 9pt;
  right: 1px;
  top: 1px;
}

/* activity label input */
#inputLabel [type="submit"],
#labelInputLabel [type="submit"] {
  background-color: DodgerBlue;
  color: #fff;
}

#domainNameInput {
  margin-bottom: 0px;
}

/* keyboard shortcut dialog table */

#keyboardTable {
  border-collapse: collapse;
  table-layout: fixed;
  margin-right: 3px;
}

#keyboardTable td {
  padding-right: 10px;
}

/* Logo Container */

.logoContainer {
  position: absolute;
  bottom: 75px;
  right: 5px;
}

#imgWPS {
  margin-left: 17px;
}

#imgWPS:hover,
#imgDST:hover {
  cursor: pointer;
}

/* Info and Dialogs*/

#dictionaryDialog,
#numberDialog,
#brokenDSTInfo,
#labelDialog,
#wpsLogoInfo,
#dstLogoInfo,
#incompleteStoryInfo,
#versionInfo,
#keyboardShortcutInfo,
#downloadDialog,
#noContentOnCanvasInfo {
  top: 40%;
  left: 50%;
  z-index: 2;
  position: absolute;
}

#wpsLogoInfo,
#incompleteStoryInfo,
#versionInfo,
#keyboardShortcutInfo,
#brokenDSTInfo,
#noContentOnCanvasInfo {
  font-size: 11pt;
  border: solid 1px #aaaaab;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  width: 350px;
  margin-left: -175px;
}

#dstLogoInfo {
  font-size: 11pt;
  border: solid 1px #aaaaab;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  width: 310px;
  margin-left: -155px;
}

#dialog,
#numberDialog,
#labelDialog,
#downloadDialog {
  padding: 30px 30px 30px 30px;
  background-color: #fafafa;
  border-color: #ccc;
  border-radius: 2px;
  border-width: 1px;
  box-shadow: 2px 2px 5px silver;
}

#arrowDialog {
  top: 50px;
  left: 52px;
  z-index: 2;
  position: absolute;
}

.arrow {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border: 0.9rem solid transparent;
  border-top-color: #fafafa;
  border-left-color: #fafafa;
  -moz-transform: scale(0.9999);
  transform: rotate(45deg);
  left: 6px;
  bottom: 228px;
}

#titleInput {
  width: 99%;
}

#descriptionInput {
  width: 99%;
}

/* Icon customization */

#allIconsListHeader {
  position: relative;
  left: 30px;
  top: 5px;
  font-size: 9pt;
  margin-bottom: 10px;
}

#iconCustomizationContainer {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 11pt;
  background-color: white;
  position: absolute;
  z-index: 2;
}

.iconConfigCustomization {
  display: flex;
  flex-direction: column;
  padding-right: 15px;
  padding-left: 15px;
  height: 100%;
}

.topButtonRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.iconListsContainer {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  overflow: hidden;
  padding-bottom: 15px;
}

#allIconListContainer {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-grow: 1;
  border: solid 1px #aaaaab;
  margin-right: 2px;
  height: 100%;
}

.listWrapper {
  overflow-y: auto;
  height: 100%;
}

.selectedIconsContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-grow: 1;
  border: solid 1px #aaaaab;
  margin-right: 2px;
  height: 100%;
}

.selectedIconListHeader {
  margin-left: 10px;
  font-weight: bold;
}

#selectedActorsContainer {
  border-bottom: solid 1px #ccc;
  overflow: hidden;
  height: 50%;
  display: flex;
  flex-direction: column;
}

#selectedActorsList {
  /* No actual effect in the visual part of the UI but the drag'n'drop area is larger */
  min-height: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: none;
  padding-left: 20px;
}

#selectedWorkObjectsContainer {
  overflow: hidden;
  height: 50%;
  display: flex;
  flex-direction: column;
}

#selectedWorkObjectsList {
  /* No actual effect in the visual part of the UI but the drag'n'drop area is larger */
  min-height: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: none;
  padding-left: 20px;
}

#selectedWorkObjectsList li,
#selectedActorsList li {
  padding: 3px 0px 3px 10px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#selectedWorkObjectsList li:hover,
#selectedActorsList li:hover {
  padding-left: -10px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#bottomButtonRow {
  margin-top: 5px;
  display: grid;
  grid-template-columns: 150px auto 100px 100px 60px;
}

/* dictionary */

#dictionaryDialog {
  position: absolute;
  border: solid 1px #aaaaab;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  top: 20%;
  width: 625px;
  left: 25%;
}

#activityDictionary,
#workobjectDictionary {
  position: relative;
}

#workobjectDictionary {
  margin-left: 10px;
  right: 5px;
}

#activityDictionaryContainer,
#workobjectDictionaryContainer {
  width: 300px;
  overflow-y: scroll;
  height: 300px;
  border: solid 1px #aaaaab;
}

#workobjectDictionaryContainer {
  margin-right: -50px;
}

#dictionaryButtons {
  bottom: 5px;
  padding: 4px;
}

/* autocomplete */

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #a9a9a9;
  z-index: 99;
  top: 100%;
  left: 0;
  text-align: left;
}

.autocomplete-items div {
  padding: 5px 10px 5px 10px;
  font-size: 10pt;
  cursor: pointer;
  background-color: #fafafa;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #fafafa;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

/* BPMN elements */

.djs-context-pad.open {
  margin-right: 18px;
  border: solid 1px #80808054;
}

.djs-context-pad.open > .group {
  border: solid 1px #80808054;
  padding: 1px;
  background-color: white;
}

/**
 * from bpmn.io
 */

/**
 * palette
 */

.djs-palette {
  position: absolute;
  left: 20px;
  top: 20px;

  box-sizing: border-box;
  width: 32px;
}

.djs-palette .separator {
  margin: 0 2px;
  padding-top: 0px;

  border: none;
  border-bottom: solid 1px #ddd;

  clear: both;
}

.djs-palette .entry:before {
  vertical-align: middle;
}

.djs-palette .djs-palette-toggle {
  cursor: pointer;
}

.djs-palette .entry,
.djs-palette .djs-palette-toggle {
  color: #333;
  font-size: 26px;

  text-align: center;
}

.djs-palette .entry {
  float: left;
}

.djs-palette .entry img {
  max-width: 100%;
}

.djs-palette .djs-palette-entries:after {
  content: "";
  display: table;
  clear: both;
}

.djs-palette .djs-palette-toggle:hover {
  background: #666;
}

.djs-palette .entry:hover {
  fill: #42aebb;
}

.djs-palette .highlighted-entry {
  color: #42aebb !important;
}

.djs-palette .entry,
.djs-palette .djs-palette-toggle {
  width: 30px;
  height: 30px;
  line-height: 30px;
  cursor: default;
}

/**
 * Palette open / two-column layout is controlled via
 * classes on the palette. Events to hook into palette
 * changed life-cycle are available in addition.
 */
.djs-palette.two-column.open {
  width: 64px;
}

.djs-palette:not(.open) .djs-palette-entries {
  display: none;
}

.djs-palette:not(.open) {
  overflow: hidden;
}

.djs-palette.open .djs-palette-toggle {
  display: none;
}

/**
 * outline styles
 */

.djs-outline {
  fill: none;
  visibility: hidden;
}

.djs-element.hover .djs-outline,
.djs-element.selected .djs-outline {
  visibility: visible;
  shape-rendering: crispEdges;
  stroke-dasharray: 3, 3;
}

.djs-element.selected .djs-outline {
  stroke: #8888ff;
  stroke-width: 1px;
}

.djs-element.hover .djs-outline {
  stroke: #42aebb;
}

.djs-element.attach-ok .djs-visual > :nth-child(1) {
  stroke: #42aebb !important;
}

/**
* Selection box style
*
*/
.djs-lasso-overlay {
  fill: #42aebb;
  stroke: #42aebb;
}

/**
 * Resize styles
 */
.djs-resize-overlay {
  stroke: #42aebb;
}

/**
 * drag styles
 */
.djs-dragger .djs-visual circle,
.djs-dragger .djs-visual path,
.djs-dragger .djs-visual polygon,
.djs-dragger .djs-visual polyline,
.djs-dragger .djs-visual rect,
.djs-dragger .djs-visual text {
  fill: none !important;
  stroke: #42aebb !important;
}

/**
 * snapping
 */
.djs-snap-line {
  stroke: #42aebb;
  stroke: rgba(255, 195, 66, 0.5);
}

.djs-palette .entry:hover {
  color: #42aebb;
}

.djs-palette .highlighted-entry {
  color: #42aebb !important;
}

.djs-context-pad .entry:hover {
  background: #42aebb;
}

.djs-popup .djs-popup-header .entry.active {
  color: #42aebb;
  border: solid 1px #42aebb;
  background-color: #f6f6f6;
}

.djs-popup-body .entry {
  width: auto !important;
}

.djs-segment-dragger:hover .djs-visual,
.djs-segment-dragger.djs-dragging .djs-visual,
.djs-bendpoint:hover .djs-visual,
.djs-bendpoint.floating .djs-visual {
  fill: #42aebb;
  stroke-opacity: 0.5;
  stroke: black;
}

.djs-segment-dragger.djs-dragging .djs-visual,
.djs-bendpoint.djs-dragging .djs-visual {
  fill: #42aebb;
}
.djs-tooltip-error > * {
  color: #42aebb;
  border-left: solid 5px #42aebb;
}

.djs-search-input input:focus {
  outline: none;
  border-color: #52b415;
}

.djs-search-result:hover {
  background: #fdffd6;
}

.djs-search-result-selected {
  background: #42aebb;
}

.djs-search-result-selected:hover {
  background: #42aebb;
}

.djs-search-overlay {
  background: #42aebb;
}