/********************* CSS for pictview *****************/

/* https://grabient.com/HQdgLAbANKkwnPAzFAtABmAJnQRhruumpocRsGDiZVtBZGDOgKwsw4g1ZVA?angle=45 */


.mod-breadcrumbs__wrapper,
.mod-finder,
.mod-languages,
.container-search,
.navbar {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	display: hidden;
}
.container-top-a { height: 0 !important; }

:root {
	--std-height: calc(2.6rem);
}

.header { width: 100% !important; }

main, footer { margin-top: 0 !important; }

form {
	min-height: auto;
}

#stackTopBox {
	position: relative;
	/* var(--btn-close-color): rgba(255, 255, 255, 0.80); */
	width: fit-content;
	z-index: 4;
		/* background-color: white; */
}

#closeViewButton {
	position: absolute;
	top: 0rem;
	right: 1.5rem;
	font-size: 2rem;
	background-color: rgba(0, 0, 0, 0.06);
	color: rgba(255, 255, 255, 0.80) !important;
	padding: 0 !important;
}

body{
	background-color: #0b1b3a;
	background-image:
	/* animierter Lichtfilm */
	linear-gradient(
		120deg,
		rgba(120,190,255,0.00) 20%,
		rgba(120,190,255,0.14) 45%,		/* vorher 0.22 */
		rgba(120,190,255,0.00) 70%
	),
	/* statischer Grundverlauf */
	/* linear-gradient( */
		/* to bottom, */
		/* #0b1b3a 0%, */
		/* #0a2a5e 50%, */
		/* #0f4c9c 100% */
	/* ); */
	
	/* linear-gradient( */
		/* to bottom, */
		/* #12545d 0%, */
		/* #368ddc 50%, */
		/* #1f2f5f 100% */
	/* ); */

	linear-gradient(
		to bottom,
		var(--cassiopeia-color-primary) 0%,
		#12545d 15%,
		#368ddc 50%,
		#1f2f5f 95%,
		var(--cassiopeia-color-primary) 100%
	);

	background-size: 300% 300%, 100% 100%;
	background-position: 0% 50%, 0% 0%;

	/* animation: blueFlow 18s ease-in-out infinite; */
	/* animation: blueFlow 26s ease-in-out infinite; */
	animation: blueFlow 10s ease-in-out infinite;

}

@keyframes blueFlow {
	0%	 { background-position:	 0% 50%, 0% 0%; }
	50%	{ background-position: 100% 50%, 0% 0%; }
	100% { background-position:	 0% 50%, 0% 0%; }
}

/* =========================
	 CURSORS (Fix)
	 ========================= */

/* Body wieder normal */
html, body { cursor: default !important; }

/* Clickables */
a, button, .btn, [role="button"],
input[type="button"], input[type="submit"], input[type="reset"],
select, summary,
label[for] {
	cursor: pointer !important;
}

/* Checkbox/Radio */
input[type="checkbox"], input[type="radio"] {
	cursor: pointer !important;
}

/* Text-IBeam */
input[type="text"], input[type="number"], input[type="email"], input[type="search"],
textarea {
	cursor: text !important;
}

/* Disabled */
:disabled, .disabled {
	cursor: not-allowed !important;
}

/* =========================
	 DARK FORM (botContainer)
	 ========================= */

.dark-form {
	color: #fff;
}

/* Labels */
.dark-form label,
.dark-form span,
.dark-form .form-label,
.dark-form .form-check-label {
	color: rgba(255, 255, 255, 0.60);
}

/* =========================
	 INPUTS / SELECTS / TEXTAREAS
	 ========================= */

.dark-form .form-control,
.dark-form .form-select,
.dark-form textarea.form-control,
#eventDescriptionCardBody, #eventSelectCardBody {
	background-color: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.80);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 0.375rem;
	box-shadow: none;
	position: relative;
}

#eventDescription { border: none !important; }

#closeEventDescriptionButton {
	position: absolute;
	top: 0;
	right: 0.25rem;
	background-color: rgba(0, 0, 0, 0.06);
	color: rgba(255, 255, 255, 0.80) !important;
	padding: 0 !important;
}

/* Höhe exakt wie Bootstrap Floating */
.dark-form .std-height {
	height: var(--std-height);
}

/* Placeholder */
.dark-form .form-control::placeholder,
.dark-form textarea.form-control::placeholder {
	color: rgba(255, 255, 255, 0.60);
}

/* Focus */
.dark-form .form-control:focus,
.dark-form .form-select:focus,
.dark-form textarea.form-control:focus {
	background-color: rgba(255, 255, 255, 0.10);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.90);
	box-shadow: none;
}

/* =========================
	 CHECKBOX
	 ========================= */

.dark-form .form-check-input {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.9);
}
.dark-form .form-check-input:checked {
	background-color: #fff;
	border-color: #fff;
}

/* =========================
	 BUTTONS (Year +/- etc.)
	 ========================= */

