@charset "UTF-8";
:root {
  --clr_accent1: #004D85;
  --clr_other: #8A1515;
  --clr_accent2: #004D85;
  --clr_link: #18577e;
  --clr_link_visited: #278DCC;
  --clr_link_hover_bg: #D0D0D0;
  --clr_code_bg: #E8E8E8;
  --gradient_hr: linear-gradient(to right, white, #808080, #808080, white);
  font-family: 'Open Sans', 'Arial', Helvetica, sans-serif;
  color: black;
  background-color: white;
}

#frame {
  max-width: 65em;
  min-height: 10em;
  margin: 0 auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

header {
  margin-bottom: 0.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, #D9541E 0 25%, #5D9732 25% 50%, #0067B1 50% 75%, #D18316 75% 100%) 1;
}

div.siteblock {
  margin-bottom: 0.2em;
}

.siteblock h1 {
  font-family: "Open Sans ExtraBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.6em;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: black;
  font-style: normal;
  font-variant: normal;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
}

.siteblock h2 {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  color: black;
  font-style: normal;
  font-variant: normal;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.2;
}

.siteblock a {
  color: inherit;
  text-decoration: inherit;
}

.siteblock a:hover {
  background-color: var(--clr_link_hover_bg);
  color: inherit;
  text-decoration: inherit;
}

.siteblock a:visited {
  color: inherit;
}

div.menu {
  font-size: 1.2em;
  margin-bottom: 0.2em;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  color: var(--clr_accent1);
}

.menu li a {
  color: inherit;
  text-decoration: inherit;
}

.menu li a:hover {
  background-color: var(--clr_link_hover_bg);
  color: inherit;
  text-decoration: inherit;
}

.menu li a:visited {
  color: inherit;
}

footer {
  text-align: center;
  margin-bottom: 0.5em;
}

footer::before {
  content: "";
  display: table;
  background-image: var(--gradient_hr);
  height: 1px;
  width: 100%;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

ul {
  list-style: disc;
  margin-inline-start: 1.5em;
  margin-bottom: 1em;
  padding: 0;
}

ol {
  list-style: decimal;
  margin-inline-start: 1.5em;
  margin-bottom: 1em;
  padding: 0;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: bold;
}

blockquote {
  quotes: none;
  margin-left: 5em;
  margin-bottom: 1em;
}

q {
  quotes: "“" "”";
}

a {
  text-decoration: underline;
  color: var(--clr_link);
}

a:hover {
  background-color: var(--clr_link_hover_bg);
}

a:visited, .linkvisited {
  color: var(--clr_link_visited);
}

.title {
  text-align: center;
  font-size: 1.6em;
  font-weight: bold;
  color: var(--clr_accent2);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1;
}

.subtitle {
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  color: var(--clr_accent1);
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1;
}

h1 {
  font-size: 2.0em;
  font-weight: normal;
  color: var(--clr_accent1);
  margin-top: 0.5em;
  margin-bottom: 0.2em;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
  color: var(--clr_accent2);
  margin-top: 0.5em;
  margin-bottom: 0.2em;
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--clr_accent2);
  margin-top: 0.2em;
}

h4 {
  font-size: 1.2em;
  font-weight: bold;
  font-style: italic;
  color: black;
  margin-top: 0.2em;
}

h5 {
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: underline;
  color: black;
  margin-top: 0.2em;
}

h6 {
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  color: black;
  margin-top: 0.2em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 h:visited {
  color: inherit;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h5 a:hover, h6 a:hover {
  color: var(--clr_link);
  text-decoration: underline;
}

hr {
  border: 0;
  height: 2px;
  background-image: var(--gradient_hr);
  width: 100%;
}

code {
  font: 0.9em "Lucida Console", Monaco, monospace;
  color: black;
  background-color: var(--clr_code_bg);
  padding: 0 3px 0 3px;
}

pre {
  font: 0.9em "Lucida Console", Monaco, monospace;
  color: black;
  background-color: var(--clr_code_bg);
  padding: 8px;
  border-width: 1px;
  border-style: ridge;
  border-radius: 5px;
  border-color: black;
  margin-bottom: 1em;
}

pre code {
  font: inherit;
  color: inherit;
  background-color: inherit;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 1em 0;
}

table th {
  font-weight: bold;
}

table th, table td {
  border: 1px solid white;
  padding: 6px 13px;
}

table.layout {
  margin: 0;
}

table.layout th, table.layout td {
  border: 0 none white;
  padding: 0;
}

table.custom th, table.custom td {
  border-width: 1px;
  border-color: black;
  border-style: none;
}

/* The Modal (background) */
.modal_console {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.modal-content_console {
  background-color: #fefefe;
  margin: 0 auto;
  /* Center horizontally */
  padding: 20px;
  border: 1px solid #888;
  width: 700px;
  /* Fixed width for the modal content */
  box-sizing: border-box;
  /* Include padding and border in the width */
  position: relative;
  /* Ensure relative positioning */
  top: 10%;
}

/* The Close Button */
.close_console {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close_console:hover,
.close_console:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Table */
.table-container_console {
  width: 100%;
}

.data-table_console {
  width: 480px;
  table-layout: fixed;
  /* Fix the table layout */
}

/* Thick bottom border for header cells */
.header_console {
  border: 1px solid black;
  border-top: none;
  border-bottom: 2px solid black;
  text-align: center;
  padding: 8px;
}

.data-table_console td:first-child, .data-table_console th:first-child {
  width: 80px;
}

/* Distribute columns equally from the second column to the last column */
.data_console:not(:first-child), .header_console:not(:first-child) {
  width: 120px;
}

/* Custom styling for specific cells */
/* Second cell in the first row */
.header_console:nth-child(2) {
  border-left: 2px solid black;
}

/* Bottom border for the second row */
.data-table_console tr:nth-child(2) {
  border-bottom: 1px solid black;
}

/* Top and left border for the first cell in the second row */
.data-table_console tr:nth-child(2) td:first-child {
  border-top: 2px solid black;
  border-left: none;
  border-bottom: 1px solid black;
}

/* Left border for the second cell in the second row */
.data-table_console tr:nth-child(2) td:nth-child(2) {
  border-left: 2px solid black;
}

/* Left border for the first cell in the third row */
.data-table_console tr:nth-child(3) td:first-child {
  border-left: none;
}

.data-table_console tr:nth-child(2) td:nth-child(n+2):nth-child(-n+5) {
  border-bottom: 1px solid black;
}

.data-table_console tr:nth-child(2) td:nth-child(n+2):nth-child(-n+4) {
  border-right: 1px solid black;
}

.data-table_console tr:nth-child(3) td:nth-child(n+2):nth-child(-n+4) {
  border-right: 1px solid black;
}

/* Left border for the second cell in the third row */
.data-table_console tr:nth-child(3) td:nth-child(2) {
  border-left: 2px solid black;
  border-right: 1px solid black;
}

.data-table_console .data_console {
  text-align: center;
}

.header_console:last-child {
  border-right: none;
}

.card {
  margin: 1em;
  padding: 1em 1.5em 1.5em 1.5em;
  box-shadow: 0 0 0.75em 0.25em rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #949494;
  border-radius: 8px;
  box-sizing: border-box;
}
.card h2 {
  margin: 0;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  overflow-wrap: break-word;
}
.card h3 {
  margin: 1.2em 0 0.5em 0;
  padding: 0 0.5em;
  line-height: 1.5em;
  border-radius: 4px;
  background-color: #e7e7e5;
  width: fit-content;
  font-size: inherit;
  color: inherit;
  font-weight: 200;
  font-family: "Open Sans", sans-serif;
}
.card dl > div {
  display: flex;
  margin: 0.25em 0;
  flex-wrap: wrap;
  align-items: flex-start;
}
.card dt {
  flex: 0 0 auto;
  width: 7em;
  color: inherit;
  font-size: 0.85em;
  font-weight: bold;
  vertical-align: top;
  overflow-wrap: break-word;
}
.card dd {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  /* Default min-with for flex is the length of the content. This enables overflow-wrap */
  vertical-align: top;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .card dl > div {
    flex-direction: column;
  }
  .card dt {
    width: 100%;
  }
  .card dd {
    width: 100%;
  }
  .card dd select,
  .card dd .select {
    width: 100%;
  }
}

.mmc_competency {
  margin: 1em;
  padding: 1em 1.5em 1.5em 1.5em;
  box-shadow: 0 0 0.75em 0.25em rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #949494;
  border-radius: 8px;
  box-sizing: border-box;
}
.mmc_competency h2 {
  margin: 0;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  overflow-wrap: break-word;
}
.mmc_competency h3 {
  margin: 1.2em 0 0.5em 0;
  padding: 0 0.5em;
  line-height: 1.5em;
  border-radius: 4px;
  background-color: #e7e7e5;
  width: fit-content;
  font-size: inherit;
  color: inherit;
  font-weight: 200;
  font-family: "Open Sans", sans-serif;
}
.mmc_competency dl > div {
  display: flex;
  margin: 0.25em 0;
  flex-wrap: wrap;
  align-items: flex-start;
}
.mmc_competency dt {
  flex: 0 0 auto;
  width: 7em;
  color: inherit;
  font-size: 0.85em;
  font-weight: bold;
  vertical-align: top;
  overflow-wrap: break-word;
}
.mmc_competency dd {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  /* Default min-with for flex is the length of the content. This enables overflow-wrap */
  vertical-align: top;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .mmc_competency dl > div {
    flex-direction: column;
  }
  .mmc_competency dt {
    width: 100%;
  }
  .mmc_competency dd {
    width: 100%;
  }
  .mmc_competency dd select,
  .mmc_competency dd .select {
    width: 100%;
  }
}

main {
  height: calc(100vh - 10rem);
  overflow: auto;
  padding-bottom: 1em;
}

.mm_columns {
  display: flex;
}

/* Left column only — keeps right column untouched */
.mm_columns > div:first-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* crucial for flex scrolling */
  overflow: hidden;
  /* avoid a second scrollbar on the column itself */
}

.mm_columns > div {
  flex: 1 1 0;
  height: 100%;
  overflow-y: auto;
  margin-right: 1em;
}

.mm_columns > div:last-child {
  margin-right: 0;
}

.mm_columns_header {
  height: 8rem;
}

.mm_columns_body {
  height: calc(100vh - 20rem);
}

.mm_flex_vert {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mm_flex_vert > * {
  flex-grow: 0;
  flex-shrink: 0;
  height: fit-content;
}

.mm_flex_grow1 {
  flex-grow: 1;
  flex-shrink: 1;
}

#match-console-button {
  background-color: #5d9732;
  color: white;
  border: none;
  /* Remove border */
  padding: 8px 16px;
  /* Adjust padding as needed */
  cursor: pointer;
  border-radius: 4px;
  /* Add border radius for rounded corners */
  float: right;
}

#match-console-button:hover {
  background-color: #367d39;
}

#match-collections-button {
  background-color: #0068b3;
  color: white;
  border: none;
  /* Remove border */
  padding: 8px 16px;
  /* Adjust padding as needed */
  cursor: pointer;
  border-radius: 4px;
  /* Add border radius for rounded corners */
  margin: 10px;
  float: right;
}

#match-collections-button:hover {
  background-color: #045a8d;
}

#match-collections-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  /* Change cursor to indicate disabled state */
}

