body
{
	background-color: black;
	background-image: url('../graphics/background-pattern-big.jpg');
	font-family: "Open Sans", sans-serif;
	color: white;
}

.navbar
{
	transition: background-color 0.5s;
	height: 30px;
	color: white;
	padding-top: 25px;
	padding-bottom: 0px;
}
.navbar.scrolled
{
	background-color: black !important;
	padding-bottom: 24px;
}
.navbar .navbar-brand, .navbar .nav-link, .nav-link.active
{
	color: white !important;
	text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
}
.navbar.scrolled .navbar-brand, .navbar.scrolled .nav-link
{
	color: white !important;
}
.navbar_getaccess
{
	background-color: red;
	border-radius: 4px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
}

.admin_menu
{
	margin: 2px;
}

.admin_menu:hover
{
	transform: scale(1.05);
}

.admin_menu_color
{
	color: #fff;
}

.admin_menu_color:hover
{
	background-color: #444;
}

.block_title
{
	height: 100px;
	line-height: 100px;
	text-transform: uppercase;
	font-family: "Alexandria", sans-serif;
	font-size: large;
	font-weight: 300;
	background-image: url('../graphics/divider.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1400px;
	color: #d6ba68;
}

.video-link
{
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.container-fluid
{
  padding-right: 100px;
  padding-left: 100px;
}

.video-gold-frame
{
	padding: 5px;
    border-radius: 20px;
	z-index: 5;
}

.actor-gold-frame
{
	padding: 5px;
    border-radius: 20px;
	z-index: 5;
}

.video-gallery-image
{
	padding: 5px;
    border-radius: 20px;
}

.video-gallery-video
{
	padding: 7px;
    border-radius: 22px;
}

.actor-gallery-image
{
	padding: 5px;
    border-radius: 20px;
}

.row
{
  --bs-gutter-x: 0px;
}

.hero-video
{
	pointer-events: none;
	width: 100%;
	z-index: 2;
	margin-bottom: -5px;
	padding-top: 2px;
}

.hero-video-2
{
	margin-top: -1px;
	pointer-events: none;
	width: 100%;
	z-index: 2;
	margin-bottom: -5px;
}

.join-centered
{
	height: 75px;
}

.image-swap-button
{
	position: absolute; 
	top: 27.5%;
	display: grid;
	place-items: center;
	text-decoration: none;
}

.image-swap-button-left
{
	left: 15%;
	transform: translate(-50%, -50%);
}

.image-swap-button-right
{
	right: 15%;
	transform: translate(50%, -50%);
}

.image-swap-button-center
{
	left: 50%;
	transform: translate(50%, -50%);
}

.image-swap-button img
{
    width: 120px;
    height: auto;
}

.image-swap-button > * 
{
	grid-area: 1 / 1;
}

.image-swap-button .hover-image
{
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.image-swap-button:hover .hover-image
{
	opacity: 1;
}

.image-swap-button .button-text
{
	z-index: 10;
	font-weight: bold;
	font-optical-sizing: auto;
	font-family: "Alexandria", sans-serif;
	font-size: x-small;
	font-weight: 300;
	color: #f7eed6;
	transition: color 0.3s ease-in-out;
}

.image-swap-button:hover .button-text
{
	color: black;
}

.menu-background
{
	position: relative;
	height: clamp(100px, calc(7vw), 202px);
	background-color: #000;
	background-image: url('../graphics/menu-background.jpg');
	background-repeat: repeat-x;
	background-position: center bottom;
}

.menu-links
{
    position: absolute;
    bottom: 12px;
    display: none;
    align-items: center;
    gap: 10px;
}

.menu-links a
{
	color: #c6b894;
    text-decoration: none;
    font-family: "Alexandria", sans-serif;
    font-size: small;
    font-weight: 400;
    transition: color 0.2s ease;
}

.menu-links a:hover
{
    color: #ddd;
}

.menu-links-left
{
    right: 50%;
    margin-right: 100px;
}

.menu-links-right
{
    left: 50%;
    margin-left: 100px;
}

.border-strip
{
	height: 11px;
	background-image: url('../graphics/border-strip.jpg');
	background-repeat: repeat-x;	
	padding-bottom: 50px;
}

.edit-mode-border
{
    border-color: lightgreen;
    border-style: solid;
    border-width: thick;
}

.container-element
{
	padding: 2px;
	position: relative;
	
    /* border: 3px dashed #ccc; */
    /* min-height: 200px; */
    /* border-radius: 8px; */
    transition: all 0.2s ease-in-out;
    
    /* Center the placeholder text */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Background image properties */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container-element-actor
{
	padding: 2px;
	position: relative;
	
    /* border: 3px dashed #ccc; */
    /* min-height: 200px; */
    /* border-radius: 8px; */
    transition: all 0.2s ease-in-out;
    
    /* Center the placeholder text */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Background image properties */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.play-button-overlay
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10%;
    z-index: 7;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.play-button-overlay.visible
{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.video-gold-frame
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.actor-gold-frame
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.element-title-overlay
{
  position: absolute; /* Position it relative to the .container-element */
  bottom: 0;          /* Stick it to the bottom */
  right: 0;           /* Stick it to the right */
  z-index: 10;        /* Ensure it's on top of the image and video */

  /* Spacing and appearance */
  padding: 0.25rem 0.6rem; /* Add some internal spacing (Bootstrap's spacers are good) */
  color: white;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black for readability */
  
  /* Optional: for aesthetics on the corner */
  border-top-left-radius: 0.375rem; /* Matches Bootstrap's '.rounded' class */

  /* Prevent text from wrapping if titles are short */
  white-space: nowrap;
}

/*
 * 1. Define the font families for our custom classes.

- Michroma
- Special Gothic Expanded One
 
*/
.font-option-oswald { font-family: 'Oswald', sans-serif; font-size: 2em; }
.font-option-poppins { font-family: 'Poppins', sans-serif; font-size: 2em; }
.font-option-libre { font-family: 'Libre', serif; font-size: 2em; }
.font-option-meow { font-family: 'Meow Script', serif; font-size: 2em; }

/*
 * 2. Position the entire dropdown component in the bottom right.
 *    This is the new overlay container.
*/
.element-dropdown-overlay
{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

/*
 * 3. Make the main dropdown button transparent and remove its border.
 *    We add a subtle shadow to make the white text readable on any background.
*/
.element-dropdown-overlay .btn {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important; /* Removes focus shadow */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  padding-right: 0.5rem; /* Adjust spacing */
}

/*
 * 4. Make the dropdown menu transparent.
 *    A semi-transparent black is better than fully transparent for readability.
*/
.element-dropdown-overlay .dropdown-menu {
  background-color: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  max-height: 200px;
  overflow-y: auto;
}

/*
 * 5. Style the individual links inside the dropdown.
*/
.element-dropdown-overlay .dropdown-item {
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.element-dropdown-overlay .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Placeholder text before an image is dropped */
/* .container-element::before {
    content: 'Drop Image Here';
    color: #aaa;
    font-weight: bold;
} */

/* Remove placeholder text when a background image is set */
.container-element.has-image::before {
    content: '';
}
.container-element-actor.has-image::before {
    content: '';
}

/* Style for when a user is dragging an item over the div */
.container-element.drag-over 
{
    transform: scale(1.05);
}
.container-element-actor.drag-over
{
    transform: scale(1.05);
}

.img-container {
    width: 100%;
    /* Limit the height to prevent it from pushing the modal off-screen */
    max-height: 65vh; 
    overflow: hidden;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
}

/* Ensure the image inside the container is block-level */
#imagePreview {
    display: block;
    max-width: 100%; /* This is important for Cropper.js */
}

.video-element
{
	position: relative;
}

.hero-logo
{
	width: 60% !important;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 99;
	padding-top: 0px;
}

.graphic-centered
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-button-container
{
  position: absolute;
  top: 5px;
  right: 25px;
  max-width: 100%;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.title-container
{
  position: absolute;
  top: 0px;
  right: 25px;
  max-width: 100%;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.title-content
{
	background: transparent;
	position: relative;
	border: none;
	color: #fff;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
	z-index: 99;
}

.icon-button
{
	background: transparent;
	position: relative;
	border: none;
	color: #fff;
	cursor: pointer !important;
	padding: 5px;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
	z-index: 99;
}

.icon-button:hover
{
	transform: scale(1.5);
	/* font-size: 38px; */
	/* top: -4px; */
}

.icon-button-left
{
	top: 50%;
	transform: translateY(-50%);
	left: 10px;
}

.icon-button-left:hover
{
	transform: scale(1.1);
	top: 50%;
	transform: translateY(-50%);
}

.icon-button-right
{
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.icon-button-right:hover
{
	transform: scale(1.1);
	top: 50%;
	transform: translateY(-50%);
}

.icon-button-plus-right:hover
{
	font-size: 38px;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
}

.admin-bar
{
	height: 40px;
	background-color: #333;
}

.highlight
{
	filter: brightness(125%) contrast(75%);
}	

.icon-button-v2
{
	background: transparent;
	border: none;
	color: #fff;
	font-size: 24px;
	cursor: pointer !important;
	padding: 5px;
	padding-top: 0px;
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
	z-index: 99;
	width: 40px;
	height: 40px;
}

.icon-button-v2:hover
{
	transform: scale(1.2);
}	

.icon-button-v3
{
	background: transparent;
	border: none;
	color: white;
	font-size: 20px;
	cursor: pointer !important;
	padding: 2px;
	z-index: 99;
	width: 24px;
	height: 30px;
}

.icon-button-v3:hover
{
	transform: scale(1.2);
}

.select-admin
{
	border: none;
	font-size: 16px;
	cursor: pointer !important;
	z-index: 99;
	border-radius: 4px;
}

.button-radius-left
{
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.button-radius-right
{
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

.number-display
{
	width: 40px;
	border: 0px;
	font-size: 22px;
}

#admin-console
{
	width: 100%;
	position: fixed;
	text-align: center;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 9999;
}

.modal
{
	z-index: 20000;
}

.admin-console-color-darker
{
	color:#444;
}

.modal-color
{
	color: black;
}

.modal-color-bright
{
	color: white;
}

.img-fluid
{
	width: 100%;
}

.admin-icon
{
	position: fixed;
	top: calc(40% + 275px);
	left: 0;
	transform: translateY(-40%);
	z-index: 2000;
	font-size: 24px;
	box-shadow: 0 0 30px #999;
}

.admin-hard-soft-icon
{
	top: calc(40% + 48px);
}

.admin-hard-soft-text
{
	display: block;
	width: 25px;
	font-size: 31px;
	font-weight: 800;
}

.admin-preview-icon
{
	top: calc(40% + 110px);
}

.admin-video-icon
{
	top: calc(40% + 165px);
}

.admin-menu-icon
{
	top: calc(40% + 220px);
}

.admin-icon-button
{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.admin-icon-button:hover
{
	transform: scale(1.1);
	padding-left: 20px;
}

.admin-menu
{
	z-index: 2010;
}

.offcanvas
{
	--bs-offcanvas-width: 100%;
	background-color: #333;
	color: #fff;
}

.select-auto-width
{
	width: auto;
}

.admin-label
{
	padding: 10px;
}

#admin-modal-large
{
	--bs-modal-width: 90%;
}

.modal-dialog-large
{
	height: 50vh;
}

.admin-modal-large-dialog
{
	background-color: darkgray;
}

.gallery-thumbnail
{
	height: 200px;
}

.gallery-thumbnail-small
{
	height: 100px;
}

.gallery-button:hover
{
	background-color: white;
}

.clickable-table-row
{
	cursor: pointer;
}

.table-color
{
	color: #fff;
	background-color: #777 !important;
}
.table-color th
{
	background-color: #777 !important;
}
.table-color td
{
	background-color: #777 !important;
}

.table-color-transparent
{
	color: #fff;
	background-color: transparent !important;
}
.table-color-transparent th
{
	background-color: transparent !important;
}
.table-color-transparent td
{
	background-color: transparent !important;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th
{
	color: #000 !important;
	background-color: #fff !important;
}

.thumbnail-title
{
	margin: 0px;
}

.button_margin_left
{
	margin-left: 5px;
}

.button_margin_bottom
{
	margin-bottom: 5px;
}

.modal-body-large
{
	height: calc(100vh - 200px);
	overflow: auto;
}

.table-responsive
{
  max-height: 100%;
}

.roll_over_video
{
	position: relative;
}

.roll_over_video video
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	transition: opacity 0.4s ease-in-out;
}

.roll_over_video:has(.icon-button-container:hover) .rollover_video
{
  opacity: 0;
  pointer-events: none;
}

.roll_over_video:hover
{
    cursor: pointer;
}

.video-fade-out
{
    opacity: 0;
    pointer-events: none; /* Prevents the invisible video from blocking clicks */
}

.font_weight
{
	font-weight: 600 !important;
}

.form-select
{
	font-weight: 600 !important;
}

.offcanvas-body
{
	position: relative;
}

.offcanvas-fixed
{
	position: fixed;
	border-radius: 7px;
	top: 100px;
	left: 230px;
	/* background-color: green; */
	width: calc(100vw - 275px);
	height: calc(100vh - 125px);
	overflow-y: auto;
}

.offcanvas-table
{
	height: calc(100vh - 115px);
}

.col-auto
{
	padding-right: 10px;
}

.border-dashed
{
	border-style: dashed !important;
    border-color: #999 !important;
    border-width: 5px !important;
}

.upload-button
{
	width: 180px;
	height: 120px;
	padding: 5px !important;
}

.table-auto
{
	width: auto !important;
}

.transparent-background
{
    background-color: transparent !important;
}

.button_text
{
	font-size: 30px;
	color: #555;
	font-weight: 800;
}

.image-dropdown
{
	max-height: 33vh;
	overflow-y: auto;
}

.dropdown-image
{
	width: 180px;
	height: 101px;
}

.dropdown-image-vertical
{
	width: 101px;
	height: 180px;
}


.width-100
{
	width: 100%;
}

.table-upload-button
{
	color: #000;
}

.hidden-important
{
    display: none !important;
}

.btn_upload_info
{
	color: #000;
	background-color: #fff;
	font-size: 10px;
}

.btn_upload_completed, .btn_upload_completed2, .btn_upload_completed3, .btn_upload_completed4, .btn_upload_completed5, .btn_upload_completed6, .btn_upload_completed7
{
	color: #000;
	background-color: #fff;
	font-size: 10px;
}

.icon_upload_completed
{
	font-size: 24px;
	color: #009900;
}

.footer
{
	color: #a98565;
	font-size: 11px;
	text-decoration: none;
	min-height:56px;
	margin:0 auto;
	text-align: center;
	line-height: 150%;
	padding: 50px;
}

.footer a
{
	color: #a98565;
}

.gold-gradient-border
{
	border: 4px solid transparent;
	border-radius: 25px;
	background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), 
					  linear-gradient(45deg, rgba(179, 150, 94, 0.75), rgba(120, 92, 38, 0.5), rgba(87, 56, 14, 0.75));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.join-link a
{
	color: #f7eed6;
	font-size: x-large;
}

.btn-gold
{
	background-color: black;
	border: 2px solid transparent;
	background-size: 200% auto;
	border-color: #b3965e;
	color: #b3965e;
	border-radius: 50px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.4s ease;
}

.btn-gold:hover
{
	border: 2px solid transparent;
	color: #000;
	background-image: none;
	background-image: linear-gradient(-12deg, #b3965e, #785c26, #e2d3a9);
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.join-option
{
	--bs-gutter-x: 3rem;
	--bs-gutter-y: 3rem;
	color: #f7eed6;
	font-family: "Alexandria", sans-serif;
	font-size: large;
	font-weight: 500;
}

.join-text-secondary
{
	font-weight: 200 !important;
}

@media (min-width: 576px)
{
	.hero-logo
	{
	  width: clamp(247px, 33%, 33%) !important;
	  transform: translate(-50%, 5%);
	}
	
	.image-swap-button img
	{
		width: clamp(160px, 10vw, 220px);
	}
	
	.menu-links
	{
		display: flex;
		bottom: 13px;
		gap: 25px;
	}	
	
	.image-swap-button .button-text
	{
		font-size: medium;
	}
}

@media (min-width: 768px)
{
	.hero-logo
	{
	  width: clamp(247px, 25%, 600px) !important;
	  transform: translate(-50%, 5%);
	}
	
	.admin-modal-top
	{
		padding-top: 240px;
	}
	
	.image-swap-button-left
	{
		left: 12.5%;
	}
	
	.image-swap-button-right
	{
		right: 12.5%;
	}
	
	.menu-links
	{
		bottom: 11px;
		gap: 25px;
	}
	
	.menu-links a
	{
		font-size: medium;
	}
	
	.menu-links-left
	{
		margin-right: 125px;
	}
	
	.menu-links-right
	{
		margin-left: 125px;
	}
}

@media (min-width: 992px)
{
	.image-swap-button-left
	{
		left: 7.5%;
	}
	
	.image-swap-button-right
	{
		right: 7.5%;
	}
	
	.menu-links
	{
		bottom: 9px;
		gap: 50px;
	}
	
	.menu-links a
	{
		font-size: large;
	}
	
	.menu-links-left
	{
		margin-right: 150px;
	}
	
	.menu-links-right
	{
		margin-left: 150px;
	}
}

@media (min-width: 1200px)
{
	.menu-links-left
	{
		margin-right: 175px;
	}
	
	.menu-links-right
	{
		margin-left: 175px;
	}
}

@media (min-width: 1400px)
{
	.image-swap-button
	{
		top: 33%;
	}
	
	.menu-links
	{
		gap: 100px;
	}
	
	.menu-links-left
	{
		margin-right: 250px;
	}
	
	.menu-links-right
	{
		margin-left: 250px;
	}
}

@media (min-width: 2048px)
{
	.menu-links-left
	{
		margin-right: 350px;
	}
	
	.menu-links-right
	{
		margin-left: 350px;
	}
}