/* @import url('https://fonts.googleapis.com/css?family=Roboto:400'); */
/* Reset styles */
*, *::after, *::before {
    box-sizing: border-box;
}
/* General styles */
html {font-size: 100%;} /*16px*/
body {
	font-family: 'Roboto', sans-serif;
  	font-weight: 400;
  	line-height: 1.75;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAABJJREFUCB1jOHDgwH8GbIDKEgBS1xA8+1ZEZgAAAABJRU5ErkJggg==) repeat;
    background-color: #f2f2f3;
    color: #303030;
    /*margin: 0;
    padding: 0;*/
}
body.fullscreen-open {
    overflow: hidden;
}

#container{
	position:relative;
	margin:0 auto;
	padding:26px 12px 12px 12px;
	z-index:10;
	max-width:640px;
	/* max-width:1920px; */
} 
p {margin-bottom: 1rem;}
h1, h2, h3, h4, h5 {
  	margin: 3rem 0 1.38rem;
  	font-family: 'Roboto', sans-serif;
  	font-weight: 400;
  	line-height: 1.3;
}
h1 {
  	margin-top: 0;
  	font-size: 3.052rem;
}
h2 {font-size: 2.441rem;}
h3 {font-size: 1.953rem;}
h4 {font-size: 1.563rem;}
h5 {font-size: 1.25rem;}
small, .text_small {font-size: 0.8rem;}

/* Base Link Styles */
a,
a:visited {
    text-decoration: none;
    color: #2b2b2b; /* Text Color */
    position: relative; /* Add relative positioning for pseudo-element */
    transition: color 0.2s ease;
}

/* Additional Hover/Active Styles */
a:hover {
    color: #c0c0c0; /* Breadcrumb Border Color */
}

/* Fullscreen trigger link */
a.fullscreen-trigger {
    /* color: #800080; */ /* Purple color */
    color: #2b2b2b; /* Text Color */
}

a.fullscreen-trigger:hover {
    /* color: #ff5f60; */ /* Brighter shade of purple for hover */
    color: #c0c0c0; /* Breadcrumb Border Color */
}

p a, span a {
    /* Your styles for <a> elements within <p> elements go here */
    /* Your styles for <a> elements within <span> elements go here */
    color: #c0c0c0;
}

p a:hover, span a:hover {color: #303030;}

p a.about{
    text-decoration: none; /* For example, underline the links */
    /* text-decoration-color: #c0c0c0 !important; */ /* not supported on older browsers */
    color: #c0c0c0 !important; 
}

p a.about:hover{color:#303030 !important;}

a.changelog, a.alt{color: #c0c0c0;}
a.changelog:hover, a.alt:hover{color: #303030;}

p.a[target], a#Launch_Slidr_module {
    color: #c0c0c0;
}

p.a[target]:hover, a#Launch_Slidr_module:hover {
    color: #303030;
}

.module_container{
	background-color: #fdfbf9;
  	box-shadow: 0px 1px 8px rgba(137, 137, 139, 0.2); /* Set the box shadow */
	border-radius: 4px;
	border: none !important;
    margin-bottom: 24px;
}

.module_container-sandbox{
	background-color: none;
	border: none !important;
    margin-bottom: 24px;
}

/* general indxr styles */
#Indxr_br-top{
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
    border-style: solid;
    border-width: 1px;
	border-color: rgba(92, 92, 92, 0.15); /* 240 */
	/* border: 1px solid rgba(198, 54, 60, 0.65); */ /* 240 */
	background-color: #f5f5f5;
	border-bottom: none;
}

#Indxr_main {
}
#Indxr_header {
	padding: 4px 0 4px 12px;
}

/* Breadcrumb styling */
.breadcrumb-container {
    /* background-color: #fefefe; */
	padding: 4px 10px 4px 10px;
	/* border-left: 4px solid #c0c0c0; */
    border-left: 4px solid #f5f5f5;
    overflow: hidden;
    margin-left: 15px;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.breadcrumb a {
    display: inline-block;
    white-space: nowrap;
    margin-right: 5px;
}

.breadcrumb .separator {
    margin: 0;
    color: #888;
}

#Indxr_Directory{
	overflow: hidden;
    /* height: 0;*/ /* Initially contracted to be used with indxr-econ.js */
    /* transition: height 0.5s ease;*/ /* Add smooth transition */
    background-color: #fefefe;
}