#match-collections-button:hover:disabled {
  background-color: #0068b3;
}

.button-container_console {
  display: flex;
  justify-content: flex-end;
  /* Align items to the end of the container */
}

.modify-btn_console {
  background-color: #7a7a7a;
  color: white;
  border: none;
  /* Remove border */
  padding: 8px 16px;
  /* Adjust padding as needed */
  cursor: pointer;
  border-radius: 4px;
  /* Add border radius for rounded corners */
  align-self: right;
}

.button-container-download {
  display: flex;
  flex-direction: column;
  /* Stacks children vertically */
  justify-content: center;
  /* Centers children vertically in the container */
  align-items: center;
  /* Centers children horizontally in the container */
  padding: 8px 16px;
  /* Adjust padding as needed */
}

:root {
  --svg-triangle-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100'%3E%3Cpolygon points='22,22 79,50 22,79' fill='white' stroke='black' stroke-width='8' /%3E%3C/svg%3E");
  --svg-triangle-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100'%3E%3Cpolygon points='22,22 79,22 50,79' fill='white' stroke='black' stroke-width='8' /%3E%3C/svg%3E");
  --svg-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100'%3E%3Cpolygon points='22,22 79,22 79,79 22,79' fill='white' stroke='black' stroke-width='8' /%3E%3C/svg%3E");
  --svg-triangle-right-partial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100'%3E%3Cpolygon points='22,22 79,50 22,79' fill='rgb(180,180,180)' stroke='black' stroke-width='8' /%3E%3C/svg%3E");
  --svg-triangle-down-partial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100'%3E%3Cpolygon points='22,22 79,22 50,79' fill='rgb(180,180,180)' stroke='black' stroke-width='8' /%3E%3C/svg%3E");
  --svg-triangle-right-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100'%3E%3Cpolygon points='22,22 79,50 22,79' fill='black' stroke='black' stroke-width='8' /%3E%3C/svg%3E");
  --svg-triangle-down-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100'%3E%3Cpolygon points='22,22 79,22 50,79' fill='black' stroke='black' stroke-width='8' /%3E%3C/svg%3E");
  --svg-square-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 100 100'%3E%3Cpolygon points='22,22 79,22 79,79 22,79' fill='black' stroke='black' stroke-width='8' stroke-opacity='1' /%3E%3C/svg%3E");
}

