/* CSS Document */

.my-container {
  @extend .contain;
}


.notification_cards{
	max-width: 300px !important;
	background-color:rgba(255,255,255, 0.8);
	margin-top:2px;
}

.notification_cards_old{
	max-width: 300px !important;
	background-color:rgba(233,236,239, 0.8);
	margin-top:2px;
}


#menu_dropdown_notification{
	max-height: min(400px); /* 400px or 80% of viewport height */
  	overflow-y: auto;
	overflow-x: hidden;
  	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	width: 305px; /* I bumped this slightly since 200px is very narrow for notifications */
    
    /* THE FIX: Anchor to the right edge and unset the left */
    left: auto !important;
    right: -175px !important;

}

#artical_by{
	top:40px;
	font-style:italic;
}

#h-one-row{
	margin-top:13px;
	margin-bottom:22px
}


#message_window_div{
	text-align:right;
}

#message_window_ta{
	border-radius:5px;
	width:100%;
	
}


.custom-dropdown-width {
  min-width: 180px !important; /* Adjust as needed */
}


.bold-red{
	color:red;
	font-weight:bold;
}

#dashboard_user_image{
	max-width:100%;
	max-height:40px;
	border-radius:50%;
}

#post_user_image{
	max-width:100%;
	max-height:25px;
	border-radius:50%;
}

#notification_user_image{
	max-height:45px;
	border-radius:50%;
}

#iteration_row_1{ 
	background-color:#f8f9fa;
	border-radius:5px;
	border-style:solid;
	border-width:thin;
	border-color:#ccc;
	padding:7px;
	margin-bottom:7px;
}

#iteration_row_2{ 
	/*background-color:#e9ecef;*/
	background-color:#F5FBFF;
	border-radius:5px;
	border-style:solid;
	border-width:thin;
	border-color:#ccc;
	padding:7px;
	margin-bottom:7px;
}

#iteration_row_1_small_bottom{ 
	background-color:#f8f9fa;
	border-radius:5px;
	border-style:solid;
	border-width:thin;
	border-color:#ccc;
	padding:7px;
	margin-bottom:2px;
}

#iteration_row_2_small_bottom{ 
	/*background-color:#e9ecef;*/
	background-color:#F5FBFF;
	border-radius:5px;
	border-style:solid;
	border-width:thin;
	border-color:#ccc;
	padding:7px;
	margin-bottom:2px;
}

.iteration_row_1{ 
	background-color:#f8f9fa;
	border-radius:5px;
	border-style:solid;
	border-width:thin;
	border-color:#e9ecef;
	padding:7px;
	margin-bottom:7px;
}



.iteration_row_2{ 
	background-color:#e9ecef;
	border-radius:5px;
	border-style:solid;
	border-width:thin;
	border-color:#f8f9fa;
	padding:7px;
	margin-bottom:7px;
}



.center-div {
    display: grid;
    place-items: center;
     /* Set the height of the div as needed */
}

.side_panel_red{
	background-color:#ff2800; 
	color:#EDF2F4; 
	padding:5px; 
	border-radius: 5px; 
	margin-bottom:10px; 
	margin-top:10px; 
}

.post_to_feed_div {
	transition: opacity 0.5s ease, visibility 0.5s ease;
	background-color:#e9ecef; 
	color:#212529; 
	padding:5px; 
	border-radius: 5px; 
	margin-bottom:10px; 
	margin-top:10px; 
	border-style:solid;
	border-width:thin;
	border-color:#cccccc;
	
}

.light_gray_side_div {
	
	background-color:#e9ecef; 
	color:#212529; 
	padding:5px; 
	border-radius: 5px; 
	margin-bottom:10px; 
	margin-top:10px; 
	border-style:solid;
	border-width:thin;
	border-color:#cccccc;
}

.side_panel_black {
	background-color:#212529; 
	color:#EDF2F4; 
	padding:7px; 
	border-radius: 5px; 
	margin-bottom:10px; 
	margin-top:10px;
	padding-left:9px; 
	padding-top:10px;
}

.side_panel_gray {
	background-color:#999; 
	color:#EDF2F4; 
	padding:7px; 
	border-radius: 5px; 
	margin-bottom:10px; 
	margin-top:10px;
	padding-left:9px; 
	padding-top:10px;
}

.side_panel_cool_gray {
	background-color:#8D99AE; 
	color:#EDF2F4; 
	padding:7px; 
	border-radius: 5px; 
	margin-bottom:10px; 
	margin-top:10px;
	padding-left:9px; 
	padding-top:10px;
}

.side_panel_white {
	transition: opacity 0.5s ease, visibility 0.5s ease;
	background-color:#ffffff; 
	padding:7px; 
	border-style: solid;
	border-width:thin;
	border-color:#cccccc; 
	border-radius: 5px; 
	margin-bottom:10px; 
	margin-top:10px;
	padding-left:9px; 
	padding-top:10px;
}
.hidden {
    opacity: 0;
    visibility: hidden;
}


/*
FEED POSTS CSS
*/
.media-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.media-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* Align items to start */
    flex-wrap: wrap; /* Allow wrapping onto new lines */
    gap: 10px; /* Space between media items */
}

.media-row.single-image-row {
    justify-content: center; /* Center content if single image */
}

