/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
:root {
	--border-color : #DEE2E6;
}

.ml-order-container {
	width           : 100%;
	display         : flex;
	align-items     : flex-start;
	justify-content : flex-start;
	gap             : 0.5rem;
}

.ml-order-container .ml-order-form {
	width        : 70%;
	border-right : 1px solid var(--e-global-color-text);
	padding      : 0.75rem;
}

.ml-order-container .ml-order-side {
	width            : 30%;
	background-color : var(--e-global-color-primary);
	padding          : 0.75rem;
	border-radius    : 0.75rem;
	box-shadow       : rgba(0, 0, 0, 0.05) 0 0 0 1px;
}

/**
 * BUTTONS
 */
.ml-btn {
	width  : 100%;
	border : none;
}

.ml-btn.ml-add-btn {
	width  : 100%;
	height : 100%;
}

.ml-btn.ml-add-btn:disabled {
	background-color : #AAAAAA !important;
}

.ml-btn.ml-btn-close {
	background-color : #DC3545 !important;
}

.ml-btn.ml-submit-btn {
	background-color : #28A745 !important;
}

.ml-btn.ml-submit-btn:disabled {
	background-color : #AAAAAA !important;
}

/**
 * FORM ELEMENTS
 */
input {
	appearance         : textfield;
	-moz-appearance    : textfield;
	-webkit-appearance : textfield;
	outline            : 0;
	background-color   : #FFFFFF;
	border             : none;
	height             : 3rem;
}

select {
	appearance         : none;
	-moz-appearance    : none;
	-webkit-appearance : none;
	outline            : 0;
	background-color   : #FFFFFF;
	border             : none;
	height             : 3rem;
}

#ml-date,
#ml-time,
#ml-email,
#ml-name,
#ml-phone,
#ml-additional-text,
#ml-additional-info,
#ml-select-variant,
#ml-amount-unit-wrapper .ml-select-input-group {
	border        : 1px solid var(--border-color);
	border-radius : 0.5rem;
}

:not(#ml-amount-unit) > #ml-amount-unit-wrapper {
	margin-bottom : .5rem;
}

#ml-variant-container {
	flex-direction : column;
}

#ml-select-variant {
	background-image    : linear-gradient(45deg, transparent 50%, rgb(128, 128, 128) 50%), linear-gradient(135deg, rgb(128, 128, 128) 50%, transparent 50%);
	background-position : calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em);
	background-size     : 5px 5px, 5px 6px;
	background-repeat   : no-repeat;
}

#ml-select-unit {
	background-image    : linear-gradient(45deg, transparent 50%, rgb(128, 128, 128) 50%), linear-gradient(135deg, rgb(128, 128, 128) 50%, transparent 50%);
	background-position : calc(100% - 15px) calc(1em + 5px), calc(100% - 10px) calc(1em + 5px), calc(100% - 2.5em);
	background-size     : 5px 5px, 5px 6px;
	background-repeat   : no-repeat;
	padding-right       : 25px;
}

.ml-error {
	display : none;
}

.action {
	@media all and (max-width : 1023px) {
		display : none;
	}
}

.action-mobile {
	@media all and (min-width : 1024px) {
		display : none;
	}
}

.error-display {
	display      : flex;
	border-color : red !important;
	color        : red;
}

.error-display.ml-error-preptime {
	display : block;
}

.ml-input-row {
	display        : flex;
	padding-bottom : 0.5rem;
	align-items    : start;
}

.ml-input-group {
	width    : 100%;
	overflow : hidden;
	padding  : 0 5px;
}

.ml-input {
	width : 100%;
}

.ml-article-group {
	width : 100%;
}

.ml-select-input-group-col {
	display        : flex;
	flex-direction : column;
	width          : 100%;
	gap            : 0.125rem;
}

.ml-checkbox-group {
	display             : flex;
	align-items         : center;
	gap                 : 0.25rem;
	margin-bottom       : 0.75rem;
	user-select         : none;
	-moz-user-select    : none;
	-webkit-user-select : none;
	-ms-user-select     : none;
}

.ml-select-input-group {
	display       : flex;
	border        : 1px solid var(--border-color);
	border-radius : 0.5rem;
	overflow      : hidden;
	height        : fit-content;
	width         : 100%;
}

.ml-order-info {
	margin-top : 1rem;
	text-align : center;
}

#ml-select-variant,
#ml-select-type,
#ml-select-article {
	border         : 1px solid var(--border-color);
	width          : 100%;
	border-radius  : 0.5rem;
	padding-bottom : 0.5rem;
}

#ml-select-article-container,
#ml-submit-btn,
#ml-variant-container,
#ml-amount-unit {
	padding-bottom : .5rem !important;
}

.select2-container {
	height : 3rem !important;
	width  : 100% !important;
}