#mmx_browse_tree {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Basic styles for the button-like div */
  /* Basic styles for the button-like div */
  /* Hover effect to mimic traditional button */
  /* Active state to mimic button press effect */
  /* Focus state for keyboard accessibility */
  /* Group the buttons vertically */
  /* Hide the default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Add labels for better UX */
  /* Ensure the entire container is aligned */
}
#mmx_browse_tree h2 {
  margin: 0;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
}
#mmx_browse_tree h3 {
  margin: 1.2em 0 0.5em 0;
  padding: 0 0.5em;
  line-height: 1.5em;
  border-radius: 4px;
  background-color: #e7e7e5;
  width: fit-content;
  font-size: inherit;
  color: inherit;
  font-weight: 200;
  font-family: "Open Sans", sans-serif;
}
#mmx_browse_tree ul {
  list-style: none;
  margin: 0;
}
#mmx_browse_tree ul ul {
  margin-left: 1.5em;
}
#mmx_browse_tree li {
  width: fit-content;
}
#mmx_browse_tree .selected {
  background-color: #afc9e4;
}
#mmx_browse_tree button {
  background-color: inherit;
  width: 1.5em;
  height: 1em;
  background-image: var(--svg-triangle-right);
  background-repeat: no-repeat;
  background-origin: padding-box;
  border: none;
  text-decoration: none;
  cursor: pointer;
}
#mmx_browse_tree button.search_select {
  background-color: red;
  /* Gray background color */
  color: #888;
  /* Gray text color */
  cursor: not-allowed;
  /* Change cursor to indicate it's disabled */
  margin: 5px;
}
#mmx_browse_tree button.mmb_partial {
  background-image: var(--svg-triangle-right-partial);
}
#mmx_browse_tree button.mmb_desc {
  background-image: var(--svg-triangle-right-desc);
}
#mmx_browse_tree button.mmb_expanded {
  background-image: var(--svg-triangle-down);
}
#mmx_browse_tree button.mmb_expanded.mmb_partial {
  background-image: var(--svg-triangle-down-partial);
}
#mmx_browse_tree button.mmb_expanded.mmb_desc {
  background-image: var(--svg-triangle-down-desc);
}
#mmx_browse_tree button.mmb_leaf {
  background-image: var(--svg-square);
}
#mmx_browse_tree button.mmb_leaf.mmb_desc {
  background-image: var(--svg-square-desc);
}
#mmx_browse_tree .mmb_selected {
  background-color: #b1deff;
}
#mmx_browse_tree .button-div {
  display: inline-block;
  /* Inline-block to allow width and height */
  padding: 4px;
  /* Padding to give it button-like dimensions */
  font-size: 12px;
  /* Font size to match button text */
  font-family: inherit;
  /* Inherit font from parent */
  text-align: center;
  /* Center the text */
  text-decoration: none;
  /* Remove any text decoration */
  color: #000;
  /* Black text color */
  background-color: #f0f0f0;
  /* Light grey background */
  border: 1px solid #ccc;
  /* Light grey border */
  cursor: pointer;
  /* Change cursor to pointer */
  box-sizing: border-box;
  /* Include padding and border in element's total width and height */
  user-select: none;
  /* Prevent text selection on click */
  border-radius: 4px;
  /* Rounded corners to match button */
  outline: none;
  /* Remove default focus outline */
  float: right;
  margin: 1px;
}
#mmx_browse_tree .button-div:hover {
  background-color: #e0e0e0;
  /* Slightly darker grey background on hover */
  border-color: #bbb;
  /* Slightly darker grey border on hover */
}
#mmx_browse_tree .button-div:active {
  background-color: #d0d0d0;
  /* Darker grey for active state */
  border-color: #aaa;
  /* Darker border for active state */
}
#mmx_browse_tree .button-div:focus {
  outline: 2px solid #000;
  /* Black outline for focus */
}
#mmx_browse_tree .button-group {
  display: flex;
  /* Enable flexbox */
  flex-direction: column;
  /* Stack buttons vertically */
  align-items: flex-end;
  /* Align buttons to the right */
  float: right;
}
#mmx_browse_tree input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
#mmx_browse_tree .custom-checkbox {
  position: relative;
  display: inline-block;
  width: 18px;
  /* Adjusted size */
  height: 18px;
  /* Adjusted size */
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  cursor: pointer;
  margin-right: 5px;
  /* Reduced margin */
  vertical-align: middle;
  /* Aligns checkbox with the text */
}
#mmx_browse_tree .custom-checkbox:hover {
  background-color: #ccc;
}
#mmx_browse_tree .custom-checkbox::after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  /* Adjusted position */
  top: 3px;
  /* Adjusted position */
  width: 4px;
  /* Adjusted size */
  height: 8px;
  /* Adjusted size */
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#mmx_browse_tree input[type="checkbox"]:checked + .custom-checkbox {
  background-color: #4CAF50;
  /* Green */
}
#mmx_browse_tree input[type="checkbox"]:checked + .custom-checkbox::after {
  display: block;
}
#mmx_browse_tree .checkbox-label {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  vertical-align: middle;
  /* Aligns text with the checkbox */
  margin-left: 0;
  /* Ensures no extra margin on the left */
}
#mmx_browse_tree .checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  /* Adjusted bottom margin */
}

