/*
  Colour palette: IntAct-Portal
*/

.edge-diagram {
  height: 20pt;
}

.node-diagram text {
  font-size: xx-large;
  font-weight: bold;
  stroke: black;
  stroke-width: 8;
  stroke-opacity: 0.7;
  stroke-linejoin: round;
  paint-order: stroke;
}

svg.complete-legend-line {
  max-height: 30pt;
  width: fit-content;
  max-width: 100%;
}

a {
  color: #222;
}

dl dt a,
a.label,
.label,
a:hover,
a:focus,
a:active {
  color: #68297c;
}

h1 {
  color: #312146;
}

h2 {
  color: #68297c;
}

h3 {
  color: #444444;
}

a.special {
  background-color: #A699B7;
}

a.icon-link {
  border-bottom: none;
}

a.icon-link:hover {
  border-bottom: none;
}

.menu .active > a,
.tag,
.tabs-title > a:hover,
.button,
.button.primary {
  background-color: #68297C;
}

a.tag:hover {
  color: #fff;
}

.tabs-title > a:hover,
.button.hover,
.button.primary:hover,
.button.primary:focus {
  background: rgba(104, 41, 124, .9);
}

.tabs-title > a:focus,
.tabs-title > a[aria-selected='true'] {
  color: #fff;
  background: rgb(104, 41, 124);
}

.tabs-title > a {
  color: #312146;
}

.masthead {
  background-image: linear-gradient(#000000, #68297c);
}

.masthead-inner nav i {
  font-size: medium;
  /*line-height: 1em;*/
  margin-top: 0;
}

/* end */

/*IntAct tiles and buttons styling*/
a.intact-background,
.intact-background,
.intact-background.button,
.intact-background.button:hover,
.intact-background.tag {
  background: #68297c;
}

.intact-color {
  color: #68297c;
}

.button {
  color: #ffffff !important;
  background: #68297c;
  white-space: nowrap;
}

.button:focus,
.button:hover,
.button.hover {
  background-color: #68297c;
  opacity: 0.9;
}

.button.rounded {
  border-radius: 5em;
}

.button.lighter {
  background-color: rgb(149, 85, 171);
}

.button.lighter:focus,
.button.lighter:hover,
.button.lighter.hover {
  background-color: rgb(180, 123, 208);
  opacity: 1;
}

.button.lightest {
  background-color: rgb(197, 147, 222);
}

.button.lightest:focus,
.button.lightest:hover,
.button.lightest.hover {
  background-color: rgb(205, 170, 224);
  opacity: 1;
}

.button.outlined {
  background-color: white;
  color: #68297c !important;
  border: 1px solid #68297c;
}

.button.tight {
  margin-bottom: -1px;
}

.button.outlined:focus,
.button.outlined:hover,
.button.outlined.hover {
  color: rgb(149, 85, 171) !important;
  border: 1px solid rgb(149, 85, 171);
  opacity: 1;
}

.no-background {
  background-color: transparent;
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.no-padding-left {
  padding-left: 0 !important;
}

.no-horizontal-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.no-border {
  border: none !important;
}

.button.no-hover {
  cursor: default;
}

.button.no-hover:focus,
.button.no-hover:hover {
  opacity: 1;
}

.no-wrap {
  white-space: nowrap;
}

.button.disabled,
.button.disabled:hover,
.button.disabled:focus,
.button[disabled],
.button[disabled]:hover,
.button[disabled]:focus {
  background-color: #68297c;
  color: #fefefe;
  opacity: 0.25;
}

.dropdown-pane {
  width: max-content;
}

.button-bar {
  display: flex;
  justify-content: space-between;
  margin: 0;
  flex-wrap: wrap;
  padding-top: 1em;
  align-items: flex-end;
}

.button-group:not(.rounded) > .button:not(:last-child) {
  margin-right: 1px;
}

.button-group.rounded > .button:first-child {
  border-radius: 1.4em 0 0 1.4em;
  font-weight: bold;
}

.button-group.rounded > .button:last-of-type {
  border-radius: 0 1.4em 1.4em 0;
}

.button-group.rounded > .button.hover:last-of-type {
  border-radius: 0 1.4em 0 0;
}

.button-group .button.outlined {
  margin-right: -1px !important;
}

.on-top {
  position: relative;
  z-index: 100;
  opacity: 1;
}

input:disabled + label,
.disabled-elt,
.disabled-row span,
.disabled-row a {
  opacity: 0.2;
}


.dropdown-pane.rounded:focus, .dropdown-pane.rounded:active {
  box-shadow: none;
}

/* Accordion */
.accordion-title {
  position: relative;
  display: block;
  padding: 1.25rem 1rem;
  border: 1px solid #e6e6e6;
  border-bottom: 0;
  font-size: 0.875rem;
  line-height: 1;
  color: #312146;
}

.accordion-item.is-active > .accordion-title {
  background-color: #68297c;
  color: #ffffff;
}

.accordion-item.is-active > .accordion-title:hover, .accordion-title:hover {
  background-color: #68297c;
  color: #ffffff;
  opacity: 0.9;
}

.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
  display: block;
  width: 0;
  height: 0;
  border: inset 6px;
  content: '';
  border-bottom-width: 0;
  border-top-style: solid;
  border-color: #68297c transparent transparent;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  right: 1rem;
}

a:visited {
  color: #312146;
}

.legend-label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: normal;
  line-height: 1.6;
  color: #0a0a0a;
}

