/* frontend CSS */

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* ----------------------- scrollbar customization -------------------------- */
/* -------------------------------------------------------------------------- */

::-webkit-scrollbar
{
    width : 13px; /* Width of the scrollbar */
}

::-webkit-scrollbar:hover
{
	cursor : pointer;
}

/* Handle of the scrollbar */
::-webkit-scrollbar-thumb
{
    background-color: #69af9b; /* Color of the scrollbar handle */
    border-radius: 12px; /* Border radius of the scrollbar handle */

}

/* Track of the scrollbar */
::-webkit-scrollbar-track
{
	border-radius: 12px; /* Border radius of the scrollbar handle */
    background-color: #aadbba; /* Color of the scrollbar track */
}

/* Corner of the scrollbar */
::-webkit-scrollbar-corner {
    background-color: #c1ddca; /* Color of the scrollbar corner */
}

/* ---------------------------------------------------------------------------- */
/* ----------------------- placeholder customization -------------------------- */
/* ---------------------------------------------------------------------------- */

/* For modern browsers */
input::placeholder, textarea::placeholder {
	color: #85b89d; /* or any color you prefer */
	opacity: 1; /* Ensures the color is fully applied */
}

/* For older versions of Firefox */
input::-moz-placeholder, textarea::-moz-placeholder {
	color: #85b89d;
	opacity: 1;
}

/* For Internet Explorer 10+ */
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	color: #85b89d;
}

/* For Edge */
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
	color: #85b89d;
}


/* ------------------------------------------ */
/* --------------- paging ------------------- */
/* ------------------------------------------ */

.paging_flex
{
	position : relative;
	font-family : Verdana, Arial, sans-serif;
	font-size : 24px;
	text-align : center;
	color : #444;
	padding : 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	
	//bottom : 0;
	//left : 0;
	//border : 1px solid blue;
	//width : 96%;
}

.paging_inside
{
	position : relative;
	width : 500px;
	height : 100%;
}

.paging_arrow
{
	float : left;
	width : 70px;
	text-align : center;
	padding : 5px;
	margin-top : 4px;

}

/* canceling the underline on the arrows images (comes from a href) */

.paging_arrow a
{
	border-bottom : 1px solid transparent;
}

.paging_text
{
	float : left;
	border-radius : 10px;

	text-align : center;

	color : #489f7d;

	line-height : 55px;
	width : 300px;
	height : 70px;
	padding : 5px;
	margin : 5px;

	background-color : #ebf9ed;
	border : 1px solid #add7b7;
	box-shadow : 0px 0px 10px #add7b7;

}

/* ------------------------------------------------------------------------ */
/* ----------------------- general customization -------------------------- */
/* ------------------------------------------------------------------------ */

html
{
	
}

body 
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: transparent;
}

.page_container 
{
    display: flex;
    flex-direction: column;
    width: 100%;
	min-height: 100vh;
    background: transparent;
	background-color : white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	
	//background-image: url('../gfx/background_for_index_2.jpg');
	//background-attachment: fixed;
	//background-size: cover; /* This makes sure the image covers the entire background */
	//background-repeat: no-repeat; /* This prevents the background from repeating */
	//background-position: center; /* This centers the background image */
	
	background-color : #fff;
	
		
}

.header 
{
    background: transparent;
    color: #111;
    padding: 1rem;
    text-align: center;
}

.footer 
{
    background: transparent;
    color: #938acc;
    padding: 1rem;
    text-align: center;
}

/* ----------------------------------------------------------- */
/* ----------------------- menu.php -------------------------- */
/* ----------------------------------------------------------- */

.menu_nav 
{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    justify-content: center;
	
	max-width: 1400px; /* Maximum width for the menu */
    margin: 0 auto; /* Center the menu */
    width: 100%; /* Ensure the menu takes full width within its max-width */
	
}

/* Increase font size with higher resolutions */
@media (min-width: 800px) 
{
    .menu_nav_item, .menu_nav_item_selected, .menu_nav_item_back
	{
        font-size: 1rem;
    }

	img
	{
		max-height : 60%;
	}

}

@media (min-width: 1200px) 
{
    .menu_nav_item, .menu_nav_item_selected, .menu_nav_item_back
	{
        font-size: 1.2rem;
    }
	
	.track_name_container
	{
		font-size : 19px;
		color : black;
	}

	.reclabel_description-container
	{
		font-size : 19px;
	}
	
	.track_name_ext_container
	{
		font-size : 18px;
		color : blue;
	}
	
	.audiobooks_description_text
	{
		font-size : 19px;
	}
}