.select2-container .select2-selection {
	height        : 100% !important;
	width         : 100% !important;
	border        : none !important;
	border-radius : 0.5rem !important;
	padding       : 0.5rem 1rem;
}

.select2-container .select2-selection #select2-ml-select-article-container {
	height      : 100% !important;
	width       : 100% !important;
	display     : flex;
	align-items : center;
	padding     : 0 !important;
}

.select2-container .select2-selection .select2-selection__arrow {
	top       : 50% !important;
	transform : translateY(-50%);
}

.select2-dropdown {
	border : none !important;
}

.ml-checkbox {
	width  : 1rem;
	height : 1rem;
	border : 1px solid red;
}

.ml-light {
	color : var(--e-global-color-primary);
}

#ml-amount,
#ml-select-unit {
	border-radius : 0;
}

#ml-amount {
	width            : 100%;
	padding          : 0.5rem 1rem;
	border           : none;
	border-right     : 1px solid var(--border-color);
	background-color : #FFFFFF;
}

#ml-select-unit {
	background-color : #F8F9FA;
	border           : none;
	width            : auto;
}

/**
 * TABLE
 */
.ml-table-container {
	width         : 100%;
	background    : #FFFFFF;
	border-radius : 0.5rem;
	overflow      : auto;
}

.ml-table {
	overflow      : hidden;
	width         : 100%;
	background    : #FFFFFF;
	border-radius : 0.5rem;
	margin        : 0;
	border        : none !important;
}

.ml-table thead tr:first-child {
	background-color : var(--e-global-color-secondary) !important;
	color            : var(--e-global-color-accent) !important;
}

.ml-table thead tr th {
	border : none !important;
}

.ml-table tbody {
	background-color : #FFFFFF !important;
}

.ml-table tbody tr {
	background-color : #FFFFFF !important;
}

.ml-table tbody tr:nth-child(even) {
	background-color : #F2F2F2 !important;
}

.ml-table tbody tr:hover {
	background-color : #F2F2F2 !important;
}

.ml-table tbody tr td {
	border : none !important;
}

.ml-table tbody tr td a {
	color : var(--e-global-color-secondary) !important;
}

.ml-table tbody tr td a:hover {
	text-decoration : underline;
}

.success {
	color : #28A745;
}

.error {
	color : #DC3545;
}

.ml-shopping-cart-container {
	display         : flex;
	position        : relative;
	justify-content : center;
}

.ml-shopping-cart-container .ml-badge-container {
	position : relative;
}

.ml-shopping-cart-container .ml-badge-container .ml-shopping-cart-icon {
	font-size : 2rem;
	color     : var(--e-global-color-accent);
}

.ml-shopping-cart-container .ml-badge-container .ml-badge {
	position         : absolute;
	width            : 1rem;
	height           : 1rem;
	background-color : #DC3545;
	border-radius    : 100%;
	display          : flex;
	justify-content  : center;
	align-items      : center;
	color            : var(--e-global-color-primary);
	padding          : 0.75rem;
	font-size        : 0.75rem;
	bottom           : -0.5rem;
	right            : -0.5rem;
}

.ml-align-items-end {
	align-items : end;
}

@media only screen and (max-width : 992px) {
	.ml-input-row,
	.ml-order-container {
		flex-direction : column;
		width          : 100%;
	}

	.ml-input-row .ml-order-form,
	.ml-order-container .ml-order-form {
		border-right : 0;
		width        : 100%;
	}

	.ml-input-row .ml-order-side,
	.ml-order-container .ml-order-side {
		width : 100%;
	}

	.ml-table-container,
	.ml-table {
		width : 100%;
	}
}

.ml-switch-group {
	margin : 10px 0;
}

/* The switch - the box around the slider */
.switch {
	position     : relative;
	display      : inline-block;
	width        : 60px;
	height       : 34px;
	margin-right : 5px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity : 0;
	width   : 0;
	height  : 0;
}

/* The slider */
.slider {
	position           : absolute;
	cursor             : pointer;
	top                : 0;
	left               : 0;
	right              : 0;
	bottom             : 0;
	background-color   : #CCCCCC;
	-webkit-transition : .4s;
	transition         : .4s;
}

.slider:before {
	position           : absolute;
	content            : "";
	height             : 26px;
	width              : 26px;
	left               : 4px;
	bottom             : 4px;
	background-color   : white;
	-webkit-transition : .4s;
	transition         : .4s;
}

.switch > input:checked + .slider {
	background-color : #2196F3;
}

.switch > input:focus + .slider {
	box-shadow : 0 0 1px #2196F3;
}

.switch > input:checked + .slider:before {
	-webkit-transform : translateX(26px);
	-ms-transform     : translateX(26px);
	transform         : translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius : 34px;
}

.slider.round:before {
	border-radius : 50%;
}

/*# sourceMappingURL=ml-bestellformular-public.css.map */