.enrichmentToolsMenu {
  display: flex;
  padding-left: 0px;
  align-items: start;
  justify-items: stretch;
}

.enrichmentToolsMenu > div {
  padding: 5px 8px 0px 8px;
}

.enrichmentToolsMenu li {
  display: flex;
  list-style: none;
  padding: 10px;
  background-color: var(--annotationPanelBackgroundColor);
}

.annotationToolsIcon {
  border: 3px solid black;
  border-radius: 5px;
  padding: 4px;
  display: flex;
  align-content: center;
  gap: 6px;
  cursor: pointer;
}

.annotationToolsIcon:hover {
  background-color: var(--annotationPanelHoverColor);
}

.annotationToolsIconGroup {
  border-radius: 5px;
  margin-bottom: 0.2em;
  position: relative;
}

.annotationMultiToolsIcon {
  border: 0px;
  padding: 6px 3px;
  flex-grow: 4;
  position: relative;
}

.annotationMultiToolsIcon:hover {
  background-color: var(--annotationPanelHoverColor);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.annotationMultiToolsButton {
  border: 2px solid var(--dropdownHeadingColor);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

.annotationMultiToolsSelector {
  border-left: 1px solid var(--dropdownHeadingColor);
  padding: 6px 0px;
  /* position: relative;
  left: 9px; */
}

.annotationMultiToolsSelector:hover {
  background-color: var(--annotationPanelHoverColor);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#annotationToolTargetTypeSelector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0.2em;
  border: 1px solid black
}

.annotationListItemButtons.icon {
  cursor: pointer;
}

#annotateIdentify.disabled,
writeAnnotationStandoffLabel.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.makeStandoffAnnotation svg.clockwise {
  pointer-events: none;
  cursor: default;
}

#markupToolsMenu {
  display: flex;
  align-items: stretch;
}

#annotationTools fieldset, #markupTools fieldset{
  border-width: 1px;
  border-radius: 9px;
  padding: 2px;
  width: 210px;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}

#annotationTools fieldset > legend, #markupTools fieldset > legend {
  font-weight: bold;
}

#annotationToolsDomainSelection fieldset {
  flex-direction: row;
  margin-bottom:1em;
}

.selectedAnnotationListItem {
  background-color: var(--annotationPanelHoverColor);
}

.annotationToolsDomainSelectionItem {
  display: flex;
}

.annotationHighlight {
  filter: drop-shadow(0px 0px 3em darkgreen);
}

.annotationDescribe {
  filter: drop-shadow(0px 0px 3em blue);
  cursor: help;
}

.annotationLink {
  filter: drop-shadow(0px 0px 3em purple);
  cursor: pointer;
}

.annotationIdentify {
  filter: drop-shadow(0px 0px 3em red);
  cursor: pointer;
}

.annotationHighlight.annotationListItem {
  filter: unset;
  box-shadow: 0em 0em 0.5em darkgreen;
}

.annotationDescribe.annotationListItem {
  filter: unset;
  box-shadow: 0em 0em 0.5em blue;
  cursor: pointer;
}

.annotationLink.annotationListItem {
  filter: unset;
  box-shadow: 0em 0em 0.5em purple;
}

.annotationIdentify.annotationListItem {
  filter: unset;
  box-shadow: 0em 0em 0.5em red;
}

.markup-panel {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 10px;
}

.markupGrp {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.markupSetting {
  display: inline-grid;
  margin-bottom: 10px;
}

.markupSetting select {
  background-color: var(--annotationPanelLinkBackgroundColor);
  color: var(--annotationPanelTextColor);
  max-width: fit-content;
}

.markupSetting select option {
  background-color: var(--annotationPanelLinkBackgroundColor);
  color: var(--annotationPanelTextColor);
}

.markup-btn-group {
  border: 1px solid black;
  border-radius: 5px;
  /*padding: 10px;*/
  cursor: pointer;
  /* Pointer/hand icon */
  float: auto;
  /* Float the buttons side by side */
}

/*.btn-group:after {
  content: "";
  clear: both;
  display: table;
}*/

.markup-btn-group span:not(:last-child) {
  padding-right: 10px;
}

/* Add a background color on hover */
/*.markup-btn-group .markup-dropdown:hover {
  background-color: var(--annotationPanelHoverColor);
}*/

.alternativeEncodingsContent {
  border-left: 1px solid black;
  width: min-content;
}

.markup-dropdown {
  display: inline-block;
  padding: 1px 2px;
}

.markup-dropdown-content {
  display: none;
  position: absolute;
  left: 0px;
  top: 2.2em;
  background-color: var(--annotationPanelLinkBackgroundColor);
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
  z-index: 1;
  border: 1px solid var(--dropdownHeadingColor);
  border-radius: 5px;
  width: 100%;
  margin-left: -1px;
}

/*.markup-dropdown-up {
  bottom: 50px;
}*/

.markup-dropdown-content a {
  color: var(--annotationPanelTextColor);
  padding: 6px 2px;
  text-decoration: none;
  display: block;
}

.markup-dropdown-content a:hover {
  background-color: var(--annotationPanelHoverColor);
}

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

#renderedAnnotationsContainer {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

#renderedAnnotationsContainer .highlightEllipse {
  fill: none;
  stroke: red;
  stroke-width: 3;
  stroke-opacity: 0.7;
}