/* Landscape image in a single image row takes full width */
.media-row.single-image-row .media-cell.landscape {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* Portrait image styling remains default */
.media-cell.image-only.portrait {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
}

.media-row.mp3-row {
    flex-wrap: nowrap; /* Single row, no wrapping */
    overflow-x: auto; /* Allow horizontal scroll if too many mp3s */
}

.media-cell {
    flex: 1 1 calc(50% - 10px); /* Default flex basis */
    max-width: calc(50% - 10px);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.media-row.mp3-row .media-cell {
    flex: 0 0 auto; /* Don't stretch, keep natural width */
    max-width: none;
    min-width: 180px; /* Minimum width for each mp3 cell */
    background: #e9f5ff;
    border: 1px solid #aad4ff;
    border-radius: 6px;
    padding: 10px 15px;
}

.media-cell img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}

.media-row.video-only video {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 6px;
}

.media-row video {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.pdf-only i, .mp3-only i {
    font-size: 20px;
    color: #d9534f;
}

.pdf-only span, .mp3-only span {
    font-size: 14px;
    color: #333;
    user-select: none;
}

.pdf-only {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 15px;
}

.mp3-only {
    /* Styles moved under .media-row.mp3-row .media-cell */
	width:100%;
}

/*
END FEED POSTS CSS
*/




/* This is the Styling for pagination links*/

.pagination {
    display: flex;
    list-style: none;
    padding-left: 0;
    justify-content: right;
    margin: 20px 0;
}

.pagination li {
    margin: 0 4px;
}

.pagination li a,
.pagination li span {
    display: block;
    padding: 8px 12px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: background-color 0.2s, color 0.2s;
}

.pagination li a:hover {
    /*background-color: #007bff;*/
	background-color: #ff2800;
    color: #fff;
   	/*border-color: #007bff;*/
	border-color: #ff2800;
}

.pagination li.active span {
    /*background-color: #007bff;*/
	background-color: #ff2800;
    color: #fff;
    /*border-color: #007bff;*/
	border-color: #ff2800;
    font-weight: bold;
}

/* PortFolio Post Css */
/* Container for the media */
/* Container for the media grid */
.post-media-grid {
    display: grid;
    gap: 8px; /* Precise 8px spacing between elements */
    margin-top: 10px;
    width: 100%;
}

/* Individual media slots */
.media-item {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
    min-height: 200px;
}

/* Make images fill the grid cell (Fix for the kid's face image) */
.image-wrapper, .image-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Fills the square/rectangle completely */
    cursor: pointer;
}

/* Video, PDF, and Audio boxes */
.video-container-custom, .pdf-container-grid, .audio-container-grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* PDF/Audio specific styling (No black BG) */
.pdf-container-grid, .audio-container-grid {
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.1); /* Subtle border instead of BG */
    background: rgba(0,0,0,0.02); /* Very faint tint to define the area */
}

/* Grid Layout Logic */
.post-media-grid[data-grid="1"] { grid-template-columns: 1fr; }
.post-media-grid[data-grid="2"] { grid-template-columns: 1fr 1fr; }
.post-media-grid[data-grid="3"] { grid-template-columns: 1fr 1fr; }
.post-media-grid[data-grid="3"] .media-item:first-child { grid-column: span 2; }
.post-media-grid[data-grid="4"] { grid-template-columns: 1fr 1fr; }
/* END PortFolio Post Css */




/* NOTIFICATION SLIDE IN SLIDE OUT */
	
.notification_window {
	position: fixed;
	top: 20px;
	right: -300px; /* Initially off-screen */
	width: 300px;
	padding: 25px;
	background-color: #fff;
	color: black;
	border-style:solid;
	border-width:4px;
	border-color: #ff2800;
	border-radius: 5px;
	font-size: 16px;
	transition: right 0.5s ease-in-out;
	z-index: 9999 !important;
}

.show {
	right: 0px; /* Slide into view */
	opacity: 1;
}

.hide {
	right: -300px; /* Slide out */
	opacity: 0;
}

/* NOTIFICATION SLIDE IN SLIDE OUT */


/* PRINT CSS STUFF */
@media print {
    body {
        background: none !important;
		color:black !important;
		background-color:#fff !important;
    }
    * {
        background: transparent !important;
    }
	h1, h3 {
        color: black !important;
    }
	
	hr {
		 display: none !important;
	}

	footer {
        display: none !important;
    }
	
	.navbar {
        display: none !important;
    }

    .navbar .logo {
        visibility: visible !important; /* Forces the logo to show */
        position: absolute; /* Pulls it out of the navbar */
        top: 0;
        left: 50%;
        transform: translateX(-50%);
		outline: none;
  		border: none;


		
    }


	#main_one{
		border: none;
		margin:25px !important;
		top:35px !important;
		width:100%;
	}
	

	
	#main_judge{
		border: none;
		margin:25px;
		top:20px !important;
		width:100%;
	}
	
	
	
		
	
	
}

@page {
    @top-center {
        content: "Printed from KidShowcase.com";
        font-size: 14pt;
        font-weight: bold;
		font-family:arial;
    }

    @bottom-center {
        content: "Page " counter(page);
        font-size: 12pt;
        color: gray;
		font-family:arial;
    }
}