/* Make the custom element itself the scroll container */
#mmx_browse_tree mm-collection {
  display: block;
  /* custom elements are inline by default */
  flex: 1 1 auto;
  /* take remaining height */
  min-height: 0;
  /* critical in flex layouts */
  overflow: auto;
  /* scrolls the shadow DOM contents */
}

.mmx_descSearchBar input {
  height: 2em;
  vertical-align: top;
}

.mmc_descSearch {
  width: calc(100% - 3em);
}

.mmc_descSearchButton {
  width: 3em;
  cursor: pointer;
}

.mmc_descriptor {
  margin: 1em;
  padding: 1em 1.5em 1.5em 1.5em;
  box-shadow: 0 0 0.75em 0.25em rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #949494;
  border-radius: 8px;
  box-sizing: border-box;
}
.mmc_descriptor h2 {
  margin: 0;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  overflow-wrap: break-word;
}
.mmc_descriptor h3 {
  margin: 1.2em 0 0.5em 0;
  padding: 0 0.5em;
  line-height: 1.5em;
  border-radius: 4px;
  background-color: #e7e7e5;
  width: fit-content;
  font-size: inherit;
  color: inherit;
  font-weight: 200;
  font-family: "Open Sans", sans-serif;
}
.mmc_descriptor dl > div {
  display: flex;
  margin: 0.25em 0;
  flex-wrap: wrap;
  align-items: flex-start;
}
.mmc_descriptor dt {
  flex: 0 0 auto;
  width: 7em;
  color: inherit;
  font-size: 0.85em;
  font-weight: bold;
  vertical-align: top;
  overflow-wrap: break-word;
}
.mmc_descriptor dd {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  /* Default min-with for flex is the length of the content. This enables overflow-wrap */
  vertical-align: top;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .mmc_descriptor dl > div {
    flex-direction: column;
  }
  .mmc_descriptor dt {
    width: 100%;
  }
  .mmc_descriptor dd {
    width: 100%;
  }
  .mmc_descriptor dd select,
  .mmc_descriptor dd .select {
    width: 100%;
  }
}
.mmc_descriptor div.annotation {
  float: right;
}