@media (min-width: 1600px) 
{
    .menu_nav_item, .menu_nav_item_selected, .menu_nav_item_back
	{
        font-size: 1.5rem;
    }
	
	/* for rec.label */
	
	.track_name_container
	{
		font-size : 22px;
		color : black;
	}
	
	.reclabel_description-container
	{
		font-size : 21px;
	}
	
	.track_name_ext_container
	{
		font-size : 20px;
		color : blue;
	}
	
	/* for publishing */
	
	.audiobooks_description_text
	{
		font-size : 20px;
	}


}


/* code for less than 600px width */
@media (max-width: 600px) 
{
    .menu_nav 
	{
        flex-direction: column;
    }

    .menu_nav_item, .menu_nav_item_back
	{
        flex: 1 0 100%;
        text-align: left;
    }
	
	img
	{
		width : 30%;
		height : auto;
	}


	.divImageHolder
	{
		//width : 144px;
	}
	
	.divDataHolder
	{
		width : calc(100% - 164px);	
	}

	.track_name_container
	{
		font-size : 15px;
		color : black;
	}
	
	.track_name_ext_container
	{
		font-size : 13px;
		color : blue;
	}

	.audiobooks_description_text{
		font-size : 16px;
		width : 100% !important;
	}


}

/* code for less than 800px width */
@media (max-width: 800px) 
{
    .menu_nav 
	{
        //
    }

    .menu_nav_item, .menu_nav_item_back
	{
        flex: 1 0 100%;
        text-align: left;
    }
	
	img
	{
		width : 80%;
		height : auto;
	}
	
	.divImageHolder
	{
		//width : 184px;
	}
	
	.divDataHolder
	{
		width : calc(100% - 334px);	
	}
	
	.track_name_container
	{
		font-size : 17px;
		color : black;
	}
	
	.track_name_ext_container
	{
		font-size : 14px;
		color : blue;
	}

	.reclabel_description-container
	{
		font-size : 17px;
	}
	
		
	.audiobooks_description_text
	{
		float : left;
		width : 100% !important;
		font-size : 16px;
		margin-left : 0px !important;
	}
	
}



	.reclabel_container, .artist_container {
		display: flex;
		flex-wrap: nowrap; /* Ensure the image and description stay side-by-side */
	}

	.reclabel_image-container, .artist_image-container, .release_image-container, .reclabel_image-container_release {
		width: 320px; /* Fixed width */
		max-width: 350px;
		//height: 350px; /* Fixed height */
		max-height: 350px;
		padding: 10px;
		margin-bottom : 10px;
	}

	.reclabel_image-container_release {
		border-radius : 10px;
	}

	.release_image-container
	{
		height : auto;
	}

	.reclabel_image-container img {
		width: 100%;
		height: 100%; /* Ensures the image fills the container */
		object-fit: cover; /* Ensures the image maintains its aspect ratio */
	}

	.reclabel_description-container {
		width: calc(100% - 350px); /* The rest of the space */
		padding: 10px;
		text-align : justify;
	}
	
	.artist_description-container {
		width: calc(100% - 350px); /* The rest of the space */
		padding: 10px;
		text-align : justify;
	}
	
	.ebook_description-container {
		width: calc(100% - 350px); /* The rest of the space */
		padding: 10px;
		text-align : justify;
	}

			

        