.dark-form .btn-outline-secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.65);
	background-color: rgba(255, 255, 255, 0.08);
}
.dark-form .btn-outline-secondary:hover,
.dark-form .btn-outline-secondary:focus {
	color: #fff;
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

/* Close Button */
.dark-form .btn-close {
	filter: invert(1) grayscale(1);
	opacity: 0.85;
}
.dark-form .btn-close:hover {
	opacity: 1;
}

/* =========================
	 FLOATING LABEL
	 ========================= */

.dark-form .form-floating > label {
	color: rgba(255, 255, 255, 0.80);
}

/* =========================
	 arrows for select lists
	 ======================== */

.dark-form .select-arrow {
	position: relative;
	width: 100%;
}

.dark-form .select-arrow > .form-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.75rem;
}

.dark-form .select-arrow::after {
	content: "";
	position: absolute;
	pointer-events: none;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 10px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.95;
}

/* =========================
	 FALLBACK (ohne Wrapper)
	 ========================= */
/*
.dark-form .form-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	padding-right: 2.75rem;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 18px 18px;
}
*/

.dark-form .form-select {
	background-image: none !important;
}

.form-floating label {
	background-color: rgba(255, 255, 255, 0.08);
}
.form-floating textarea,
.form-floating .input-group {
	height: calc(var(--std-height) + 2px); /* Bootstrap floating height */
}

.form-floating .input-group .form-control {
	height: 100%;
}

#pictviewForm > .control,
#pictviewForm > .control-group { /* force horizontal alignment */
	display: block;
	margin-top: 0 !important;	/* no gap beetween fields */
	margin-bottom: 0 !important;	/* no gap beetween fields */
	background-color: white;
}
.form-select, .custom-select {
	border-width: 2px;
	/* background: white; */
	padding-left: 4px;
}
.std-height {
	min-height: var(--std-height); /* Bootstrap floating height */
	max-height: var(--std-height);
}

.form-floating .input-group {
	min-height: var(--std-height); /* Bootstrap floating height */
	max-height: var(--std-height);
}
.form-floating .input-group .form-control {
	height: 100%;
}

.borderRed { border: 1px solid red; }
.borderYellow { border: 1px solid yellow; }
.borderGreen { border: 1px solid green; }
.borderWhite { border: 1px solid white; }
.fitContent { width: fit-content !important; }

.hideMe { visibility: hidden; }

#botContainer *,
#pictDescription * { font-size: 0.8rem !important; }

#searchByYearButton, #searchByCountryButton, #searchByBothButton { font-size: 1rem !important; }

#searchEventButton {
	border: none;
}

.icon-search {
	padding-right: 0.5rem;
}
#yearDown, #yearUp {
	width: 2rem;
	max-width: 2rem;
	padding: 0.25rem;
	border-radius: 0;
}

#yearFieldDiv {
	min-width: 9rem;
	max-width: 9rem;
}

#yearField {
	min-width: 5rem;
	max-width: 5rem;
}

/* Chrome, Edge, Safari */
#yearField::-webkit-outer-spin-button,
#yearField::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
#yearField[type="number"] {
	/* -moz-appearance: textfield; */ /* does not work yearField.classList.replace('okBackgroundCol', 'notOkBackgroundCol'); */
	appearance: textfield; /* modern */
}

.bgColorStd {
	background-color: transparent !important;
	color: #fff !important;
 }
.bgColorRed { background-color: red !important; }

.carousel-wrap {
	height: min(55svh, 420px);
}

.carousel-wrap #myCarousel,
.carousel-wrap #myCarousel .carousel-inner,
.carousel-wrap #myCarousel .carousel-item {
	height: 100%;
}

/* do not change bootstrap carousel item */
#myCarousel .carousel-item {
	min-height: 0;
}

/* neuer innerer Wrapper */
#myCarousel .carousel-item-content {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Title above the picture */
#myCarousel .carousel-caption-top {
	text-align: center;
	padding: 0.4rem 0.8rem;
	margin: 0 0 0.3rem 0;
	color: yellow;
	background: rgba(0, 0, 0, 0.45);
		background-color: transparent;
	flex: 0 0 auto;
}

#myCarousel .carousel-caption-top h6 {
	margin: 0;
	line-height: 1.2;
	word-break: break-word;
}

/* picture takes remaining height */
#myCarousel .carousel-item img {
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	object-fit: contain;
	object-position: center;
}

.carousel {
	overflow: hidden;
	padding-bottom: 2.2rem;
}

.carousel-inner {
	overflow: visible;
}

.carousel-control-next,
.carousel-control-prev,
.carousel-indicators {
	bottom: 0rem;
}

#myCarousel .carousel-indicators [data-bs-target] {
	opacity: .6;
}

#myCarousel .carousel-indicators .active {
	opacity: 1;
}

#myCarousel .carousel-indicators .active {
	opacity: 1;
}

.carousel { overflow: hidden; padding-bottom: 2.2rem; }
.carousel-inner { overflow: visible; }
.carousel-control-next, .carousel-control-prev, .carousel-indicators { bottom: 0rem; }

#pictDescription {
	/* font-size: 0.9rem; */
}

.myBackground {		/* #314755, #26a0da, #314755	*/
	/* background-color: #2B6591; */
	/* color: white; */
}

.my-btn {
	background-color: rgba(255, 255, 255, 0.06) !important;
	border: none !important;
}

@media (max-width: 480px) {
	.carousel-wrap {
	height: 40svh;
	}
}