/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
	box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
	font-family: "Open Sans", sans-serif;
}

header {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

footer {
    text-align: center;
    padding: 10px;
    background: #333;
    color: white;
}

.logo img {
    width: 200px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
	font-family: "Inter", sans-serif;
	font-weight: 800;
}

h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.05em; }
h6 { font-size: 1em; }


a {color: #FB388D; text-decoration: none; cursor: pointer;}
a:hover {
	background: linear-gradient(90deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
    -webkit-background-clip: text; /* Hintergrundclip für WebKit-Browser */
    background-clip: text; /* Hintergrundclip für andere Browser */
    color: transparent; /* Textfarbe transparent machen */
}

a.textSwitch .hoverText{display: none;}
a.textSwitch:hover .defaultText {display: none;}
a.textSwitch:hover .hoverText {display: inline-block;}

main {
    padding: 0 20px;
}

#eventname, #mainmenu {
	padding: 5px 10px;
	margin: 20px 20px 0 20px;
	/*display: block;
	background-color: #999;
	text-align: center;*/
}

#mainmenu ul {
	margin:0; padding:0;
}

#mainmenu li {
	display: inline-block;
}

#mainmenu a {
	/*display: inline-block;
	padding: 7px 15px; 
	margin: 1px;
	background-color: #777;
	color: #FFF;
	text-decoration: none;*/
}

#mainmenu a.light {
	background-color: #777;
}

#mainmenu a:hover {
	background: linear-gradient(60deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
}

#mainmenu a.active{
	background: linear-gradient(60deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
}