.legend-label span {
  vertical-align: super;
}

/* Progress bar */
.progress-meter {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  background-color: #68297c;
}

.progress {
  height: 1rem;
  margin-bottom: 0;
  border-radius: 0;
  background-color: #b7b8b8;
}

.tight-focus:active,
.tight-focus:focus,
.tight-focus.focus {
  box-shadow: 0 0 0 2px #216fd1;
  outline: none;
  z-index: 2;
}

/***************** Alert **********************/
.alert-panel {
  font-size: 16px;
  font-style: italic;
  background-color: #68297b3d;
  padding: 1em;
}

.alert-panel h3 {
  color: #68297c;
}

/***************** Tool tips **********************/
/* Tooltip container */
.tool-tip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tool-tip .tool-tip-text {
  visibility: hidden;
  width: 120px;
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;
  margin-left: 5px;
  top: -25%;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tool-tip:hover .tool-tip-text {
  visibility: visible;
}

/************** Feature Dataset SECTION *******************************/

.archive a {
  border-bottom-style: none;
}

/************** Scrollbar *******************************/

.scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scrollbar::-webkit-scrollbar-track {
  background: rgb(205, 170, 224);
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #68297c;
}

/**************************************************************/
/********* ADVANCED QUERY BUILDER RE-STYLE ********************/
/**************************************************************/
.miql {

}

.miql-field {
  color: #b050d0;
}

.miql-operator {
  color: #e9b401;
}

.miql-symbol {
  color: #0086b4;
}

.miql-string {
  color: #6dab49;
}

.ad-q-switch-label, .ad-q-switch-radio {
  line-height: 1;
  display: contents;
}

.ad-q-switch-radio ~ .button {
  position: relative;
  z-index: 10;
}

.ad-q-switch-radio ~ .button:focus,
.ad-q-switch-radio ~ .button:hover,
.ad-q-switch-radio ~ .button.hover {
  background-color: rgb(119, 62, 137);
  opacity: 1;
}

.ad-q-switch-radio:not(:checked) ~ .button {
  background: white;
  color: #68297c !important;
  border: 2px solid #68297c;
  padding: calc(0.85em - 1px) calc(1em - 1px);
}

.ad-q-switch-radio:not(:checked) ~ .button:focus,
.ad-q-switch-radio:not(:checked) ~ .button:hover,
.ad-q-switch-radio:not(:checked) ~ .button.hover {
  background: white;
  color: rgb(119, 62, 137) !important;
  border: 2px solid rgb(119, 62, 137);
}

.centered-icon {
  line-height: 1;
}

.q-tree {
  position: relative;
}

.ad-q-row {
  margin-top: -1px;
  margin-left: 0.75em;
  padding: 0.5em;
}

.invalid-rule-set {
  background-color: rgba(255, 0, 0, 0.1);
}

.display-contents {
  display: contents;
}

.ad-q-connector {
  position: relative;
}

#builder .button-group .button {
  margin-bottom: 0;

}

