seqdiag.css

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-menu {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.top-left {
  background-color: #4CBF50;
  height: auto;
  overflow: hidden;
}
.top-middle {
  flex: 1;
  color: white;
  /*padding: 10px 25px; */

  text-align: center;
  text-decoration: none;
  font-size: 16px;
  background-color: #78c878;
  overflow: hidden;
}

.top-right {
  display: flex;
  margin-left: auto;
  background-color: #4CBF50;
  overflow: hidden;
}

.top-button {
  background-color: #4CBF50; /* Green */
  border: none;
  border-left: 1px solid green;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.top-button:hover {
  background-color: #3e8e41;
}
#load_file.top-button {
  min-width: 120px;
  border-left: none;
}
#save_svg.top-button {
  border-right: 1px solid green;
}
#load_examples {
  background-color: #4CBF50; /* Green */
  border: none;
  border-left: 1px solid green;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  cursor: pointer;
}
#load_examples:hover {
  background-color: #3e8e41;
}
.dropdown {
  border: none;
  overflow: hidden;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #aaaaaa;
}

.main-flex {
  display: flex;
  width: 100%;
}
.edit-menu {
  width: 120px;
  background-color: #aaaaaa;
  display: block;
}
.scale {
  color: white;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.menu-button {
  min-width: 120px;
  background-color: #555555;
  border: 1px solid #aaaaaa;
  color: white;
  padding: 10px 10px;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
.menu-button:hover {
  background-color: #333333;
}
details summary {
  background-color: #555555;
  border: 1px solid #aaaaaa;
  cursor: pointer;
  color: white;
  padding: 10px 10px;
  text-align: center;
  font-size: 16px;
}
details summary:hover {
  background-color: #333333;
}

details summary > * {
  display: block;
}

.edit-menu label {
  color: white;
  width: 50%;
  border: none;
  outline: none;
}
.edit-menu input {
  width: 6ch;
}
.edit-menu select {
  background-color: #aaaaaa;
  color: white;
  width: 100%;
  border: none;
  outline: none;
}
option {
  background-color: #aaaaaa;
  color: white;
}

.main_pane {
  height: auto;
  min-height: 100% !important;
  flex: 1;
  background-color:  white;
  border: solid 1px grey;
}

.dialogHeader {
  background-color: #333;
  color: #fff;
  padding: 8px;
  cursor: move;
}
.dialogContent {
  background-color: #fff;
  padding: 8px;
}
.dialog {
  width:360px;
  display: flex;
  flex-direction: column;
  position: absolute;
  border: 1px solid black;
  visibility: hidden;
}
#layoutDialog.dialog {
  width:450px;
  top: 100px;
  right: 20px;
}
#lifelineDialog.dialog {
  top: 20px;
  right: 100px;
}
#messageDialog.dialog {
  top: 180px;
  right: 180px;
}
#frameDialog.dialog {
  width:450px;
  top: 360px;
  right: 360px;
}

.dialogContent label {
  display: inline-block;
  width: 130px;
  text-align: right;
}

.dialog.active {
  opacity: 1;
  pointer-events: auto;
}
table {
  display: inline-table;
  border-collapse: collapse;
}

#existingActBars {
  background-color: #cccccc;
}

#operands {
  background-color: #cccccc;
}

.initially-hidden {
  display: none;
}

.delBar {
  width: 3ch;
}

.palettedivrow {
 display: flex;
  align-items: center;
}

.colourlabel {
  display: inline-block;
  width: 130px;
  text-align: right;
}

.palettediv {
 border: 1px solid #AAAAAA;
 display: flex;
 height: 30px;
 width: 170px;
 align-items: stretch;
}

.swatch {
 flex: 1;
}