body { 
			font-family: 'Segoe UI', sans-serif; padding: 40px; background: #eee; transition: background 0.3s; }
			
        /* Table Thumbnail */
        .video-thumb {
            width: 140px;
            cursor: pointer;
            border-radius: 8px;
			display: block;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
		
        .video-thumb:hover { 
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
        }
		
		 /* Table Thumbnail */
        .video-thumb-not-clippable {
            width: 140px;
			height: 80px;
            cursor: none;
            border-radius: 8px;
			display: block;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
		
        .video-thumb-not-clippable:hover { 
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
        }

        /* The Semi-Opaque Overlay */
        #videoOverlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            
            /* Semi-opaque black background */
            background: rgba(0, 0, 0, 0.75); 
            
            /* Blur the table behind for a premium look */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);

            z-index: 9999;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            animation: fadeIn 0.3s ease;
        }

        /* Large Responsive Container */
        .video-content {
            position: relative;
            width: 90vw; 
            max-width: 1100px; /* Cinematic size on large screens */
            max-height: 80vh;
            aspect-ratio: 16 / 9;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
            border: 1px solid rgba(255,255,255,0.1);
            background: #000; /* Prevent flickering while loading */
        }
        
        #playerContainer, iframe { width: 100%; height: 100%; border: none; }

        .caption {
            color: #fff;
            padding: 20px 10px;
            font-size: clamp(1rem, 2.5vw, 1.4rem);
            text-align: center;
            font-weight: 300;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .close-btn {
            position: absolute;
            top: -50px;
            right: 0;
            color: #fff;
            font-size: 45px;
            line-height: 1;
            cursor: pointer;
            background: none;
            border: none;
            opacity: 0.8;
            transition: opacity 0.2s;
        }
        .close-btn:hover { opacity: 1; }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
		
		.duration-badge {
			position: absolute;
			bottom: 8px;
			right: 8px;
			background-color: rgba(0, 0, 0, 0.8);
			color: #fff;
			padding: 2px 6px;
			border-radius: 4px;
			font-size: 11px;
			font-weight: bold;
			font-family: 'Roboto', sans-serif;
			z-index: 2; /* Ensure it stays above the image but below the Play icon */
			pointer-events: none; /* Clicks pass through to the wrapper */
		}

		/* Position the badge relative to the thumbnail */
		.thumb-wrapper {
			position: relative;
			display: inline-block;
			cursor: pointer;
			overflow: hidden; /* Keeps the badge inside rounded corners */
			border-radius: 8px;
		}

		/* The Play Icon - on top of the thumbnails - Overlay */
		.thumb-wrapper::after {
			content: '▶'; /* Unicode Play Symbol */
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 3;
			
			/* Icon Styling */
			background: rgba(0, 0, 0, 0.6);
			color: white;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			padding-left: 3px; /* Optical centering for the triangle */
			
			transition: all 0.3s ease;
			opacity: 0.8;
			border: 2px solid white;
		}
		
		/* Hover effects */
		.thumb-wrapper:hover::after {
			background: rgba(255, 0, 0, 0.9); /* YouTube Red on hover */
			transform: translate(-50%, -50%) scale(1.1);
			opacity: 1;
		}
		
		/* Hover effects - CSS for second class (if this method is used) - to have a different hover color
		.thumb-wrapper.link-thumb:hover::after {
			background: rgba(39, 157, 245, 0.8);
		}*/
		
		.thumb-wrapper[data-source="website"]::after {
			content: '🌐';
			padding-left: 0;
		}
		.thumb-wrapper[data-source="website"]:hover::after {
			background: rgba(39, 157, 245, 0.8);
		}
		
		.video-grid {
			display: grid;
			/* grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));*/ 
			/* Lets the browser decide how many thumbnails fit per row */
			/* instead of "grid-template-columns: 1fr;" and "Tablet", "Desktop" below */
			/* For the columns to stay exactly 180px & leave empty space at the end, use: auto-fill*/
			/* For the items to always stay 180px wide, use: */
			grid-template-columns: repeat(auto-fill, 180px);
			/*justify-content: center;  This keeps them centered if they don't fill the row */
			gap: 15px;
			width: 100%;
			margin-top: 10px; /* Adds breathing room below the label */
		}
		
		/* Tablet */
		/*@media (min-width: 600px) {*/
			/*.video-grid {*/
				/*grid-template-columns: repeat(2, 1fr);*/
			/*}*/
		/*}*/

		/* Desktop */
		/*@media (min-width: 992px) {*/
			/*.video-grid {*/
				/*grid-template-columns: repeat(5, 1fr);*/
			/*}*/
		/*}*/

		/* Layout for the cell containing multiple videos */
		.video-cell {
			display: grid;
			/*flex-wrap: wrap;  Allows wrapping on small screens */
			gap: 15px;       /* Spacing between video items */
			min-width: 160px; 
		}
		
		.video-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-end;
		}

		.video-label {
			font-size: 11px;
			font-weight: bold;
			/*text-transform: uppercase;*/
			display: block;
            margin-left: auto;
            margin-right: auto;;
			color: #666;
			margin-bottom: 4px;
			letter-spacing: 0.5px;
			text-align: center;
		}
		
		table.dataTable tbody td.video-cell {
			width: 100%;
		}
		
		.source-icon {
			position: absolute;
			top: 6px;
			left: 6px;
			width: 22px;
			height: 22px;
			z-index: 4;
			border-radius: 4px;
			background-size: 14px; /* Adjust logo size within the box */
			background-repeat: no-repeat;
			background-position: center;
			background-color: rgba(255, 255, 255, 0.9); /* White backing makes logos pop */
			box-shadow: 0 2px 5px rgba(0,0,0,0.4);
		}

		/* YouTube: Red Icon */
		.youtube-icon { 
			background-image: url('https://www.google.com/s2/favicons?sz=64&domain=youtube.com'); 
		}

		/* Vimeo: Blue Icon */
		.vimeo-icon { 
			background-image: url('https://www.google.com/s2/favicons?sz=64&domain=vimeo.com'); 
		}

		/* Google Drive: Green/Yellow/Blue Icon */
		.gdrive-icon { 
			background-image: url('https://www.google.com/s2/favicons?sz=64&domain=drive.google.com'); 
		}

		/* Local: Using a generic system icon (Base64 encoded video icon) */
		.local-icon { 
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23555"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>'); 
		}
		
		
		/* 1. Container for the child details */
		table.dataTable > tbody > tr.child ul.dtr-details {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 0;
			padding: 0;
			list-style: none;
			background-color: #ffffff;
			border: 1px solid #ddd; /* Adds a subtle frame around the details */
		}

		/* Individual Row Item */
		table.dataTable > tbody > tr.child ul.dtr-details li {
			display: flex;
			align-items: flex-start; /* Aligns text to top if content is tall */
			padding: 12px 20px;       /* Control vertical/horizontal padding */
			border-bottom: 1px solid #eee;
			transition: background-color 0.2s;
		}

		/* The Label (e.g., "Full name:") */
		table.dataTable > tbody > tr.child span.dtr-title {
			font-weight: 600;
			color: #555;
			
			/* THE KEY FOR ALIGNMENT */
			min-width: 180px;         /* Control spacing: increase this to push values further right */
			width: 200px;
			display: inline-block;
			
			text-align: left;         /* Alignment of the label text */
			position: relative;
		}

		/* The Data (e.g., "XYZ") */
		/* Ensure the DataTables wrapper doesn't clip the grid */
		table.dataTable > tbody > tr.child span.dtr-data {
			flex: 1;                  /* Takes up the rest of the space */
			text-align: left;         /* Alignment of the values */
			padding-left: 10px;       /* Fine-tune the gap between label and value */
			color: #333;
			word-break: break-word;   /* Prevents long text from breaking layout */
			display: block !important;
			width: 100% !important;
		}

		/* Hover effect on each row */
		table.dataTable > tbody > tr.child ul.dtr-details li:hover {
			background-color: #fcfcfc;
		}

		/* Adding a Separator Suffix */
		table.dataTable > tbody > tr.child span.dtr-title::after {
			content: ":";
			position: absolute;
			right: 20px; /* Adjust this to position the colon relative to the label width */
		}
		
		table.dataTable.display tbody tr:nth-child(even):hover td{  /*add style on table row hover */
					background-color: #c7d2d5 !important;
				}

		table.dataTable.display tbody tr:nth-child(odd):hover td {  /*add style on table row hover*/
					background-color: #c7d2d5 !important;
				}

		/* Zebra Striping and Spacing CSS */
		/* 2. Apply alternating background colors (Zebra Striping) */
		table.dataTable > tbody > tr.child ul.dtr-details li:nth-child(odd) {
			background-color: #ffffff;
		}
		table.dataTable > tbody > tr.child ul.dtr-details li:nth-child(even) {
			background-color: #f9f9f9; /* Subtle grey for even rows */
		}

		/* 3. Individual Row Hover (Stronger highlight for the active row) */
		table.dataTable > tbody > tr.child ul.dtr-details li:hover {
			background-color: #eefbff !important;
		}

		/* 4. Fine-tuned Alignment and Padding */
		table.dataTable > tbody > tr.child ul.dtr-details li {
			display: flex;
			padding: 14px 24px;
			border-bottom: 1px solid #eee;
		}
		table.dataTable > tbody > tr.child span.dtr-title {
			font-weight: 700;
			color: #444;
			min-width: 160px; /* Adjust this to control the "gutter" width */
			flex-shrink: 0;   /* Prevents the label from squishing */
		}
		table.dataTable > tbody > tr.child span.dtr-data {
			color: #333;
			line-height: 1.5;
			text-align: left;
		}		

		/* Specific hover for the video items within the child row */
		.video-item {
			padding: 20px;
			border-radius: 6px;
			transition: background-color 0.2s;
		}
		.video-item:hover {
			background-color: rgba(2, 17, 20, 0.102); /* Subtle blue glow around the specific video */
			transform: scale(1.2) translateY(-5px); 
		}
		
		.info-box {
		  position: relative;
		  display: inline-block; /* Makes the box fit tightly around its content */
		}

		.info-text {
		  visibility: hidden; /* Hidden by default */
		  width: 200px;
		  background-color: #f9f9f9;
		  font-size: 11px;
		  color: black;
		  text-align: center;
		  padding: 16px;
		  border: 1px solid #ccc;
		  border-radius: 5px;
		  position: absolute; /* Position the info-text relative to the info box */
		  bottom: 15%; /* Place it vertically */
		  left: 50%; /* Center it horizontally */
		  transform: translateX(-50%); /* Shift it left by half its width */
		  width: 140px;
		  z-index: 1; /* Ensure it's above other content */
		}

		.info-box:hover .info-text {
		  visibility: visible;
		}
		
		
		/* background: linear-gradient(to right, #4d6166, #6e8a91);
				transition: background-color 0.3s; /* For smoother transitions */
				
		/* 	USE: 	background-image: url(../images/nickcage.jpg); // if both css and image are in subdorectories
					background-image: url(images/nickcage.jpg); // if css is within with html file and images is a subdirectory	*/	
				
		.fh-fixedHeader {
				position: fixed;
				top: 0;
				width: 100%;
				left: 0;
				z-index: 10; /* Keep highest z-index */
				background-image: var(--header-image);
				background-repeat: no-repeat;
				background-size: cover;
				padding-bottom: 0.2%;
				padding-top: 0.2%;
			}
			.fh-fixedHeader.filtered { /* CSS class that changes the background color */ 
				background-image: var(--header-filtered-image);
				background-repeat: no-repeat;
				background-size: cover;
			}
			
			.container_heading, .container-results {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%; /* Ensure the container spans the full width */
			}			

			.image_heading {
				padding-top: 7px;
			}

			.text_heading {
				color: white;
			}

			/* Desktop header (shown by default) */
			.desktop-header, .desktop-display {
				display: flex;
				z-index: 2; 	/* Give it a lower z-index */
								/* Make sure that the desktop header (when visible) has a lower z-index than your mobile header */
								/* If both headers share the same fixed positioning and z-index, it can lead to confusion */
			}

			.mobile-header, .mobile-display {
				display: none; /* Hide the mobile header by default */
				z-index: 3; /* Make sure mobile header is on top */
			}
			
			/* Small tablets and large phones (≤ 768px) */
			@media only screen and (max-width: 768px) {
			  .desktop-header, .desktop-display {
				display: none;
			  }
			  .mobile-header, .mobile-display {
				display: flex;
			  }
			}

			/* Small phones (≤ 480px) */
			@media only screen and (max-width: 480px) {
			  .desktop-header, .desktop-display {
				display: none;
			  }
			  .mobile-header, .mobile-display {
				display: flex;
			  }
			}

			/* Large desktops (≥ 1200px) - Optional for ultra wides */
			@media only screen and (min-width: 1200px) {
			  .desktop-header, .desktop-display {
				display: flex;
			  }
			  .mobile-header, .mobile-display {
				display: none;
			  }
			}

			/* Tablets (769px–1024px) - You can also use min/max if you want special styles */
			@media only screen and (min-width: 769px) and (max-width: 1024px) {
			  /* Optional: if you want unique tablet styles, add them here */
			}

			 #reduce-size-image { height: auto; width: 120px; }
			 
			 thead input {
				width: 100%;
			}
			a {
			  text-decoration: none;
			  color: white;
			}
			
			th.dt-center, td.dt-center { text-align: center; } /* apply "center align" */
			
			/* Go to top button */
			#myBtn { 
				display: none; /* Hidden by default */
				position: fixed; /* Fixed-sticky position */
				bottom: 50px; /* Place the button at the bottom of the page */
				right: 30px; /* Place the button 30px from the right */
				z-index: 99; /* Make sure it does not overlap */
				font-size: 18px; 
				border: none; /* Remove borders */
				outline: none; /* Remove outline */
				background-color: red; /* Set a background color */
				color: white; /* Text color */
				cursor: pointer; /* Add a mouse pointer on hover */
				padding: 15px;  /* Some padding */
				border-radius: 4px; /* Rounded corners */
				}

			#myBtn:hover {
				background-color: #555;
				}
				
			/* Wrap buttons to multiple rows */
			.dt-buttons {
			  display: flex !important;
			  flex-wrap: wrap !important;
			  gap: 8px; /* spacing between buttons */
			  max-width: 400px; /* control width to force wrapping */
			  margin-bottom: 10px; /* space below buttons */
			}
			/* Optional: set fixed width for buttons to create grid */
			.dt-buttons button {
			  flex: 1 0 25%; /* roughly three buttons per row */
			  margin-bottom: 8px;
			}
			
			.dt-length { /* "Show x entries" */
			  margin-bottom: 8px;
			}
			
			.container {
			  padding-bottom: 30px !important; 
			}	
			
			html { background-color: trasparent; } 
			body {
				min-height: 100vh;
				max-width: 1250px;
				margin: 0 auto;
				font: 95%/1.45em "Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif !important;
			}
			
			table#mytable.display tbody tr:nth-child(even):hover td{  /*add style on table row hover */
					background-color: #c7d2d5 !important;
				}

			table#mytable.display tbody tr:nth-child(odd):hover td {  /*add style on table row hover*/
					background-color: #c7d2d5 !important;
				}
				
			table.dataTable th {  /*add style on table header*/
				  background-color: #c7d2d5;
					text-align: center;
				}	
				
			.formatted-count_allitems {
				color: black !important;
				font-family: sans-serif !important;
				background-color: white !important;
				padding: 2px 6px;
				border-radius: 5px;
				display: inline-block;
			}

			header-text{