.mmc_descriptor.mm_active {
  border-color: #D9541E;
}

.toggle-button-bionic-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #004374;
}

.toggle-button-container {
  display: flex;
  flex-direction: row;
}

.mmc_form {
  margin: 1em;
  padding: 1em 1.5em 1.5em 1.5em;
  box-shadow: 0 0 0.75em 0.25em rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #949494;
  border-radius: 8px;
  box-sizing: border-box;
  max-width: max-content;
  min-width: min-content;
}
.mmc_form h2 {
  margin: 0;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  overflow-wrap: break-word;
}
.mmc_form h3 {
  margin: 1.2em 0 0.5em 0;
  padding: 0 0.5em;
  line-height: 1.5em;
  border-radius: 4px;
  background-color: #e7e7e5;
  width: fit-content;
  font-size: inherit;
  color: inherit;
  font-weight: 200;
  font-family: "Open Sans", sans-serif;
}
.mmc_form dl > div {
  display: flex;
  margin: 0.25em 0;
  flex-wrap: wrap;
  align-items: flex-start;
}
.mmc_form dt {
  flex: 0 0 auto;
  width: 7em;
  color: inherit;
  font-size: 0.85em;
  font-weight: bold;
  vertical-align: top;
  overflow-wrap: break-word;
}
.mmc_form dd {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  /* Default min-with for flex is the length of the content. This enables overflow-wrap */
  vertical-align: top;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .mmc_form dl > div {
    flex-direction: column;
  }
  .mmc_form dt {
    width: 100%;
  }
  .mmc_form dd {
    width: 100%;
  }
  .mmc_form dd select,
  .mmc_form dd .select {
    width: 100%;
  }
}
.mmc_form h2 {
  text-align: center;
  margin: 0;
}
.mmc_form label {
  display: inline-block;
  min-width: 6em;
}
.mmc_form .message {
  color: darkred;
}

