@font-face {
  font-family: "RegularFont";
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "MediumFont";
  src: url("fonts/Montserrat-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "ExtraBoldFont";
  src: url("fonts/Montserrat-Black.ttf") format("truetype");
}

[data-theme="dark"] {
  /* Dark background tiers */
  --color-base-100: #191d24;
  --color-base-200: #191d26;
  --color-base-300: #2a2a2b;
  --color-base-content: #f7f7f7; /* light text on dark backgrounds */

  /* Primary color (your requested #009fe3) */
  --color-primary: #009fe3;
  --color-primary-content: #2c2c2d; /* dark text on the blue background */

  /* Secondary color, same as your light theme, but with a dark content color */
  --color-secondary: #ff7691;
  --color-secondary-content: #2c2c2d;

  /* Accent color, same as light theme, but dark content color */
  --color-accent: #6adece;
  --color-accent-content: #2c2c2d;

  /* Neutral background/foreground for UI elements */
  --color-neutral: #2c2c2d;
  --color-neutral-content: #f7f7f7;

  /* Informational color scheme */
  --color-info: #58c6ff;
  --color-info-content: #2c2c2d;

  /* Success color scheme */
  --color-success: #52e68d;
  --color-success-content: #2c2c2d;

  /* Warning color scheme */
  --color-warning: #ffd94f;
  --color-warning-content: #2c2c2d;

  /* Error color scheme */
  --color-error: #f86461;
  --color-error-content: #2c2c2d;

  /* Other UI-related custom properties */
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

[data-theme="light"] {
  --color-base-100: #ffffff;
  --color-base-200: #f9f9f9;
  --color-base-300: #f2f2f2;
  --color-base-content: #3a3a3b;

  /* Overriding with your chosen primary color (#009fe3) */
  --color-primary: #009fe3;
  --color-primary-content: #faf8fe; /* light text on the blue background */

  --color-secondary: #ff7691;
  --color-secondary-content: #fff7f9;
  --color-accent: #6adece;
  --color-accent-content: #2c3f3e;
  --color-neutral: #242425;
  --color-neutral-content: #f7f7f7;
  --color-info: #58c6ff;
  --color-info-content: #264456;
  --color-success: #52e68d;
  --color-success-content: #2b4736;
  --color-warning: #ffd94f;
  --color-warning-content: #5f4e22;
  --color-error: #f86461;
  --color-error-content: #4a1f1a;

  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

body {
  --font-family: RegularFont;
  --font-bold: ExtraBoldFont;
  --font-medium: MediumFont;
  font-family: var(--font-family) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.ExtraBoldFont {
  font-family: var(--font-bold);
}

.fileViewerModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  //background-color: rgb(25, 24, 24); /* semi-transparent black */
  z-index: 9999; /* Ensure it's on top of most elements */
  display: flex;
  flex-direction: column;
  height: 100vh; /* or any specific height */
}

.fileViewerHeader {
  padding: 20px;
}

.fileViewerBody {
  background: var(--color-base-300);
  flex: 1; /* fills the remaining space */
  overflow: auto; /* optional: adds scroll if content overflows */
  //background-color: var(--color-base-100);
  overflow-y: auto; /* Allow vertical scrolling */
  display: flex !important;  
  justify-content: center !important; 
  align-items: center !important; 
}

.fileViewerBody video {
  height: 80vh; 
  width: auto;
  object-fit: contain; /* or 'cover' if you want to fill & crop */
}

.fileViewerBody img {
  height: 80vh; 
  width: auto;
  object-fit: contain; /* or 'cover' if you want to fill & crop */
}

.fill-remaining {
  flex: 1;
  overflow: hidden;
}

.fileViewerBody iframe {
  height: 100%;
  width: 100%; 
  border: none; /* optional: removes border */
}