.main-brand {
  max-width: 200px !important;
}

body {
  font-family: 'Figtree' !important;
  background-color: #F7F9FC;
}

.bg-body {
  background-color: #F7F9FC !important;
}

.bg-accent {
  background-color: #c3c5d2;
}

label.required:after {
  content: " *";
}

.img-thumbnail {
  max-width: 100px;
}

.mini-thumbnail {
  max-width: 50px;
}

.extra-mini-thumbnail {
  max-width: 25px;
}

button.no-decoration {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

a.no-decoration {
  text-decoration: none;
}

.tree {
  --spacing: 1.5rem;
  --radius: 10px;
}

.tree li {
  display: block;
  position: relative;
  padding-left: calc(var(--spacing));
}

ul.tree > li {
  padding-left: 0;
}

ul.tree {
  padding-left: 0;
}

.tree ul {
  padding-left: 0.35rem;
}


.tree ul li {
  border-left: 2px solid #afafaf;
}

.tree ul li:last-child {
  border-color: transparent;
}

.tree ul li::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #afafaf;
  border-width: 0 0 2px 2px;
}

.tree summary {
  display: block;
  cursor: pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}

.tree summary:focus {
  outline: none;
}

.tree summary:focus-visible {
  outline: 1px dotted #000;
}

.tree li::after,
.tree summary::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius));
  left: calc(var(--spacing) - var(--radius) - 1px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
}

.tree summary::before {
  z-index: 1;
}

.tree details[open] > summary::before {
  background-position: calc(-2 * var(--radius)) 0;
}

rect {
  pointer-events: all;
}

rect.part {
  visibility: hidden;
}

rect.part-active {
  visibility: visible !important;
  cursor: pointer !important;
}

tr.part-active > * {
  background-color: #c3c5d2 !important;
}

.tippy-content {
  white-space: pre-line;
}

.tippy {
  cursor: pointer;
}

.min-h-screen {
  min-height: 100vh;
}

.max-h-screen {
  max-height: 100vh;
}

.h-screen {
  height: 100vh;
}

summary {
  list-style: none
}

.min-w-0 {
  min-width: 0;
}

.min-h-0 {
  min-height: 0;
}

.flex-1 {
  flex: 1;
}

.expanded {
  width: 300px;
  max-width: 300px;
}

.max-w-screen-2xl {
  max-width: 1536px;
}

.bg-grey {
  background-color: #00000029;
}

.color-grey {
  color: #00000029;
}

.text-grey {
  color: #00000029;
}


.bg-selected {
  background-color: #E1CD1C;
}

.unit-body {
  transition: 0.15s background-color;
}

.unit-link {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
          line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3em;
}

.collapsed {
  width: 64px;
}

.collapsed .on-expanded {
  display: none !important;
}

.expanded .on-collapsed {
  display: none !important;
}

@keyframes fade-in {
  from { opacity: 0.3; }
    to { opacity: 1; }
}

.hover-tooltip:hover .hoverable {
  display: block;
  opacity: 1;
  animation: fade-in 0.10s;
}

.hoverable {
  display: none;
  z-index: 9999;
  position: fixed;
  margin-left: 1em;
  margin-top: 1em;
  width: 512px;
  height: 256px;
  opacity: 0;
}


/* Sidebar.js */
 
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  opacity: 0; 
  transition: opacity 0.25s ease; 
}

.backdrop.show {
  z-index: 999; 
  opacity: 1;
}

.drawer-container {
  position: relative;
  height: 100%;
}

.drawer {
  position: fixed;
  top: 0;
  right: -512px; /* Initially off-screen */
  width: 512px;
  height: 100%;
  background-color: #ffffff;
  transition: right 0.15s ease-in-out, opacity 0.15s ease; /* Transition effect for right and opacity */
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
  opacity: 0; /* Initially hidden */
  z-index:9999;
}

.drawer.open {
  right: 0; /* Slide in from the right when open */
  opacity: 1; /* Show with opacity when open */
}

.drawer-content {
  padding: 20px;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.no-scroll {
  position: fixed;
}