/* Global variables */
:root {
  --main-color: #732B8F;
  --secondary-color: #4F1D62;
  --border-color: #DEE2E6;
  --transition-time: 0.3s
}

/* Body styles */
html, body {
  background: #FAF9F8 !important;
}

/* Main container styles */
.main { 
  margin: 0 0 0 96px;
  padding: 16px 32px;
}

/* Icons styles */
.atom {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/atom.svg");
  background-size: cover;
}
.info {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/info.svg");
  background-size: cover;
}
.log-in {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/log-in.svg");
  background-size: cover;
}
.filter {
  display: block;
  margin: 4px 4px 4px 0;
  width: 16px;
  height: 16px;
  background: url("../icons/filter.svg");
  background-size: cover;
  filter: invert(100%) sepia(46%) saturate(1112%) hue-rotate(193deg) brightness(106%) contrast(107%);
}
.eye-fill {
  display: block;
  margin: 4px 4px 4px 0;
  width: 16px;
  height: 16px;
  background: url("../icons/eye-fill.svg");
  background-size: cover;
  filter: invert(100%) sepia(46%) saturate(1112%) hue-rotate(193deg) brightness(106%) contrast(107%);
}
.eye-slash-fill {
  display: block;
  margin: 4px 4px 4px 0;
  width: 16px;
  height: 16px;
  background: url("../icons/eye-slash-fill.svg");
  background-size: cover;
  filter: invert(100%) sepia(46%) saturate(1112%) hue-rotate(193deg) brightness(106%) contrast(107%);
}
.book-open {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/book-open.svg");
  background-size: cover;
}
.energy-levels {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/energy-levels.svg");
  background-size: cover;
}
.spectral-lines {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/spectral-lines.svg");
  background-size: cover;
}
.grotrian-diagram {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/grotrian-diagram.svg");
  background-size: cover;
}
.case-upper {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/case-upper.svg");
  background-size: cover;
}
.arrow-down-from-line {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/arrow-down-from-line.svg");
  background-size: cover;
}
.arrow-up-from-line {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/arrow-up-from-line.svg");
  background-size: cover;
}
.arrows-up-down-from-line {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/arrows-up-down-from-line.svg");
  background-size: cover;
}
.spectral-line-shape {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/spectral-line-shape.svg");
  background-size: cover;
}
.chevron-left {
  display: block;
  margin: 4px;
  width: 32px;
  height: 32px;
  background: url("../icons/chevron-left.svg");
  background-size: cover;
}

/* Site navigation styles */
.site-navigation {
  min-width: 96px;
  height: 100%;
  width: fit-content;
  flex-direction: column;
  background: var(--main-color);
  box-shadow: 8px 0px 16px -12px rgba(0, 0, 0, 1);
}
.site-navigation__wrapper {
  flex-direction: column;
}
.site-navigation__link {
  padding: 16px;
  color: #FFFFFF;
}
.site-navigation__link i {
  filter: invert(100%) sepia(46%) saturate(1112%) hue-rotate(193deg) brightness(106%) contrast(107%);
}
.site-navigation__link, .site-navigation__link i {
  transition: var(--transition-time);
}
.site-navigation__link:hover, .site-navigation__link:focus {
  outline: 0;
  background: var(--secondary-color);
  box-shadow: inset 0px 0px 16px -12px rgba(0, 0, 0, 1);
}
@media (max-width: 767px) {
  .site-navigation {
    width: 100%;
    height: auto;
    flex-direction: row;
  }
  .site-navigation__wrapper {
    flex-direction: row;
  }
  .site-navigation__link {
    padding: 4px 16px;
  }
  main {
    margin: 0 0 72px 0 !important;
  }
}

/* Dropdown menu fix */
.tabulator {
  overflow: visible !important;
}
.tabulator .tabulator-tableholder {
  position: unset !important;
}
.tabulator .tabulator-tableholder .tabulator-table {
  position:  unset !important;
}
.tabulator-row {
  position: unset !important;
}
.tabulator-row .tabulator-cell {
  position: unset !important;
}

/* Wrapping text in column headers */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  white-space: normal !important;
}

/* Custom borders */
.tabulator {
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  font-size: 0.9rem !important;
}
.tabulator .tabulator-header {
  border-top: none !important;
  border-bottom: 3px solid var(--main-color) !important;
}

/* Revert to default cursor on hover */
/* .tabulator-row:hover {
  cursor: default !important;
} */

/* Custom row color on select */
.tabulator-row.tabulator-selected {
  background: #E2C4EE !important;
}

/* Custom row padding */
.tabulator-row .tabulator-cell {
  padding: 6px 8px !important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 12px 8px !important;
}

/* Custom pagination styles */
.tabulator .tabulator-footer .tabulator-page {
  margin: 0 2px !important;
  transition: var(--transition-time)
}
.tabulator .tabulator-footer .tabulator-page:hover {
  background: var(--main-color) !important;
  color: #FFFFFF !important;
}
.tabulator .tabulator-footer .tabulator-page.active {
  background: var(--main-color) !important;
  border: none !important;
}
.tabulator .tabulator-footer .tabulator-page:disabled:hover {
  background: #FFFFFF !important;
  color: #6C757D !important;
}
.tabulator .tabulator-footer .tabulator-footer-contents {
  background: #E9ECEF;
}
/* Border for column grouping */
.tabulator-col-group:nth-of-type(2n) {  
  border-left: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
}
.tabulator-col-group:nth-of-type(2n+1) {
  border-right: 1px solid var(--border-color) !important;
}
/* Sticky table header */
.tabulator-header {
  position: sticky !important;
  z-index: 1;
  top: 0 !important;
}

/* Fix html long text display in tabulator cell */
.tabulator .tabulator-cell p {
  margin: 0;
  text-wrap: wrap;
}

/* Dropdown menu custom styles */
.dropdown-toggle {
  font-weight: bold !important;
  width: 100%;
  border: 1px solid var(--border-color) !important;
}
.dropdown-toggle:hover, .dropdown-toggle:focus {
  background: var(--main-color) !important;
  color: #F8F9fA !important;
}
.dropdown-toggle::after {
  margin-left: 6px !important;
}
.btn.show {
  background: var(--main-color) !important;
  color: #F8F9fA !important;
}
.dropdown-menu {
  min-width: 250px !important;
}
.dropdown-item {
  padding: 8px 24px !important;
}
.dropdown-item:focus, .dropdown-item:hover {
  outline: 0;
  background: var(--main-color) !important;
  color: #F8F9FA !important; 
}

/* Custom btn-primary colors */
.btn-primary {
  background: var(--main-color) !important;
}
.btn-primary:hover {
  background: var(--secondary-color) !important;
}

/* Custom breadcrumbs styles */
.breadcrumb-item a {
  color: var(--main-color) !important;
}
.breadcrumb-item a:hover {
  color: var(--secondary-color) !important;
}
@media(max-width:767px) {
  .breadcrumb {
    display: none !important;
  }
}

/* Element details component styles */
.info--element {
  width: 16px;
  height: 16px;
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(19%) sepia(81%) saturate(1641%) hue-rotate(263deg) brightness(97%) contrast(95%);
}
.info--element:hover {
  filter: brightness(0) saturate(100%) invert(16%) sepia(31%) saturate(3448%) hue-rotate(260deg) brightness(86%) contrast(99%);
}
.element-details {
  display: none;
  margin: 120px 0 0 16px;
  z-index: 1;
}
.element-details ul li::marker {
  color: var(--main-color);
}

/* Tilte element highlight */
.header-element {
  color: var(--main-color);
}