/* <link rel="stylesheet" href="https://unrealdevhacks.com/patreon/css/patreon.css?v=9"> */

.udh_image_container {
	/*width: 598px; /* Adjust to match the natural width of the image */
	/*height: 337px; /* Adjust to match the natural height of the image */
	/*background-image: url('https://unrealdevhacks.com/mt-content/uploads/2024/04/udh_pipeconstructiontool_featured.png'); /* */
	/*padding:6px;*/

	background-color:#dedede;
	width:100%; 
	height:100%;
	align-items: center; /* Vertically centered */
	justify-content: center; /* Horizontally centered */
	background-size: cover;
	position: relative;
}

/* -------------> POST <------------------- */

.udh_post_container {
	background-color:#dedede;
	border: none;
	/*margin: 5px;*/
	padding:6px;
	width:100%; 
	height:100%;
}
.udh_post_image_poster {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.udh_post_iframe {
	position: absolute;
	display:none;
	border:none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.udh_youtube_button_01 {
	width: 158px; /* Adjust as needed */
	height: 128px; /* Adjust as needed */
	background-image: url('https://unrealdevhacks.com/mt-content/uploads/2024/04/youtube_button_01_normal.png');
	background-size: cover;
	position: absolute;
	top: 50%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%);
	cursor: pointer;
}
.udh_youtube_button_01:hover {
	background-image: url('https://unrealdevhacks.com/mt-content/uploads/2024/04/youtube_button_01_hover.png');
}

/* -------------> DOWNLOAD <------------------- */


.udh_asset_download_main{
	display:flex; 
	flex-direction: row; 
	border: 0px solid rgba(0, 0, 0, 0.2);
}


.udh_asset_download_parent_container {
	display: flex;
	flex-direction: column;
	height: 100%; /* Make sure this container has a specific height */
	justify-content: flex-end; /* Aligns children (the main container) to the bottom */
}

.udh_asset_download_main_container {
	padding-left:10px;
	padding-right:0px;
	/*padding-bottom:10px; /* */
	/* padding-top:3px; /*  */
	/* background-color:#eeeeee; /* */
	display:none; 
	width:100%; 
	height:100%;
	margin:0px;

}

.udh_asset_download_headter_container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%; /* Ensures the header takes full width of the main container */
	padding: 0px 0px;
	/*margin: 0px 0px; /* */
	margin-bottom: 2px;
	margin-top: 0px;
}
.udh_asset_download_container{
	display: flex; 
	width: 100%;
}
.udh_asset_download {
	flex: 1;  /* Allows each button to fill equal space */
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: white;
	padding: 0px 0px;
	padding-bottom: 0px;
	padding-top: 2px;
	margin-left: 2px;
	margin-right: 2px;
	background: #af2125;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	height: 40px; /* Fixed height */
	display: flex;
	align-items: center; /* Vertically centered */
	justify-content: center; /* Horizontally centered */
	transition: background-color 0.3s; /* Smooth transition on hover */
}

.udh_asset_download:hover {
	background-color: #058fc2; 
	color: white;
}

.udh_asset_download_label {
	font-family: 'Montserrat', sans-serif;
	font-size: 19px; 
	color: black; 
	font-weight: normal;
}
.udh_1px_line {
	border-top: 1px solid #000;
	padding-top: 3px;
}

/* -------------> BUTTONS <------------------- */

.udh_button_red {
	background-color: #af2125; /* Dark red color */
	color: white;
	border: none; /* No border */
	height: 60px; /* Set the button height to 80px */
	border-radius: 10px; /* Rounded corners */
	display: inline-flex; /* Flex for centering */
	align-items: center; /* Vertically centered */
	justify-content: center; /* Horizontally centered */
	padding: 0; /* Reset default padding */
	margin-left: 1px; /* Left margin */
	margin-right: 1px; /* Right margin */
	/*cursor: pointer; /* Change cursor on hover */
	transition: background-color 0.3s; /* Smooth transition on hover */
}


.udh_button_1 {
   background-color: #af2125; /* Dark red color */
	color: white;
	border: none; /* No border */
	height: 60px; /* Fixed height */
	border-radius: 10px; /* Rounded corners */
	display: inline-flex; /* Flex to size with content */
	align-items: center; /* Vertically centered */
	justify-content: center; /* Horizontally centered */
	padding: 0; /* Reset default padding */
	margin-left: 5px; /* Left margin */
	margin-right: 5px; /* Right margin */
	transition: background-color 0.3s; /* Smooth transition on hover */
}

.udh_button_1:hover {
	background-color: #058fc2; 
}