#listAnnotations {
  display: flex /*!important*/;
}

#listAnnotations details {
  padding: 10px;
  margin: 5px;
}

#listAnnotation details[open] summary {
  border-bottom: 1px solid black;
}

summary svg {
  padding-right: 1em;
}

summary.noDetails {
  list-style: none;
  cursor: default;
}

.annotationToolsDomainSelectionItem {
  border: 1px solid black;
  border-radius: 5px;
  width: 205px;
  margin: 0.25em;
  padding: 0px !important;
}

.annotationListItem {
  border: 3px solid black;
  border-radius: 5px;
  height: fit-content;
  max-height: 205px;
  max-width: 205px;
  margin: 0.25em;
  flex-shrink: 0;
  cursor: pointer;
}

.annotationListItem legend {
  background-color: var(--annotationPanelBackgroundColor);
  /* border-radius: 8px; */
}

.annotationListItemButtons {
  border-top: 1px solid black;
  padding: 0.25em 0.5em;
}

.annotationContent {
  display: flex;
  flex-direction: column;
}

.annotationLocationLabel {
  font-weight: bold;
}

#addWebAnnotation {
  border: 1px solid black;
  border-radius: 5px;
  padding: 0.2em;
  margin: 0.25em;
  cursor: pointer;
  height: fit-content;
  max-width: 192px;
  padding: 0.25em 0.5em;
}

.annotationListItemButtons svg,
#listAnnotations svg {
  width: 1em;
  height: 1em;
}

.mao-selection {
  padding: 2px;
  padding-left: 5px;
}

.mao-extract {
  padding: 2px;
}

.mao-musMat {
  background-color: var(--annotationPanelLinkBackgroundColor);
  padding: 2px;
  border-radius: 10px;
}

#solid_logo {
  pointer-events: none;
}

#solidLogin {
  margin-left: 0.5em;
}

#providerSelect {
  display: block;
}

/* highlight markup menu buttons with corresponding colors */

.suppliedLabel {
  border-color: var(--suppliedBgColor);
}

.unclearLabel {
  border-color: var(--unclearBgColor);
}

.sicLabel {
  border-color: var(--sicBgColor);
}

.corrLabel {
  border-color: var(--corrBgColor);
}

.origLabel {
  border-color: var(--origBgColor);
}

.regLabel {
  border-color: var(--regBgColor);
}

.addLabel {
  border-color: var(--addBgColor);
}

.delLabel {
  border-color: var(--delBgColor);
}

.splitButtonContainer {
  /*display: inline-block;*/
  word-wrap: break-word;
  border-radius: 5px;
  margin: 4px;
}

.splitButtonLabel {
  padding: 1px 2px;
  border-width: 2px;
  border-radius: 5px;
  border-style: solid;
}

.splitButtonLabel:hover {
  background-color: unset;
}


.annotationToolTargetTypeSelector {
  display: flex;
  flex-direction: inherit;
  align-items: stretch;
  border: 1px solid #ccc;
  padding: 0;
  border-radius: 4px;
  width: 100%;
  overflow: hidden;
}

.annotationToolTargetTypeSelector legend {
  padding: 0 10px;
}

.annotationToolTargetTypeSelectionOption {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height:100%;
  border-radius: 9px;
}

.annotationToolTargetTypeSelectionOption:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.annotationToolTargetTypeSelectionOption input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.annotationToolTargetTypeSelectionOption label {
  padding: 8px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: background-color 0.2s;
}

.annotationToolTargetTypeSelectionOption input[type="radio"]:checked + label {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 9px;
}


.annotationToolTargetTypeSelectionOption input[type="radio"] + label::before {
  content: " ";
  width:1em;
  margin-right: 4px;
}

.annotationToolTargetTypeSelectionOption input[type="radio"]:checked + label::before {
  content: "✓";
  width:1em;
  margin-right: 4px;
}