.mmc_form_required {
  color: red;
}

.mm_descColumns {
  display: flex;
}

.mm_descColumns > div {
  flex: 1 1 0;
  height: 100%;
  overflow-y: visible;
  margin-right: 1em;
}

.arrow_button {
  cursor: pointer;
}

.arrow_button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mm_descColumns > div:last-child {
  margin-right: 0;
}

.mmx_stmtSearchBar {
  margin-bottom: 0.5em;
}

.mmx_stmtSearchBar input {
  height: 2em;
  vertical-align: top;
}

.mmc_stmtSearch {
  width: calc(100% - 3em);
}

.mmc_stmtSearchButton {
  width: 3em;
  cursor: pointer;
}

.mmc_stmtSearchResult {
  flex-grow: 1;
  flex-shrink: 1;
  height: 0;
  overflow-y: auto;
}

.mmx_lrmiCompose {
  flex-grow: 1;
  flex-shrink: 1;
  height: 0;
  overflow-y: auto;
}

.mm_listHr {
  border: 0;
  height: 4px;
  width: 100%;
  background-color: #004374;
  background-image: none;
}

.mm_toggleSurround {
  margin-right: 0.25em;
  padding: 0 0.25em;
}

.mm_stmtHead {
  font-weight: bold;
  padding-left: 0.25em;
}

.mm_stmt {
  padding-left: 0.25em;
  margin-bottom: 1em;
}

.mm_stmtAdd {
  display: inline-block;
  vertical-align: top;
  width: 3em;
}

.mm_stmtAdd.expanded {
  width: 9em;
  text-align: center;
}

.mm_stmtCentral {
  display: inline-block;
  vertical-align: top;
  width: 3em;
}

.mm_stmtCentralWide {
  display: inline-block;
  vertical-align: top;
  width: 5em;
}

.mm_stmtId {
  display: inline-block;
  vertical-align: top;
  width: 4em;
}

.mm_stmtType {
  display: inline-block;
  vertical-align: top;
  width: 4em;
}

.mm_stmtText {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 11.25em);
}

.mm_stmtKeyText {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 14.25em);
}

.mm_stmtKeyText.expanded {
  width: calc(100% - 20.25em);
}

.mm_stmtRemove {
  cursor: pointer;
}

.mm_stmtWideText {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 13.25em);
}

.mmc_lrmiForm {
  margin: 1em;
  padding: 1em 1.5em 1.5em 1.5em;
  box-shadow: 0 0 0.75em 0.25em rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #949494;
  border-radius: 8px;
  box-sizing: border-box;
}
.mmc_lrmiForm h2 {
  margin: 0;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  overflow-wrap: break-word;
}
.mmc_lrmiForm h3 {
  margin: 1.2em 0 0.5em 0;
  padding: 0 0.5em;
  line-height: 1.5em;
  border-radius: 4px;
  background-color: #e7e7e5;
  width: fit-content;
  font-size: inherit;
  color: inherit;
  font-weight: 200;
  font-family: "Open Sans", sans-serif;
}
.mmc_lrmiForm dl > div {
  display: flex;
  margin: 0.25em 0;
  flex-wrap: wrap;
  align-items: flex-start;
}
.mmc_lrmiForm dt {
  flex: 0 0 auto;
  width: 7em;
  color: inherit;
  font-size: 0.85em;
  font-weight: bold;
  vertical-align: top;
  overflow-wrap: break-word;
}
.mmc_lrmiForm dd {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  /* Default min-with for flex is the length of the content. This enables overflow-wrap */
  vertical-align: top;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .mmc_lrmiForm dl > div {
    flex-direction: column;
  }
  .mmc_lrmiForm dt {
    width: 100%;
  }
  .mmc_lrmiForm dd {
    width: 100%;
  }
  .mmc_lrmiForm dd select,
  .mmc_lrmiForm dd .select {
    width: 100%;
  }
}
.mmc_lrmiForm div.controls {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}
.mmc_lrmiForm div.controls_left {
  display: block;
}
.mmc_lrmiForm div.controls_right {
  display: block;
}

.mmc_editable {
  margin-top: 0.2em !important;
  border-color: lightgray !important;
  border-style: dashed;
  border-width: 1px;
  min-width: 4em;
  margin-top: 1em;
  outline: none !important;
}

#p_name:empty::before {
  content: "Name";
  color: gray;
}

#p_description:empty::before {
  content: "Description";
  color: gray;
}

/*
.mmc_editable:active,
.mmc_editable:focus {
    padding-left: 2px;
    outline: none;
}
*/
.hidden {
  display: none;
}