@media (max-width: 768px) 
{
	.reclabel_container {
		flex-wrap: wrap; /* Stack the image and description vertically */
	}

	.reclabel_image-container, .artist_image-container,
	.reclabel_description-container {
		width: 100%; /* Full width on smaller screens */
		//max-width: 100%; /* Ensure it doesn't exceed 100% */
	}

	.reclabel_image-container, .artist_image-container{
		height: auto; /* Remove the height restriction on smaller screens */
	}
	.reclabel_description-container, .artist_description-container {
		padding-top: 30px; /* Add spacing between image and text */
	}
	.ebook_description-container {
		padding: 10px;
		text-align : justify;
	}
	
	.audiobooks_description_text
	{
		float : left;
		width : 100%;
		font-size : 16px;
	}
}
.menu_nav_item 
{
	
	border-radius : 0px;

    padding : 0.3rem;
	margin-bottom : 2px;

	flex: 1 0 auto;

	border : 1px solid transparent;
	//border-left : 1px solid #31af7e;
	border-right : 1px solid #c6bde5;
	
	border-top : 1px solid #e6e1f7;
	border-bottom : 1px solid #c6bde5;
	
	box-shadow : 1px 1px 10px #fff;
	
	color : #111;
	text-align : center;

	text-align : center;
	
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ecf2f0+0,e7efee+50,e6eeec+51,e4ece9+100 */
background: linear-gradient(to bottom,  #ecf2f0 0%,#e7efee 50%,#e6eeec 51%,#e4ece9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */



}

.menu_nav_item:hover 
{

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
	background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.menu_nav_item_selected 
{
    
	border-radius : 0px;
	
	padding: 0.3rem;
	margin-bottom : 2px;
	
	flex: 1 0 auto;
	
	border : 1px solid transparent;
	border-right : 1px solid #c6bde5;
	
	border-top : 1px solid #e6e1f7;
	border-bottom : 1px solid #c6bde5;
	text-decoration : none;
	box-shadow : 1px 1px 10px #fff;
	
	color : #fff;
	text-align : center;
	
	background-color : #7eb3c1;
}

.menu_nav_item_back
{
    
	border-radius : 16px;
	margin: 0.3rem;
	flex: 1 0 auto;
	border : 1px solid transparent;
	color : #111;
	text-align : center;

}

.menu_nav_item_selected a, .menu_nav_item_back a
{
    color: #fff;
    text-decoration: 1px 1px 0 white;
    padding: 0.5rem 1rem;
    display: block;
}

.menu_nav_item_back a
{
	color : #111;
}

.menu_nav_item a
{
    color: #a295ce;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block;
}



.menu_nav_item a:hover 
{
    color: #111;
    border-radius: 5px;
}

/* ------------------------------------====----------------------- */
/* ----------------------- main_display -------------------------- */
/* --------------------------------------------------------------- */

.main_display 
{
    
	border-radius : 4px;
	
	padding: 1rem;
    flex: 1;
	
	color : #333;
	width : 100%;
	
	max-width: 1400px; /* Maximum width for the menu */
    margin: 0 auto; /* Center the menu */
	margin-top : 10px;
    width: 100%; /* Ensure the menu takes full width within its max-width */
	
	/* transparency with color */
	background-color: transparent;
	
}

.divDataHolder
{
	float : left;
	border-radius : 10px;
	padding : 14px;
	margin-left : 0px;
	margin-bottom : 10px;
	width : calc(100% - 4px);

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+65,e1e1e1+96,f6f6f6+100 */
	background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 65%,#e1e1e1 96%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-bottom : 1px solid #aaa;
	border-left : 1px solid #eaeaea;
	border-top : 1px solid #eaeaea;
	border-right : 1px solid #ccc;
	
	box-shadow : 0px 0px 30px #ddd;
	
}

.divTitleHolder
{
	float : left;
	border-radius : 10px;
	margin : 10px;
	padding : 16px;
	border : 1px dashed #ddd;
	width : calc(100% - 25px);
	background-color : #f4f9fb;
}

.divDataHolderArtist
{
	float : left;
	border-radius : 6px;
	padding : 14px;
	margin-left : 0px;
	width : calc(100% - 4px);
	border : 1px solid transparent;
	box-shadow : 1px 1px 10px #999;
	background-color : #f0f0f0;
}



.main_display img 
{
	max-width: 100%; /* Ensures images are responsive */
	height: auto;
		
}



/* --------0-------------------------------------- */
/* -------------- audiobooks.php ----------------- */
/* ----------------------------------------------- */



.audiobooks_description_text
{
	float : left;
	width : calc(100% - 378px);
	margin-left : 25px;
	color : #333;
	text-align : justify;
}

.audiobooks_metadata_entry
{
	float : left;
	border-radius : 10px;
	
	font-size : 18px;
	color : black;
	
	width : 310px;

	padding : 7px;
	margin : 5px;
	
	//border : 1px dashed #aaa;
	//background-color : #c2e0ec;
}

.audiobooks_metadata_entry_2
{
	float : left;
	border-radius : 4px;
	
	font-size : 18px;
	color : black;
	
	width : 310px;

	padding : 7px;
	margin : 5px;
}

.audiobooks_genres_text
{
	font-size : 14px;
	color : #72b19a;
	text-align : left;
}


.audiobooks_genres_text_individual
{
	float : left;
	display : inline-block;
	border-radius : 10px;
	
	font-size : 14px;
	color : #222;
	background-color : #f0f0f0;
	
	padding : 10px;
	margin-right : 4px;
	margin : 10px;
	
	border : 1px solid #bbb;
}

.audiobooks_genres_text_individual:hover
{

	cursor : pointer;
	color : #777;
	background-color : #f0f0f0;
	border : 1px solid lightblue;

}

.audiobooks_titleName_text
{
	float : left;
	border-radius : 6px;
	
	font-size : 32px;
	background-color : teal;
	color : white;
	font-weight : bold;
	padding : 9px;
	
}

.audiobook_desc_and_metadata
{
	float : left;
	
	//border : 1px solid blue;
	margin : 6px;
	margin-top : 0px;
}


.audiobook_picture_container
{
	float:  left;
	width : 350px;
   
}

.audiobook_picture_container:hover img
{
	opacity: 1;	
	transition: opacity 0.3s ease; /* Add a smooth transition effect */
}

.audiobook_picture_container img
{
	opacity: 0.75;	
}

.audiobooks_image
{
	border-radius : 20px;
	margin : 10px;
	
	border : 1px solid black;
	box-shadow : 4px 4px 4px #538997;
}

.audiobook_picture_and_desc
{
	float : left;
	width : 100%;
	//border : 1px solid red;
}



.audiobook_vendorName_image:hover 
{
	opacity: 1;
	border : 1px solid #333;
	box-shadow : 1px 1px 10px #ccc;
}

.audiobook_vendorName_image 
{
	border-radius : 5px;
	border : 1px solid #999;
	opacity: 0.5;
    transition: opacity 0.3s ease; /* Add a smooth transition effect */
}

.audiobooks_authorName_text
{
	float : left;
	margin-left : 10px;
	line-height : 40px;
	font-size : 22px;
	color : #444;
}

.audiobooks_subTitleName_text
{
	float : left;
	font-size : 18px;
	color : #3a9797;
	margin-top : 10px;
}

.audiobooks_serieName_text
{
	font-size : 22px;
	color : teal;
}

.audiobooks_serieName_under
{
	color : #3a9797;
	border-bottom : 1px dashed teal;
}



.audiobooks_vendors_holder
{
	float : left;
	width : 82px;
	margin : 3px;
}

.audiobooks_vendorName_text
{
	float : left;
	
	font-size : 13px;
	text-align : center;
	color : lightblue;
	
	width : 100%;
	height : 31px;
	line-height : 13px;
}

.audiobooks_vendorName_text_href
{
	border-radius : 4px;
	padding : 4px;
	color : black;
	background-color : transparent;
	text-decoration : none;
}

.audiobooks_vendorName_hrefForImage
{
	color : lightblue;
	text-decoration : none;
}

.audiobooks_vendorName_image
{
	height : auto;
	border-radius : 4px;
	opacity : 0.9;
}

.audiobooks_vendorName_image_default
{
	border : 1px solid transparent;
	height : auto;
	border-radius : 4px;
}



/* ---------------------------------------- */
/* -------------- releases ----------------- */
/* --------------------------------------- */


.releases_titleName_text
{
	float : left;
	border-radius : 6px;
	
	font-size : 32px;
	background-color : teal;
	color : #cdee49;
	font-weight : bold;
	padding : 9px;
	
}

.release_track_container
{
	border-radius : 5px;
	border : 1px solid transparent;
	padding : 7px;
	margin : 2px;
	background-color : transparent;
}

.release_track_container:hover
{
	background-color : #cecce7;
	border : 1px solid #888;
	box-shadow : 1px 1px 8px #aaa;
}

.releases_separator_main
{
	clear : both;
	margin-bottom : 10px;
}


.player_container
{
	float : right;
	width : 450px;
}

.player_container iframe {

    width: 100%; /* Make iframe adapt to the div's width */
    height: 200px; /* Adjust as needed */
    border: none;
}

.release_genres_text_individual
{
	float : left;
	display : inline-block;
	border-radius : 10px;
	
	font-size : 14px;
	//color : #35637e;
	color : white;
	
	padding : 10px;
	margin-right : 4px;
	margin : 10px;
	
	//background-color : #ccf17c;
	background-color : #7f76f4;
	
	//border : 1px solid #8c9280;
	border : 1px solid #fff;
	
	box-shadow : 1px 1px 6px #aaa;
}

.release_vendorName_image
{
	height : auto;
	border-radius : 4px;
	border : 1px solid transparent;
}



.reclabel_image-container:hover img
{
    opacity: 1;
}

.reclabel_image-container_release:hover img
{
	opacity : 1;
}

/* Optional: Set initial opacity for the image */
.reclabel_image-container img
{
    opacity: 0.6;
    transition: opacity 0.3s ease; /* Add a smooth transition effect */
}

.reclabel_image-container_release img
{
	opacity: 1;
}

.release_vendorName_image:hover 
{
	opacity: 1;
	border : 1px solid #333;
	box-shadow : 1px 1px 10px #ccc;
}

.release_vendorName_image 
{
	opacity: 0.4;
    transition: opacity 0.3s ease; /* Add a smooth transition effect */
}