@import url("//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
@import url('//fonts.googleapis.com/css?family=Open+Sans');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/* Have to use @import for the font, as you can only specify a single stylesheet */
body {

  font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #FFFFFF !important; /* Forces a white background */
  color: #000000 !important;           /* Forces black text */
  font-size: 1.5rem;
  line-height: 1.5em;
  font-weight: 400;
  padding-bottom: 80px;
}
.file, .folder {
    font-size: 1.1rem; 
}

p, span, a, ul, li, button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

strong {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5em;
  font-weight: 300;
}

strong {
  font-weight: 400;
}

.tile {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
  transition:all 0.2s ease;
  opacity: 0.8;
}

.tile .title {
  margin-top: 0px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tile .desc {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
    display:block;
}

.tile .datesize {
  font-size: 10px;
  opacity: 0.75;
}

.tile:hover {
  -webkit-transform: scale(1.125);
  -ms-transform: scale(1.125);
  transform: scale(1.125);
  z-index: 2;
}

.tile.red, .tile.orange, .tile.yellow, .tile.green, .tile.blue, .tile.indigo, .tile.purple {
  color: #fff;
}
.tile.red {
  background: #AC193D;
}
.tile.red:hover {
  background: #7f132d;
}
.tile.orange {
  background: #DC572E;
}
.tile.orange:hover {
  background: #b8431f;
}
.tile.yellow {
  background: #e3a21a;
}
.tile.yellow:hover {
  background: #b58115;
}
.tile.green {
  background: #00A600;
}
.tile.green:hover {
  background: #007300;
}
.tile.blue {
  background: #2672EC;
}
.tile.blue:hover {
  background: #125acd;
}
.tile.indigo {
  background: #172588;
} 
.tile.indigo:hover {
  background: #131d66;
}
.tile.purple {
  background: #5133AB;
}
.tile.purple:hover {
  background: #3e2784;
}

@media (max-width: 767px) {
	.navbar-header {
		width:100%;
	}
	.navbar-brand {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width:70%;
	}
}

@media (min-width: 768px) {
	.navbar-header {
		width:48%;
	}
	.navbar-brand {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width:100%;
	}
}
/* Custom CSS to make the audio player stick to the bottom/top of the screen */
#audio_player {
    position: fixed; /* Removes the player from the normal flow */
    bottom: 0px;     /* Sticks it to the bottom edge of the browser window */
    left: 0px;       /* Aligns it to the left edge */
    width: 100%;     /* Makes it span the full width */
    background-color: #333; /* Dark background to match theme header */
    padding: 10px;   /* Add some space around the player controls */
    box-shadow: 0px -2px 5px rgba(0,0,0,0.2); /* Optional: Adds a subtle shadow */
    z-index: 1000;   /* Ensures it sits above all other content */
}
/* Base size for small screens (phones) */
body {
    font-size: 1.6rem !important; /* 16px */
}

h1 {
    font-size: 1.5rem !important; /* Makes the main title readable on mobile */
}

/* Media query for large screens (desktops, large monitors) */
@media screen and (min-width: 1024px) {
    body {
        font-size: 1.9rem !important; /* 18px base size for desktop */
    }
    
    h1 {
        font-size: 2.5rem !important; /* Large, desktop-friendly title size */
    }
}
/* Hides the row containing the "Name", "Last Modified", etc. text in the raw Apache table structure */
table tbody tr:first-child {
    display: none !important;
}
/* Ensure the Name column (2nd cell) is visible */
table tbody tr td:nth-child(2) {
    display: table-cell !important;
    color: #000000 !important; /* Forces black text color */
}

/* Hide the Date, Size, and Description columns */
table tbody tr td:nth-child(n+3) {
    display: none !important;
}

/* Also ensure the header row is hidden (from previous steps) */
table tbody tr:first-child {
    display: none !important;
}

/* Ensure body background is white */
body {
    background-color: #FFFFFF !important;
}