#lineage_title {
  cursor: pointer;
}

.toggle-container {
  display: flex;
}

.toggle-button {
  padding: 2.5px 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: pointer;
}

.active {
  background-color: #0068b3;
  color: white;
}

.disabled {
  background-color: #D8D8D8;
  color: white;
  cursor: not-allowed;
}

.info-button-wrapper {
  height: 10px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  /* Aligns with the surrounding text */
}

.info-button {
  font-family: Arial, sans-serif;
  width: 10px;
  /* Small width for the button */
  height: 10px;
  /* Small height for the button */
  font-style: normal;
  background-color: #6c757d;
  color: white;
  text-align: center;
  line-height: 12px;
  /* Aligns the 'i' vertically within the button */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  font-size: 8px;
  /* Small font size for the 'i' */
  display: inline-block;
  position: relative;
  top: -5px;
  /* Moves the button up to give a superscript effect */
}

.info-tooltip {
  visibility: hidden;
  width: 10rem;
  background-color: #333;
  font-style: normal;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 15px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  transition: visibility 0.2s, opacity 0.2s ease-in-out;
  opacity: 0;
  font-size: 15px;
  /* Larger font size for the tooltip text */
  /* You can change this font-size to suit your needs */
}

.info-button:hover .info-tooltip {
  visibility: visible;
  opacity: 1;
}

#mmx_describe_element {
  height: calc(100% - 150px);
  position: absolute;
  left: 50%;
  width: 50%;
  max-width: 500px;
  transition: all 0.3s ease-in-out;
}

#mmx_describe_element.expanded {
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  max-width: 1020px;
}

#mmx_find_and_select {
  height: calc(100% - 150px);
  position: absolute;
  right: 50%;
  width: 50%;
  max-width: 500px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

#mmx_find_and_select.transparent {
  opacity: 0;
}

.con-row {
  display: flex;
}

.con-heading {
  font-weight: bold;
}

.con-col1 {
  width: 14em;
}

.con-col2 {
  width: 12em;
}

.con-col3 {
  width: 12em;
}

.con-colspan {
  width: 38em;
  text-align: center;
}

.con_algForm {
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.con_matchHead {
  padding-left: 0.25em;
  font-weight: bold;
}

.con_matches {
  flex-grow: 1;
  flex-shrink: 1;
  height: 0em;
  overflow-y: auto;
}

.con_match {
  padding-left: 0.25em;
  margin-bottom: 1em;
}

.con_matchIndex {
  display: inline-block;
  vertical-align: top;
  width: 6em;
}

.con_matchKey {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 6.25em);
}

/* ===== toggle-switch =============== */
/* Set an input of type checkbox to class 'toggle-switch' to make the
 * control look like a switch instead of a checkbox.
 * Example:
 *     <input type='checkbox' name='cb1' class='toggle-switch'/><label for='cb1'>Lights</label>
 *
 * Adapted from: https://codeconvey.com/convert-checkbox-to-toggle-button-css/
 * with important adjustments to make it senstive to the local font size.
 * and the addition of comments.
 */
/* Toggle Switch */
input.toggle-switch {
  vertical-align: middle;
  font-size: 1em;
  /* Input doesn't automatically inherit font size. This brings it in. */
  appearance: none;
  /* Hide the existing checkbox so that the new rendering will overlay it */
  position: relative;
  /* Relative positioning holds this elements space and lets :before and :after pseudo-elements position relative to this */
  cursor: pointer;
  /* Change the cursor to a pointer when hovering on this element */
  margin: 0em 0.2em;
  /* No top and bottom margin. Make space to the left and right. Use 'em' units to keep space relative to local font size */
  width: 1.4em;
  /* Set the element width and height relative to the font size. */
  height: 0.8em;
}

/* Use the :after pseudo-element to create an oval as the surface of the button. */
input.toggle-switch:after {
  vertical-align: middle;
  /* Center this vertically */
  content: '';
  /* Empty text content. But still required to establish the element */
  display: inline-block;
  /* Inline-block makes it take up rectangular space */
  position: absolute;
  /* Absolute positioning without left and top locates this exactly on top of the input.toggle-switch */
  width: 1.4em;
  /* Width and height of the oval */
  height: 0.6em;
  background-color: gray;
  /* Light gray fill */
  border-radius: 0.3em;
  /* Border radius of half the height makes this an oval instead of a rectangle */
}

