.text-center {
	text-align: center !important;
}

h2 {
	color: #7E828B;
}

.header {
	display: flex;
	/* background-color: #fff; */
	/* box-shadow: 0px 5px 10px 1px rgb(0 0 0 / 50%); */
	/* max-width: 100%; */
	z-index: 3;
	background-color: #f6821b;
	color: #fff;
	box-shadow: 0px 5px 10px 1px rgb(0 0 0 / 50%);
	/* position: relative; */
	align-items: center;
	/* width: 100%; */
	/* padding: 1rem 1.25rem; */
	/* font-size: 1rem; */
	text-align: center;
	border-style: solid !important;
	border-color: #fff !important;
	border: 2px;
	border-radius: 4px;
	overflow-anchor: none;
	transition: color .15s;
}



.header cocktailname {
	width: 90%;
}



p.close,
p.open {
	width: 100% !important;
	z-index: 4;
	text-align: right;
	padding: 4.5rem 0rem 0rem 0rem !important;
	margin: 0rem;
	box-shadow:
		inset rgb(246 130 27) 0.25rem 0px,
		inset rgb(246 130 27 / 90%) 0.5rem 0px,
		inset rgb(246 130 27 / 80%) 0.75rem 0px,
		inset rgb(246 130 27 / 70%) 1rem 0px,
		inset rgb(246 130 27 / 60%) 1.5rem 0px,
		inset rgb(246 130 27 / 50%) 2rem 0px,
		inset rgb(246 130 27 / 40%) 3rem 0px,
		inset rgb(246 130 27 / 30%) 4rem 0px,
		inset rgb(246 130 27 / 20%) 6rem 0px,
		inset rgb(246 130 27 / 10%) 8rem 0px,
		inset rgb(246 130 27 / 5%) 11rem 0px;
}

p.open {
	background-color: #f6821b;
	color: #fff;
}

p.close {
	background-color: #fff;
	color: #f6821b;
}

.cocktailname {
	padding-left: 0.5rem;
}

.hinzufuegen {
	padding-bottom: 2rem;
}

.body {
	background-color: #fff;
	color: #f6821b;
}

.neublock1,
.neublock2,
.neublock3,
.neublock4,
.neublock5,
.neublock6,
.neublock7,
.neublock8,
.neublock9,
.neublock10,
.block1,
.block2,
.block3,
.block4,
.block5,
.block6,
.block7,
.block8,
.block9,
.block10 {
	background-color: #fff;
	border-style: none none dashed none !important;
	border-color: #f6821b;
	border: 2px;
	border-radius: 0px;
	padding: 0rem 0.5rem 0rem 0.5rem;
	color: #f6821b;
}

.neuerCName {
	background-color: #fff;
	border-style: solid none solid none !important;
	border-color: #f6821b;
	border: 2px;
	border-radius: 0px;
	padding: 0rem 0.5rem 0rem 0.5rem;
	color: #f6821b;
}

.mengenAbschnitt {
	border-style: none none dashed none !important;
}

#addbutton.addbutton,
#closebutton.addbutton {
	width: 7rem;
	height: 7rem;
	margin: 0rem auto;
	border-radius: 50%;
	box-shadow: 0px 5px 35px 10px rgb(0 0 0 / 50%);
}

#closebutton.addbutton {
	border: 1px solid #f6821b;
	background-color: #fff;
	color: #f6821b;
}

#addbutton.addbutton {
	border: 1px solid #fff;
	background-color: #f6821b;
	color: #fff;
}

p#addbutton.addbutton {
	font-size: 6.5rem;
}

p#closebutton.addbutton {
	font-size: 5.5rem;
}

/* Hintergrund Animation*/

html {
	background: linear-gradient(45deg, #ff0000, #ffbb40, #ffffff, #ff0000);
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}



.zutatName {
	padding-right: 1rem;
}

.neuerCName {
	margin-top: 2rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	justify-content: space-between;
}

.neuerCName,
.neublock1,
.neublock2,
.neublock3,
.neublock4,
.neublock5,
.neublock6,
.neublock7,
.neublock8,
.neublock9,
.neublock10,
.block1,
.block2,
.block3,
.block4,
.block5,
.block6,
.block7,
.block8,
.block9,
.block10 {
	display: flex;
	align-items: center;
}

p.alk {
	position: absolute;
	right: 30px;
	color: red;
	z-index: 1000;
	font-size: 25px;
	background-color: white;
	border: 1px solid white;
	border-radius: 6px;
	padding: 0px 4px;
}

.mengenAbschnitt {
	display: flex;
	justify-content: space-between;
}

.mengenTrenner {
	width: 1%;
	text-align: center;
	font-size: 3rem;
	margin-bottom: -3rem;
	margin-top: -3rem;
}

.gesamtmenge,
.restMenge,
.maxMenge {
	text-align: center;
	display: flex;
}

.maxMenge {
	padding-left: 0.5rem;
}

.restMenge {
	padding-right: 0.5rem;
}

.gesamtmenge {
	padding: 0rem 1rem;
}


.block1 {
	border-style: dashed none dashed none !important;
}

.zutatName {
	width: 35%;
}

.zutatSlider {
	width: 46%;
}

.zutatMenge {
	margin-left: auto;
	margin-right: 0;
}

.QRBlock img {
	display: flex;
	margin: auto;
	padding: 0.5rem 0rem;
}

.hinzufuegen .mengenAbschnitt {
	color: #f6821b;
	background-color: #fff;
}

.hinzufuegen .neuerCName {
	margin-top: -3px;
}

.QRBlock img {
	width: fit-content;
	height: fit-content;
	max-width: 90vw;
}