.Indxr-component_bg {
    background-color: #fefefe;
    padding: 10px 0 0 2px;
    /* display: inline-block; */
    width: 100%;
}

/* table */
/* Basic table styling */
table.indxr {
    border-collapse: collapse;
    width: 100%;
    background-color: transparent;
}

table.indxr, table.indxr th, table.indxr td {
    border: none; /* Add borders for cells and table */
}

table.indxr th, table.indxr td {
    padding: 8px; /* Add padding to cells for spacing */
    text-align: left; /* Align text to the left */
}

/* Target the "Icon" column header specifically */
table.indxr th.file_tableheader:first-child,
table.indxr td.icon-cell {
    width: 5% !important; /* Adjust the width as needed */
    max-width: 5% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Target the "Name" column header */
table.indxr th.file_tableheader:nth-child(2),
table.indxr td.name-cell {
    width: 45% !important; /* Adjust the width as needed */
    max-width: 45% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Target the "Last Modified" column header */
table.indxr th.file_tableheader:nth-child(3),
table.indxr td.modified-cell {
    width: 30% !important; /* Adjust the width as needed */
    max-width: 30% !important;
    text-align:center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c0c0c0;
}

/* Target the "Size" column header */
table.indxr th.file_tableheader:nth-child(4),
table.indxr td.size-cell {
    width: 20% !important; /* Adjust the width as needed */
    max-width: 20% !important;
    text-align:center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c0c0c0;
}

/* Styling for odd and even rows */
table.indxr tr:nth-child(even) {
    /* background-color: #fefefe; */
}

table.indxr tr:nth-child(odd) {
    /* background-color: #fefefe; */
}

table.indxr tbody{
	/* border: 1px solid #fefefe; */
    border: none;
	/* background-color: #fefefe; */ /* #f5f5f5 #fefefe */
}
table.indxr tbody td{
	background-color: #fefefe; /* #f5f5f5 #fefefe */
	/* padding: 8px 10px 10px; */
	padding: 0px 10px 4px; /* 0 10 10 */
}

.file_tableheader{
	font-weight: bold;
}

.dir_description, .file_description {
	font-size: 0.9em;
	/* color:#2b2b2b; */
    color: #c0c0c0;
}

#Indxr_footer, #Slidr_footer {
	position: relative;
	background: #c0c0c0;
	color: inherit;
	/* color: #303030; */
	font-size: small;
	padding: 4px 0 4px 12px;
	/* margin-bottom:24px; */
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
    border-style: solid;
    border-width: 1px;
	border-color: rgba(92, 92, 92, 0.15);/ /* 192 */
	/* border: 1px solid rgba(198, 54, 60, 0.65); /* 192 */ 
	border-top: none;
    border-top-style: none;
	padding-right:10px;
  	box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.15); /* Set the box shadow */
}

span.window_footer_design{display:block;}

/* truncated filenames: not sure if its being used */
.truncated-name {
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide any overflowed text */
    text-overflow: ellipsis; /* Show ellipsis (...) for overflowed text */
    max-width: 100%; /* Allow text to wrap when the container is narrow */
}

#indxr-summary{
	background-color: #fdfbf9;
	/* width: 100%; */
	/* height: 100%; */
	padding: 4px 12px;
}
span.indxr-summary-text  {
	font-family: Consolas, monospace;
    text-align: left;
    font-size: 0.8em; /* Adjust the font size to your preference */
}