.q-right-align.button-group .button .icon {
  line-height: 12px;
}

.ad-q-connector:first-child::before {
  top: -12px !important;
  height: 40px !important;
}

.ad-q-connector::before {
  top: -4px !important;
  border-width: 0 0 2px 2px !important;
}

.ad-q-connector:not(:last-child)::after {
  top: 0;
  height: 100%;
  border-width: 0 0 0 2px !important;
}

.ad-q-connector.q-ruleset {
  border-left: none !important;
}

.ad-q-connector.q-ruleset::after, .ad-q-connector.q-ruleset::before {
  left: -12px;
  width: 12px;
}

.ad-q-connector.q-ruleset::before {
  width: 26px;
}

.ad-q-connector::after, .ad-q-connector::before {
  content: '';
  position: absolute;
  left: -13px;
  width: 13px;
  height: 32px;
  border: 0 solid #68297c;
}

/*.ad-q-connector::before {*/
/*  content: '';*/
/*  left: -10px;*/
/*  border: solid #68297c;*/
/*  position: absolute;*/
/*  !*width: 22px;*!*/
/*  !*height: 8px;*!*/
/*  !*top: -6px;*!*/
/*  !*border-width: 0 0 2px 2px;*!*/
/*  width: 24px;*/
/*  height: 33px;*/
/*  top: -28px;*/
/*  border-width: 2px 2px 0px 0px;*/
/*}*/

/*[_nghost-c11] .q-control-size[_ngcontent-c11] {*/
/*  display: inline-block;*/
/*  vertical-align: top;*/
/*  padding-right: 10px;*/
/*  margin-top: 8px;*/
/*  margin-bottom: -3px;*/
/*}*/

/**************************************************************/
/************** END ADVANCED QUERY BUILDER ********************/
/**************************************************************/


/************** HOME PAGE SECTION *******************************/


/* LOCAL NAVIGATION DROPDOWN */

.dropdown.menu > li.is-active > a {
  background-color: rgba(34, 34, 34, 0.9);
  color: #f8f8f8;
}

.masthead nav ul li.active a,
.masthead nav ul li a:active,
.masthead ul li.active-trail a,
.masthead ul li.active a:visited,
.masthead ul li.active-trail a:visited {
  font-weight: bold;
}

.dropdown.menu > li.is-dropdown-submenu-parent a.active {
  background-color: #f8f8f8;
  color: #555;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a.active::after {
  border-color: #555 transparent transparent;
}

/*********** END HOME PAGE SECTION *******************************/


/**************************************************************/
/*************** DATATABLES RE-STYLE ********************/
/**************************************************************/

div.dataTables_length > label > select {
  box-sizing: border-box;
  width: 41% !important;
  border-radius: 0;
}

.dataTables_wrapper .dataTables_paginate {
  float: none;
  text-align: center;
  padding-top: 1em;
}

.dataTables_wrapper .dataTables_info {
  padding-bottom: 1em;
}

.dataTables_scrollHead {
  overflow-x: auto !important;
  box-shadow: rgba(0, 0, 0, 0.36) 0 -5px 7px !important;
  transform: rotateX(180deg);
  z-index: 6 !important;
}

.dataTables_scrollHeadInner {
  transform: rotateX(180deg);
}

.top {
  display: flex;
  justify-content: space-between;
}

.top > .dataTables_info {
  order: 0;
  padding-left: 1rem;
}