.udh_button_1 img {
	height: auto; /* Maintain aspect ratio */
	max-height: 60px; /* Ensure image does not exceed button height */
	width: auto; /* Adapt width to image size */
	padding-left: 10px; /* Padding on the left */
	padding-right: 10px; /* Padding on the right */
	display: inline; /* Display inline within the button */
	cursor: pointer; 
}

.udh_button_1_text {
	font-family: 'Montserrat', sans-serif; /* Use Montserrat font */
	font-size: 20px; /* Set font size */
	color: white; /* Set text color */
	padding-left: 20px; /* Padding for spacing */
	padding-right: 20px;
}




/* -------------> VIDEO <------------------- */

.youtube-icon {
	width: 158px; /* Adjust as needed */
	height: 128px; /* Adjust as needed */
	background-image: url('https://unrealdevhacks.com/mt-content/uploads/2024/04/youtube_button_01_normal.png');
	background-size: cover;
	position: absolute;
	top: 50%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%);
	cursor: pointer;
}
.youtube-icon:hover {
	background-image: url('https://unrealdevhacks.com/mt-content/uploads/2024/04/youtube_button_01_hover.png');
}


.uhd_video_container {
	background-color: #222222; 
	min-height: 200px;  
	width: 100%; 
	max-width: 1920px; 
}
.uhd_video_unavailable_container {
	background-color: #222222; 
	min-height: 200px;  
	width: 100%; 
	max-width: 1920px; 
}


/* -------------> MODAL <------------------- */

.udh_modal_background {
	display: block; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
	justify-content: center;
	align-items: center;
	z-index: 1000; /* Make sure it's above other content */
}

.udh_modal_window_container {
	background-color: white;
	border: 6px solid rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	max-width: 800px;
	width: 100%;
	padding: 6px;
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.udh_modal_header {
	background-color: #323232;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	padding: 10px;
	border-radius: 8px;
	text-align: center;
}

.udh_modal_body {
/*background-color: grey; /* */
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	color: black;
	margin-top: 5px;
	margin-left: 5px;
	display: grid;
	grid-template-columns: 1fr 2.3fr; /* Adjusts grid for two columns */
	column-gap: 10px; /* Space between columns */
}

.udh_modal_text_row {
	display: flex;
	align-items: center; /* Vertically aligns items in the row */
	margin: 6px 0;
	background-color: #EfEfEf;
	padding: 10px;
	border-radius: 8px;
}

.udh_modal_text_row_warning {
	color: #af2125; /* Warning color for important text */
}

.udh_modal_button_footer_container {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
}

.udh_modal_button {
	background-color: #af2125;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	padding: 10px 00px; 
	border: none;
	border-radius: 8px;
	cursor: pointer;
	flex-grow: 1; 
	margin: 2px;
	transition: background-color 0.3s; 
}
.udh_modal_button:hover {
	background-color: #058fc2; 
}

/* MEMBER BADGE */

.udh_member_badge {
    display: grid;
    place-items: center;    /* Shorthand for aligning and justifying content at the center */
	background-color: #ffffff; /* */
	flex-grow: 1;  
	align-items: center; /* Vertically centered */
	justify-content: center; /* Horizontally centered */
	width:100%; 
	border-radius: 6px;
	transition: background-color 0.3s; /* Smooth transition on hover */
	font-family: 'Montserrat', sans-serif;
	font-size: 16px; 
	color: white; 
	font-weight: normal;
	padding: 0px;
	margin-top: 2px;
	
}
	
.udh_member_badge_color_unregistered {
	color: white; 
	background-color: #af2125;
}

.udh_member_badge_color_free {
	color: white; 
	background-color: #8f8f8f;
}

.udh_member_badge_color_bronze {
	color: white; 
	background-color: #a35b41;
}

.udh_member_badge_color_silver {
	color: white; 
	background-color: #6c707a;
}

.udh_member_badge_color_gold {
	color: black; 
	background-color: #fac200;
	font-weight: 500;
}

.udh_member_badge_color_platinum {
	color: black; 
	background-color: #dddddd;
	font-weight: 500;
}

.udh_member_badge_text_top {
	font-size:14.5px; 
	margin-bottom:-12px;
}
.udh_member_badge_text_bottom {
	font-size:20px; 
	margin-top:-12px;
}


/* EFFECT*/
.udh_flashing_text {
    font-size: 24px;
    color: #555;
    text-align: center;
    animation: udh_pulsate_1 0.5s infinite ease-in-out;
}

@keyframes udh_pulsate_1 {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
}