section {
    background: white;
    padding: 15px;
    margin: 10px auto;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

section.slimBox { max-width: 600px;}

form {
    /*
	display: flex;
    flex-direction: column;
	*/
	font-family: "Open Sans", sans-serif;
}

.loginBox form, .signupBox form, .retrievepasswordBox form, .resetPasswordBox form {
	display: flex;
    flex-direction: column;
	font-family: "Open Sans", sans-serif;
}

label {
    margin: 10px 0 5px;
	font-family: "Open Sans", sans-serif;
}

input {
    padding: 10px;
	margin: 4px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
	font-family: "Open Sans", sans-serif;
}
input[type=text], input[type=password]{
	width: 100%;
	max-width: 100%;
}

.password-container {
	position: relative;
}
.togglePassword {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	cursor: pointer;
}


button, .button {
	font-family: "Open Sans", sans-serif;
    /*background: #007bff;*/
	background: #333;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
	margin: 4px 0;	
	text-align: center;
	font-size: 1em;
	text-decoration: none;
	display: inline-block;
}

button:hover, .button:hover{
	color: white;	
    background: #0056b3;
	background: linear-gradient(60deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
}

.btn_red {background: #FB388D;}
.btn_red:hover {background: linear-gradient(60deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);}
.btn_adminRed {background: #c40909;}
.btn_adminRed:hover {background: #d34444;}


button.inactive, .buttoninactive {
	background: #999;
    cursor: not-allowed;
}

button.toggled, .button.toggled{
	color: white;	
    background: #0056b3;
	background: linear-gradient(60deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
}

.closeX {position: absolute; right: 5px; top: 5px; background-color:#FB388D; color: #FFF; font-weight: bold; border-radius: 15px; padding: 2px 10px 5px 10px; cursor: pointer;}
.closeX:hover {background: linear-gradient(60deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB); color: #FFF;}


.heart-button {
	display: flex;
    align-items: center; /* Align items vertically in the center */
    justify-content: center; /* Optional: Center horizontally if needed */
    gap: 5px; /* Space between icon and text */
	position: absolute;
	bottom: 20px;
	left: 20px;	
	background: none;
	border: none;
	cursor: pointer;
  }

.heart-button:hover {
	background: none;
}

.heart-button .fa-heart {
	color: #FB388D;
	font-size: 30px;
  transition: color 0.3s ease;
  transition: transform 0.3s ease;
}

.heart-button:hover .fa-heart{
	font-size: 32px;
}

.heart-button.active .fa-heart {
  color: #FB388D;
  transform: scale(1.2); /* Add a subtle animation for a click effect */
}


/* ============= SPECIAL OFFER =============== */
.special-offer {
	background: #999;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
	margin: 4px 0;	
	text-align: center;
	font-size: 1em;
	text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
	position: relative;
}

/* Old Price Banner */
.price-old-banner {
	font-size: 1.5em;
	display: inline-block;
    padding: 10px 15px;
    z-index: 1;
    /*text-decoration: line-through;*/
    text-align: center;
}

.price-old-banner::after {
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 90%;
    margin: 0 5%;
    height: 3px;
    background: white;
    transform: rotate(-5deg);
    transform-origin: center;
}

/* New Price Banner */
.price-new-banner {
    position: absolute;
    top: -4%;
    right: -15%;
    transform: rotate(17deg);
    background: #FB388D;
    color: white;
    border-radius: 5px;
	padding: 8px 15px;
    z-index: 2;
    text-align: center;
	white-space: nowrap;
}




form#logoutForm{
	display: block;
}

.sortableHandler {padding-left: 15px; padding-right: 15px;}


.file-input {
            display: none;
        }
		
#uploaded-images img{ max-width: 150px;}	

.eventContainer ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
}
.eventContainer li {
	    background: #EEEEEE;
		border: none;
		padding: 15px;
		border-radius: 4px;
		margin: 15px 0;	
}

.challengeList {
		text-align: left;
}
.challengeList li {
		padding: 5px;
		margin: 5px 0;	
}

/*.challengeText {display: inline; margin-left: 10px;}*/

.labelTag {display: inline-block; text-transform: uppercase; font-size: 12px; padding: 5px 8px; background-color: #999; color: #FFF; font-weight: bold; border-radius: 5px;}

.labelTag:hover {
    background: #999;
    -webkit-background-clip: none;
    background-clip: none;
    color: #FFF;
}
.labelTag.updateProBtn:hover {background: linear-gradient(60deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);}
.labelTag.proEvent {background: linear-gradient(60deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);}

.addChallengeControls{
    display: flex;
    width: 100%; /* Make the container take the full width */
    gap: 10px; /* Optional: Space between the input and button */
}

.newChallengeInput {
    flex: 1; /* Take up all remaining space */
    padding: 8px; /* Add some padding for better appearance */
    font-size: 16px; /* Optional: Adjust font size */
}

.addChallengeButton {
    /*white-space: nowrap; 
    padding: 8px 12px;
    font-size: 16px; 
    display: inline-flex; 
    align-items: center;*/
}

.eventSettingsContainer{
		width: 100%;
		padding: 20px;
		background-color: #FFF;
		margin-top: 10px;
		display: none;
}

.rainbow-text {
    background: linear-gradient(90deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
    -webkit-background-clip: text; /* Hintergrundclip für WebKit-Browser */
    background-clip: text; /* Hintergrundclip für andere Browser */
    color: transparent; /* Textfarbe transparent machen */
}

.rainbow-background {
    background: linear-gradient(90deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
}

.quota-container {
    width: 100%;
    /* max-width: 500px; */
    margin: 10px 0;
    position: relative;
}

.quota-bar {
	background: linear-gradient(90deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
    border-radius: 25px;
    overflow: hidden;
    height: 30px;
    position: relative;
}

.quota-fill {
    background-color: #999999; 
    /* background: linear-gradient(90deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB); */
	height: 100%;
    border-radius: 0 25px 25px 0;
    transition: width 0.5s ease-in-out; /* Smooth transition when the width changes */
	float: right;
}

.quota-text-inside {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
    z-index: 1;
    pointer-events: none; /* So text doesn't interfere with mouse events */
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
	margin: 20px auto;
}

.gallery img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	cursor: pointer;
}

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.pagination a {
	padding: 10px 15px;
	margin: 0 5px;
}

.panel-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Responsive Grid */
	gap: 10px;
	/* padding: 10px; */
}
.panel-photos div {
	position: relative; /* Position für das Bild */
	overflow: hidden;   /* Versteckt den überstehenden Teil des Bildes */
	aspect-ratio: 1;    /* Stellt sicher, dass das Bild quadratisch bleibt */
	width: 100%;        /* Breite 100% für responsive Verhalten */
	height: auto;       /* Höhe automatisch */
}
.panel-photos img {
	width: 100%;        /* Vollständige Breite */
	height: 100%;       /* Vollständige Höhe */
	max-width: 100% !important;        /* Vollständige Breite */
	max-height: 100% !important;       /* Vollständige Höhe */
	object-fit: cover;  /* Bild wird skaliert und zentriert */
	border-radius: 5px; /* Abgerundete Ecken */
	cursor: pointer;    /* Zeiger ändern bei Hover */
}

div.thumb {
	position: relative; /* Position für das Bild */
	overflow: hidden;   /* Versteckt den überstehenden Teil des Bildes */
	aspect-ratio: 1;    /* Stellt sicher, dass das Bild quadratisch bleibt */
	width: 100%; 
	max-width: 150px;			/* Breite 100% für responsive Verhalten */
	height: auto;       /* Höhe automatisch */
}
div.thumb img {
	width: 100%;        /* Vollständige Breite */
	height: 100%;       /* Vollständige Höhe */
	object-fit: cover;  /* Bild wird skaliert und zentriert */
	border-radius: 5px; /* Abgerundete Ecken */
	cursor: pointer;    /* Zeiger ändern bei Hover */
}

div.mini-thumb{
	display:inline-block;
	margin-right: 3px;
	position: relative; /* Position für das Bild */
	overflow: hidden;   /* Versteckt den überstehenden Teil des Bildes */
	aspect-ratio: 1;    /* Stellt sicher, dass das Bild quadratisch bleibt */
	width: 100%; 
	max-width: 50px;			/* Breite 100% für responsive Verhalten */
	height: auto;       /* Höhe automatisch */
}
div.mini-thumb img {
	width: 100%;        /* Vollständige Breite */
	height: 100%;       /* Vollständige Höhe */
	object-fit: cover;  /* Bild wird skaliert und zentriert */
	border-radius: 5px; /* Abgerundete Ecken */
}


/* Lightbox Styling */

#lightboxImage {
    transition: transform 0.3s ease;
	position: relative;
}

.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.lightbox img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 8px;
}

/*
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}
.lightbox img {
	max-width: 90%;
	max-height: 90%;
}
*/

.lightbox .close {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 100;
}

.lightbox .delete, .lightbox .admin_delete {
	position: absolute;
	bottom: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 100;
}

.lightbox .previous {
	position: absolute;
	bottom: 50%;
	left: 10px;
	font-size: 1.3em;
	z-index: 100;
}
.lightbox .next {
	position: absolute;
	bottom: 50%;
	right: 10px;
	font-size: 1.3em;
	z-index: 100;
}
.lightbox #lightboxUploadTime{
	position: absolute;
	top: 20px;
	left: 20px;
	color: #FFF;
	background-color: RGBA(0, 0, 0, 0.7);
	padding: 10px 20px;
	border-radius: 5px;
	z-index: 100;
}

.addMediaButton {
				display: flex; /* Use flexbox to center the icon */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	background-color: #DDD; /* Grey background for the main div */
	border-radius: 5px;
	text-align: center; /* Center text inside the div */
	cursor:pointer;			
}

.addMediaButton .plus-icon {
	display: flex; /* Use flexbox to center the icon */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	width: 70px; /* Width of the circle */
	height: 70px; /* Height of the circle */
	background-color: #333; /* Light gray circle background */
	border-radius: 50%; /* Make it circular */
	margin: 0 auto; /* Center the circle in the parent div */
	font-size: 30px; /* Adjust font size for the icon */
	color: #DDD; /* Icon color */
	font-weight: 900;
}

.addMediaButton:hover .plus-icon {
	background: linear-gradient(45deg, #E2843B, #F836A1, #0FBDFB, #1DE1BB);
}

.hidden {
	display: none;
}

	
#challengeLightbox {
	display: none; 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1000; 
	justify-content: center;
	align-items: center;
}


#challengeContent {
    background: white;
    padding: 20px;
    margin: 20px;
    border-radius: 5px;
    max-width: 1200px;
    margin: 20px auto;
    height: 90%; 
    position: relative;
    display: flex;
    flex-direction: column; 
}


/*
#challengeList {
    flex-grow: 1; 
    overflow-y: auto; 
    max-height: 100%; 
    padding: 10px;
    margin-top: 30px;
	padding: 0;
	text-align: left;
}
#challengeList ul {text-align: left;}
#challengeList li { display: block; padding: 5px 10px; background-color: #EEE; margin: 2px 0; border-radius: 5px;}
*/	
	
.panel-challenges ul { margin: 0; padding: 0; }
.panel-challenges li { display: block; background-color: #EEE; margin: 0 0 40px 0; border-radius: 5px;} 
.panel-challenges li:last-child { margin: 0 0 0 0;} 

.panel-challenges .challengeText{ font-weight: bold; font-size: 1.1em; background-color: #333; color: #ddd; padding: 5px 15px; border-radius: 5px 5px 0 0;}
.panel-challenges .challengeMedia{ padding: 15px;}
.panel-challenges .challengeSub{ background-color: #ccc; padding: 5px 15px ; border-radius: 0 0 5px 5px;}



/* ================================== MOBILE ============================= */
		
@media only screen and (max-width: 800px) {
	body {
	}
  
	main {
		padding: 0 10px;
	}
	
	section {
		padding: 8px;
	}
  
	.eventSettingsContainer{
		text-align: center;
		padding: 10px;
	}
	
	button, .button{
		font-size: 0.8em;
	}
	
	.newChallengeInput{
		font-size: 0.8em;
	}
	
	.button_mobile{
		display: inline-flex; /* Allow buttons to appear inline while using flex layout */
		flex-direction: column; /* Stack icon and text vertically */
		align-items: center; /* Center horizontally */
		justify-content: center; /* Center vertically if needed */
		text-decoration: none; /* Remove underline */
		text-align: center; /* Center the text */
		margin: 0 0 5px 0; /* Optional: Add spacing between buttons */
		font-size: 0.8em;
	}

	.button_mobile i, .button_mobile i {
		font-size: 20px; /* Adjust icon size as needed */
		margin-bottom: 0.5rem; /* Add space between icon and text */
	}
	
	.challengeText {display: block; margin-left: 0px;}

}

@media only screen and (max-width: 600px) {
	
	.button_mobile{
		font-size: 0.65em;
	}
	
	.newChallengeInput{
		font-size: 0.65em;
	}
}