.top > .dataTables_paginate {
  order: 1;
  padding-top: 3px;
}

.top > .dataTables_length {
  order: 2;
  padding-top: 3px;
  padding-right: 1rem;
}

#column-toggle {
  order: 3;
}

.cv-term {
  background: none !important;
  white-space: nowrap;
}

.cv-term.species {
  white-space: normal;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: #f9f9f9 !important;
}

.dataTable {
  width: 100% !important;
}

table.dataTable,
table.dataTable thead, table.dataTable tbody,
table.dataTable th,
table.dataTable td {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  text-align: center;
}

table.dataTable thead th, table.dataTable thead td {
  background-color: rgb(149, 85, 171);
  color: white;
  border-bottom: none;
  border-right: 1px solid white;
  text-align: center;
}

table.dataTable thead th:last-child {
  border-right: none;
}

table.dataTable tr, th {
  font-size: 13px;
}

.tabs-panel {
  padding: 1rem;
}

.tabs-panel.table-tab {
  padding: 1rem 0;
}

.tabs {
  position: relative;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.current {
  color: white !important;
  background: #68297c !important;
  border: 1px solid #ffffff00 !important;
}

.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:active,
.dataTables_wrapper .dataTables_paginate a.paginate_button:focus {
  background: rgba(104, 41, 124, .9) !important;
  color: white !important;
  border: 1px solid #ffffff00 !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: none !important;
}

table.dataTable thead th, table.dataTable thead td {
  border-bottom: none !important;
}
/************** TABLES ELEMENTS **************/

.shadow-left {
  display: block;
  position: absolute;
  width: 8px;
  top: 0;
  bottom: 0;
  z-index: 5;
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

.shadow-right {
  display: block;
  position: absolute;
  width: 8px;
  top: 0;
  bottom: 0;
  z-index: 5;
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}


div.dataTables_scroll {
  position: relative;
}

.detailsCell {
  font-size: small;
  display: inline-block;
}

.table-list {
  text-align: left;
}

.xrefLinkCell {
  cursor: pointer;
}

.limitWidth {
  max-width: 100px;
  word-wrap: break-word;
}

.tag-cell-container {
  margin: 1px 0;
  display: flex;
}

.vertical-flex {
  flex-direction: column;
}

.tag-cell {
  margin: 0 4px 0 0;
  white-space: nowrap;
  font-size: smaller;
  font-weight: bold;
  border-radius: 5px;
  padding: 0 4px;
  align-self: flex-start;
}

.tag-cell.centered {
  align-self: center;
  margin: 2px 0;
}

.detailsAnnotationCell {
  background-color: #569fec52;
  color: #14385f;
  /*padding: 3px 4px;*/
}

.detailsXrefCell {
  background-color: #dacee0;
  color: #482c56f7;
  /*padding: 3px 4px;*/
}

.detailsConfidencesCell {
  padding: 0 3px;
  line-height: 18px;
  font-size: small;
  background-color: #68297c44;
  color: #68297c;
  border: 1px solid #68297c;
}

.detailsExpansionsCell {
  background-color: rgba(99, 103, 189, 0.24);
  color: #19236d;
  font-size: small;
  /*padding: 3px 4px;*/
}


.identifier-cell-container {
  white-space: nowrap;
  text-align: left;
}

.identifier-cell {
  background-color: rgba(99, 103, 189, 0.24);
  color: #19236d;
  margin: 0 4px;
  padding: 0 4px;
}

.identifierCellWidth {
  white-space: nowrap;
}

.aliasesCell {
  width: 300px;
  /*display: flex;*/
}

.aliasesCellWidth {
  white-space: nowrap;
}

.detailsAliasesCell {
  background-color: #4ba77047;
  color: #0c6530 !important;
  /*padding: 0 3px;*/
}

.parametersCell {
  width: 100px;
  overflow: auto;
}

.alignCell {
  text-align: center;
}

.detailsFigureLegendCell {
  background-color: #4ba77047;
  color: #0c6530;
  /*padding: 2px 4px;*/
}

.annotationCell {
  width: 380px;
  white-space: nowrap;
}

.annotationCellWidth {
  max-width: 300px;
  white-space: normal;
}

.detailsCommentsCell {
  background-color: rgba(73, 165, 243, 0.29);
  color: #121d92;
  /*padding: 2px 4px;*/
}

.annotationInteractionCell {
  width: 450px;
}

.annotationInteractionCellWidth {
  max-width: 350px;
  white-space: normal;
}

.detailsCautionsCell {
  background-color: #f9956552;
  color: #de4f09;
  /*padding: 2px 5px;*/
}

.detailsAllCell {
  background-color: #8da0ad54;
  color: #46555f;
  /*padding: 2px 5px;*/
}


button.showMore, button.showLess {
  background-color: #67297cd6;
  color: #f8f8f8;
  font-size: smaller;
  font-weight: bold;
  padding: 2px 3px 2px 5px;
  cursor: pointer;
  text-align: left;
}

.icon-search-document {
  font-size: 15pt;
  color: #ffffff;
  background-color: #68297c;
  padding: 3px 5px 3px 4px;
  text-align: center;
  border-radius: 18px;
}

.icon::before {
  /*vertical-align: bottom;*/
}

/*.button-group .icon {*/
/*  line-height: 12px;*/
/*  vertical-align: middle;*/
/*}*/

/**************************************************************/
/********* END DATATABLES ROW STYLES ********************/
/**************************************************************/

.collapse-header .tag-cell {
  padding: 2px 4px;
  margin-right: 0;
}

ul.elementList {
  margin-bottom: 0;
  margin-left: 0.45rem;
}

ul.elementList li::marker {
  color: #68297c;
}

span.collapsable-counter {
  margin-left: 4px;
  color: #ffffff;
  background-color: #68297cbf;
  padding: 1px 4px;
  font-weight: bolder;
  font-size: smaller;
  text-align: center;
  border-radius: 15px;
}

.collapse-header {
  display: block;
  text-align: left;
  cursor: pointer;
  color: #68297c;
  white-space: nowrap;
}

.collapse-header *:first-child {
  margin-left: 4px;
}

.collapse-header::before {
  content: "\f107";
  text-decoration: none;
  font-style: normal;
  font-size: medium;
  text-rendering: optimizeLegibility !important;
  background-size: contain;
  font-weight: 400;
  font-family: 'EBI-Common';
  vertical-align: middle;
  display: inline-block;
}

.collapse-header.collapsed::before {
  transform: rotate(-90deg);
}

.collapse-panel.collapsed {
  visibility: hidden;
  height: 0;
}

.collapse-panel {
  padding-left: 0.7rem;
}

/*********** ANIMATIONS ************/

@keyframes rect-to-circle-morph {
  20%, 80% {
    rx: 0;
    transform: translate(0px, 0px);

    height: 18px;
    width: 98px;
  }

  30%, 70% {
    rx: 14;
    transform: translate(34px, -5px);
    border-radius: 999px;
    width: 28px;
    height: 28px;
  }
}

@keyframes rect-tick-morph {
  20%, 80% {
    y: 17;
    height: 8px;
  }

  30%, 70% {
    y: 29;
    height: 0;
  }
}

/***************FLEX TABLE**************/
.flex-row {
  display: flex;
  flex-flow: row wrap;
  transition: 250ms;
  align-items: center;
  padding: 0;
}

.flex-cell {
  width: calc(100% / 6);
  text-align: center;
  padding: 0.5em;
  overflow-wrap: anywhere;
}

@media all and (max-width: 1200px) {
  .flex-cell {
    width: calc(100% / 3);
  }

  .flex-cell.first {
    width: 100%;
    background-color: #68297cd9;
    color: white;
  }
}

@media all and (max-width: 430px) {
  .flex-cell {
    width: 100%;
  }

  .flex-cell.first {
    width: 100%;
  }
}