/* Fullscreen overlay */
#fullscreen-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
    backdrop-filter: blur(5px); /* Adjust the blur radius as needed */
    -webkit-backdrop-filter: blur(5px);
    /* animation: slidr-transit 1s forwards; */
    /* animation-iteration-count: 1; */
    z-index: 9999;
    cursor: zoom-out; /* Change cursor to zoom-out for the entire overlay */
}
/*
@keyframes slidr-transit {
    from {background-color: rgba(255, 255, 255, 1.0); }
    to {background-color: rgba(0, 0, 0, 0.85); }
}
*/
#fullscreen-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#fullscreen-overlay-image {
    /* max-width: 95%; */
    max-width: 100%;
    /* max-height: 95vh;*/ /* Set max height to 95% of viewport height */
    max-height: 100vh;
    object-fit: contain; /* Maintain aspect ratio */
    margin: auto; /* Center both horizontally and vertically */
    display: block; /* Ensure the element is treated as a block-level element */
    /* box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3); */ /* Adds a shadow effect */
}

#fullscreen-overlay-audio {
    text-align: center; /* Center the audio player */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center vertically within the flex container */
    cursor: default !important;
}

#fullscreen-overlay-video {
    max-width: 95%;
    max-height: 95%;
    width: auto;
    height: auto;
    object-fit: contain; /* Maintain aspect ratio */
    margin: 0 auto; /* Center horizontally */
    text-align: center; /* Center the video player */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally within the flex container */
    cursor: default !important;
}

video {
    /* box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3); */ /* Adds a shadow effect */
}

audio {
    border-radius: 8px !important;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3); /* Adds a shadow effect */
}

#fullscreen-overlay-text {
	color: #fefefe;
	font-family: Consolas, monospace;
    font-size: 16px; /* Minimum font size */
    text-shadow: 1px 1px 2px rgba(128, 128, 128, 0.8); /* Text drop shadow */
    padding: 20px; /* Padding to create some space around the text content */
    overflow-y: auto; /* Enable vertical scrolling if the text content exceeds the container height */
    max-height: 90vh; /* Maximum height with viewport height units */
    white-space: pre-wrap;
    cursor: auto !important;
}

/* Media query for screens smaller than 768px (adjust as needed) */
@media (max-width: 768px) {
    #fullscreen-overlay-video {
        max-width: 95%; /* Adjust the max width for smaller screens */
    }
}

/* Style the download button */
#fullscreen-overlay-download {
    position: fixed;
    top: 20px;
    right: 48.75px;
    cursor: pointer;
    z-index: 10000;
    color: #2b2b2b;
    background-color: rgba(245, 245, 245, 0.65);
    box-shadow: 0px 1px 4px rgba(48, 48, 48, 0.2);
    padding: 0 8.25px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 16px;
}

#fullscreen-overlay-download:hover {
    color: #fefefe;
    transition: color 0.2s ease;
}

#fullscreen-overlay-download:active {
	display: block;
	filter: opacity(50%);
    transition: color 0.2s ease;
}

/* Style the close button */
#fullscreen-overlay-close {
    position: fixed;
    top: 20px;
    right: 20px; /* Adjust the right position to create a gap between the buttons */
    cursor: pointer;
    z-index: 10000;
    color: #2b2b2b;
    background-color: rgba(245, 245, 245, 0.65);
    box-shadow: 0px 1px 4px rgba(48, 48, 48, 0.2);
    padding: 0px 9px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 16px;
}

#fullscreen-overlay-close:hover {
    color: #fefefe;
    transition: color 0.2s ease;
}

#fullscreen-overlay-close:active {
	display: block;
	filter: opacity(50%);
    transition: color 0.2s ease;
}

/* Styles for the footer */
footer {
    text-align: right; /* Center align text */
	font-size: small;
}
span.footer{text-shadow: 0px 1px #fff;}

/* Img Slidr */
/* Reset some default styles */
body, html {
    margin: 0;
    padding: 0;
}

/* msgs, error, success, etc */
p.error-message, p.success-message{padding:12px 12px 6px 12px;}
i.fi-check{color:green;}
i.fi-alert{color: red;}

/* miscelanous classes and what not */
.centered-image {
    display: block; /* Ensure it's a block-level element */
    margin: 0 auto; /* Center horizontally */
    padding: 0;
    text-align: center; /* Center any inline content within the image container */
}

::selection {
    background-color: yellow;
    color: #303030;
    text-shadow: none !important;
    /* text-shadow: 0px 1px 1px rgba(128, 128, 128, 0.4);
}

/* testing grounds */