/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&family=STIX+Two+Text:wght@400;500;600&family=Courier+Prime:wght@400;700&display=swap');

/* Set up font variables */
:root {
  --font-serif: 'STIX Two Text', serif;
  --font-sans: 'Source Sans 3', sans-serif;
  --font-mono: 'Courier Prime', monospace;

  /* Shoelace variables if needed */
  --sl-font-serif: 'STIX Two Text', serif;
  --sl-font-sans: 'Source Sans 3', sans-serif;
  --sl-font-mono: 'Courier Prime', monospace;
}


/* Optional: style for monospace text if needed */
:root {
  --left-bg-color: rgba(87, 84, 236, 0.7);
  --right-bg-color: rgba(43, 43, 43, 0.8);
  --left-btn-hover-color: rgba(87, 84, 236, 1);
  --right-btn-hover-color: rgba(28, 122, 28, 1);
  --hover-width: 80%;
  --other-width: 20%;
  --speed: 1000ms;
  --tree-item-color: var(--sl-color-gray-600);
  --tree-item-selected-color: #0066cc;
  --tree-item-hover-color: #0088ff;
  --tree-item-setected-bg-color: #dbeafe; /* tw bg-blue-100 */
  --tree-item-setected-marker-color: #2563eb; /* tw bg-blue-600 */
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  height: 100vh;
  overflow: hidden;
  background-color: var(--sl-color-neutral-0);
  color: var(--sl-color-neutral-900);
  padding: 0rem;
}

video {
  width:500px;
  max-width: 95%;
  max-height: 95%;
  min-width: 95%;
}

code, pre {
  font-family: var(--font-mono);
}

.itemtext {
  padding-top:2px;
  padding-bottom:2px;
}

sl-split-panel {
  --divider-width: 4px;
  --divider-color: #d4d4d4;  /* tw border-neutral-300 */
  --divider-hit-area: 8px;  /* Area that responds to drag events */
  --min: 300px;
}

sl-tree-item::part(item--selected) {
  background-color: var(--tree-item-setected-bg-color);
  border-inline-start-color: var(--tree-item-setected-marker-color) !important;
}
sl-tree-item::part(label) {
  color: var(--tree-item-color);
  width: 100%;
}

.card-header {
  width: 100%;
  padding: 0 !important;
}

.card-header [slot='header'] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.card-header h3 {
  margin: 0;
}

.card-header sl-icon-button {
  font-size: var(--sl-font-size-medium);
}
.cardtree {
  overflow:auto;
  align-items: center;
  height:85vh;
}
.popup-cardtree {
  overflow:auto;
  align-items: center;
  height:70vh;
}
.videotree {
  display: flex;
  align-items: center;
  overflow:auto;
  height:85vh;
  width:100%;
  justify-content: center;
}
.popup-videotree {
  display: flex;
  align-items: center;
  overflow:auto;
  height:70vh;
  width:100%;
  justify-content: center;
}
sl-card::part(body) { 
  padding:0px;
  width:100%;
  justify-content: center;
}

#videotitleid{
  white-space: nowrap;      
  overflow: hidden;         
  text-overflow: ellipsis;  
  justify-content: center;
  width: 90%;
  color: #525252; /* tw text-neutral-600 */
  font-weight: 400;
}