/* Use the :before pseudo-element to create a circle as the toggle handle */
input.toggle-switch:before {
  vertical-align: middle;
  /* Center this vertically thereby aligning to the background oval */
  content: '';
  /* Empty text content required to take up any space */
  display: inline-block;
  /* Inline-block makes it take up rectangular space */
  position: absolute;
  /* Absolute positioning without x and y locates this on top of the input.toggle-switch */
  width: 0.7em;
  /* Width and height are the same making it take up a square space which will be round with the border-radius */
  height: 0.7em;
  z-index: 1;
  /* Z-index of 1 positions this on top of the input.toggle-switch:after */
  left: 0;
  /* Position at the left edge of the parent checkbox (it will shift right when activated) */
  top: -0.1em;
  /* Center it vertically on the background oval - tweaked to position just right */
  border: 1px solid gray;
  /* border is the same color as the background oval */
  border-radius: 0.6em;
  /* Radious greater than 1/2 the height/width makes a circle */
  background-color: white;
  /* Fill with white */
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  /* Cast a shadow on the background */
  transition-duration: 0.3s;
  /* Animate turning on or off over 0.3 seconds */
}

/* Shift the handle to the right when turned on */
input.toggle-switch:checked:before {
  left: 0.7em;
  /* When turned on, shift to the right */
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
  /* When turned on, cast the shadow the other direction */
}

/* Change the background color to green when turned on */
input.toggle-switch:checked:after {
  background-color: #16a085;
}

.mm_preview_form {
  margin: 1em;
  padding: 1em 1.5em 1.5em 1.5em;
  box-shadow: 0 0 0.75em 0.25em rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #949494;
  border-radius: 8px;
  box-sizing: border-box;
  max-width: 80%;
}
.mm_preview_form h2 {
  margin: 0;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  overflow-wrap: break-word;
}
.mm_preview_form h3 {
  margin: 1.2em 0 0.5em 0;
  padding: 0 0.5em;
  line-height: 1.5em;
  border-radius: 4px;
  background-color: #e7e7e5;
  width: fit-content;
  font-size: inherit;
  color: inherit;
  font-weight: 200;
  font-family: "Open Sans", sans-serif;
}
.mm_preview_form dl > div {
  display: flex;
  margin: 0.25em 0;
  flex-wrap: wrap;
  align-items: flex-start;
}
.mm_preview_form dt {
  flex: 0 0 auto;
  width: 7em;
  color: inherit;
  font-size: 0.85em;
  font-weight: bold;
  vertical-align: top;
  overflow-wrap: break-word;
}
.mm_preview_form dd {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
  /* Default min-with for flex is the length of the content. This enables overflow-wrap */
  vertical-align: top;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .mm_preview_form dl > div {
    flex-direction: column;
  }
  .mm_preview_form dt {
    width: 100%;
  }
  .mm_preview_form dd {
    width: 100%;
  }
  .mm_preview_form dd select,
  .mm_preview_form dd .select {
    width: 100%;
  }
}
.mm_preview_form h2 {
  text-align: center;
  margin: 0;
}
.mm_preview_form .message {
  color: darkred;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 1em;
}

.big-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 10em;
  height: 7em;
  border: none;
  color: white;
  margin: 4px;
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 0.4s;
  position: relative;
  padding: 10px;
  overflow: hidden;
  text-decoration: none;
}

.big-button.disabled {
  cursor: not-allowed;
}

.big-button1 {
  background-color: #d8511f;
  text-decoration: none;
}

.big-button1:hover {
  background-color: #b34219;
}

.big-button2 {
  background-color: #5d9732;
}

.big-button2:hover {
  background-color: #367d39;
}

.big-button3 {
  background-color: #d08314;
}

.big-button3:hover {
  background-color: #ba7412;
}

.big-button4 {
  background-color: #0068b3;
}

.big-button4:hover {
  background-color: #045a8d;
}

.big-button5 {
  background-color: #969592;
}

.big-button5:hover {
  background-color: #737373;
}

.button-text {
  font-size: 20px;
  text-decoration: none;
}

.button-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  text-decoration: none;
}

.small-button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 4em;
  height: 1em;
  border: none;
  color: black;
  margin: 4px;
  cursor: pointer;
  border-radius: 6px;
  transition-duration: 0.4s;
  position: relative;
  padding: 10px;
  overflow: hidden;
  text-decoration: none;
}

.small-button5 {
  background-color: #f2f2f2;
}

.small-button5:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#download-matches:hover {
  cursor: pointer;
}

.modal-button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 10em;
  height: 1em;
  border: none;
  color: black;
  margin: 4px;
  cursor: pointer;
  border-radius: 6px;
  transition-duration: 0.4s;
  position: relative;
  padding: 10px;
  overflow: hidden;
  text-decoration: none;
}