@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes scaleOutAnimation {
	0% {
		transform: scale(0.1,0.1);
	}
	100% {
		transform: scale(1,1);
	}
}


pre {
  white-space: pre-wrap;
  text-align: left;
}

button {
	border-color: rgb(var(--theme_color), 0.6);
}


input[type=text],
input[type=password],
input[type=number],
input[type=tel],
textarea,
select {
	font-size: 1em;
  padding: 2px 3px;
  margin: 2px;
  border: 2px solid green;
  outline: 1px solid white;
  border-radius: 5px;
}

select{
	border: 2px dotted rgb(var(--theme_color), 1);
	color: rgb(var(--text_color));
	background-color: rgb(var(--bg_color));
}

.fa-pen-to-square {
	color: orange;
}
.fa-trash {
	color: red;
}
.fa-plus {
	color: green;
}
.fa-cart-plus {
	color: blue;
}
.fa-check {
	color: green;
}
.fa-x {
	color: red;
}
.fa-arrow-up, .fa-arrow-down {
	color: blue;
}
.fa-gear {
	color: orange;
}
.fa-industry {
	color: rgb(50,150,150);
}
.fa-arrows-rotate {
	color: green;
}
.fa-ban {
	color: red;
}
.fa-truck-fast {
	color: rgb(var(--theme_color), 1);
}


.main{
	display: flex;
	flex-direction: column;
}


.dropdown {
	position: relative;
	display: block;
}
.dropdown-content {
	display: none;
	position: absolute;
	width: 100%;
	z-index: 101;
}
.dropdown-content-flexbox {
	display: flex;
	align-items: center;
    text-align: center;
    justify-content: center;
	width: 100%;
	/*background-color: rgb(0,0,0,0.8);*/
	/*border: 2px solid black;*/
}
.dropdown-content-flexbox-content {
	padding: 5px;
	background-color: rgb(var(--theme_color),0.6);
	border-radius: 10px;
	box-shadow: inset 0px 0px 20px 7px rgb(var(--theme_color), 0.8);
}
.dropdown-content-flexbox-content > *{
	display: block;
	padding: 5px;
	font-size: 2em;
	text-align: left;
	width: 100%;
	border-radius: 10px;
	background-color: rgb(var(--bg_color));
}
.dropdown-content-flexbox-content > *:not(:first-child){
	margin-top: 5px;
}
.edit > .dropdown-content{
	right: 0;
	width: auto;
	font-size: 0.5em;
}


#banner picture {
	position: relative;
	display: inline-block;
	min-height: 50px;
	width: 100%;
}
#banner .edit {
	position: absolute;
	right: 5px;
	bottom: 10px;
	z-index: 1;
	background-color: rgb(var(--bg_color),0.8);
	border-radius: 5px;
}
#logo picture {
	position: relative;
	display: inline-block;
	min-height: 30px;
    max-width: 80%;
    margin: auto;
}
#logo .edit {
	position: absolute;
	right: 5px;
	bottom: 10px;
	z-index: 1;
	background-color: rgb(var(--bg_color),0.8);
	border-radius: 5px;
}
.company-banner {
  object-fit: cover;
  object-position: center;
  aspect-ratio: 21 / 9;
  
  box-sizing: border-box;
  width: 100%;
  /*animation: fadeInAnimation ease 1s, scaleOutAnimation ease 0.5s;*/
}
.company-logo-wrapper{
	transform: translateY(-60%);
	margin-bottom: -6.5em;
	text-align: center;
}
.company-logo-wrapper_without-banner{
	margin-top: 20px;
    margin-bottom: -5px;
    text-align: center;
}
.company-logo {
  box-sizing: border-box;
  object-fit: contain;
  object-position: bottom;
  max-width: 100%;
/*   background-color: rgb(255,255,255,0.9); */
  padding: 5px;
/*   border: 5px solid rgb(var(--theme_color),1); */
  border-radius: 20px;
  height: 10em;
  /*animation: fadeInAnimation ease 2s, scaleOutAnimation ease 1s;*/
}


#company {
	padding: 0 10px;
	text-align: center;
	color: rgb(var(--text_color));
}
#company > * {
  margin: 10px auto;
}
#company a {
	color: rgb(var(--text_color));
}
.company-enable-button {
	white-space: normal;
}
.company-time .time-type-name {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: '.article-edit';
	grid-column-gap: 5px;
	align-items: center;
	padding: 0.2em;
	text-align: center;
}
.time-order-type {
	width: 1.5em;
	vertical-align: middle;
	margin: 0 5px;
	fill: rgb(var(--text_color));
	color: rgb(var(--text_color));
}
.company-time .time-type-note{
	font-size: 0.7em;
    font-weight: 400;
}
.company-time .time-type-name > div:first-child {
  font-size: 1.5em;
  font-weight: 700;
}
.company-time .time-type-name > div > input {
  font-size: 1em;
  font-weight: 700;
  text-align: center;
}
.company-time .time-type-name > div > button {
  font-size: 0.8em;
  margin-bottom: 4px;
}

.companys-location {
	color: rgb(var(--text_color));
	padding: 5px;
}

.companys-location h1{
	font-size: 1.5em;
}

.nearCompanys-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.nearCompanys-filter > a {
	flex-grow: 1;
	cursor: pointer;
	padding: 5px;
    margin: 5px;
    border: 2px solid black;
    border-radius: 5px;
    font-size: 1em;
    text-decoration: none;
    color: black;
}

.nearCompanys-filter > a.active {
	background-color: rgb(var(--theme_color), 1);
	color: white;
}

.nearCompanys-filter > div:hover:not(.active) {
	background-color: rgb(var(--theme_color), 0.4);
}

.nearCompany-container {
	position: relative;
	cursor: pointer;
	display: flex;
    flex-direction: column;
    justify-content: start;
    margin: 10px 0;
    padding: 10px;
/*     border-radius: 5px; */
    background-color: rgb(255,255,255,0.1);
    box-shadow: inset 0 0 20px rgb(var(--theme_color), 0.3);
    color: rgb(var(--text_color));
}
.nearCompany-container.noImage {
	padding-top: 40px;
}
.nearCompany-container .company-logo-wrapper_without-banner {
    margin: 0;
}
.nearCompany-container .company-distance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 5px;
    font-weight: 700;
    background-color: rgb(var(--bg_color), 0.8);
    box-shadow: 0 0 20px rgb(var(--theme_color), 0.3), inset 0 0 3px rgb(var(--theme_color), 0.3);
    border-radius: 0 0 0 15px;
}
.nearCompany-container .company-distance > svg {
	width:1.5em;
}

.company-container > * {
	display: inline-block;
	min-width: 70%;
	margin: 3px;
}
.company-container:not(#company-time) > div:first-child {
	font-size: 1.4em;
    font-weight: 700;
}
.company-time {
/* 	border: 2px solid black; */
	font-size: 1rem;
	border-radius: 5px;
	padding: 5px;
	margin: 5px;
	background-color: rgb(255,255,255,0.1);
	box-shadow: inset 0 0 30px rgb(var(--theme_color), 0.2);
	color: rgb(var(--text_color));
}
.company-time input[type=time],
.company-time select {
	font-size: 12px;
	padding: 0;
}
.company-table-container {
	margin: auto;
}
.company-time table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.company-time tr > * {
  padding: 2px 4px;
}
.time-type-name {
	display: inline-block;
	cursor: pointer;
}
.table-border-top {
  border-top: 1px solid black;
}

.company-order-types {
	font-size: 2em;
}

.company-delivery-details {
	font-size: 0.5em;
}

.company-description {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.company-description > * {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: '.article-edit';
	grid-column-gap: 5px;
	align-items: center;
	text-align: center;
	
	width: fit-content;
	
	padding: 10px;
	border-radius: 10px;
	background-color: rgb(255,255,255,0.2);
	box-shadow: inset 0 0 30px rgb(var(--theme_color), 0.2);
	color: rgb(var(--text_color));
}
.order-time-before {
	color: red;
	font-size: 1em;
	font-weight: 700;
}

#company-reachability {
	display: flex;
    justify-content: space-around;
}

#company-reachability > div{
	padding: 10px;
	margin: 5px;
	border-radius: 5px;
    background-color: rgb(255,255,255,0.2);
	box-shadow: inset 0 0 30px rgb(var(--theme_color), 0.2);
	color: rgb(var(--text_color));
}

#company-reachability a {
	font-size: 1.4em;
	color: rgb(var(--theme_color), 1);
}
#company-reachability > div:hover {
	box-shadow: inset 0 0 50px rgb(var(--theme_color), 0.6);
}
#company-reachability a:visited {
	color: rgb(var(--theme_color), 1);
}


.company-goto-button{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}


.control-container {
	color: rgb(var(--text_color));
	position: sticky;
	width: 100%;
	top: 0%;
	z-index: 100;
	text-align: center;
	background-color: rgb(255,255,255,0.8);
	background-image: radial-gradient(rgb(var(--theme_color), 0.2), rgb(var(--theme_color), 0.2));
}
/* .control-container > * { */
/* 	background-color: rgb(var(--theme_color),0.6); */
/* } */

.control-container-name {
	font-size: 1.8em;
	font-weight: 700;
	letter-spacing: 0.6em;
	width: 100%;
	border-bottom: 2px solid rgb(var(--theme_color), 1);
}

.from-company .control-container-name,
.at-company .control-container-name {
	letter-spacing: 0.3em;
}


.menu-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  
}
.menu-control * {
  font-size: 1.6em;
  cursor: pointer;
}
.menu-btn {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  height: 100%;
  width: 100%;
  
  background-color: transparent;
  border-width: 1px;
  border-radius: 3px;
}
.menu-day,
.product-company {
  position: relative;
  padding: 5px;
  margin: 10px 0;
  align-items: center;
/*   border: 2px solid black; */
  border-radius: 5px;
  background-color: rgb(255,255,255,0.1);
  box-shadow: inset 0 0 30px rgb(var(--theme_color), 0.2);
  color: rgb(var(--text_color));
}


#card .card-control {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scroll-behavior: auto;

  position: sticky;
  width: 100%;
  top: 0%;
  
  z-index: 2;

  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.card-control::-webkit-scrollbar {
  display: none; /*Google Chrome*/
}
.card-control > a {
  position: relative;
  height: auto;
  font-size: 1.2em;
  font-weight: 700;
  padding: 8px 25px 3px 25px;
  cursor: pointer;
}
.card-control > a.active {
  color: rgb(var(--theme_color), 1);
  border-bottom: 5px solid rgb(var(--theme_color), 1);
}

.from-company-control,
.at-company-control {
	padding: 5px;
	font-size: 1em;
	
}

.menu .dropdown-click,
.card .dropdown-click,
.article .dropdown-click {
	display: inline-block;
	text-decoration: underline;
	cursor: pointer;
}
.menu .time-type-name,
.card .time-type-name{
	font-size: 1.2em;
    font-weight: 700;
}
.article .time-type-name {
	font-size: 0.8em;
}

.menu .article-main-time .dropdown-content,
.card .article-main-time .dropdown-content,
.article .article-main-time .dropdown-content {
	width: auto;
	left: 50%;
	transform: translateX(-50%);
}

.menu .company-time,
.card .company-time,
.article .company-time {
	border: 2px solid black;
	background-color: rgb(var(--bg_color));
}

.card-type {
/* 	border: 2px solid black; */
	border-radius: 5px;
	padding: 0.5em;
	margin: 10px 0;
	background-color: rgb(255,255,255,0.1);
	box-shadow: inset 0 0 30px rgb(var(--theme_color), 0.2);
	color: rgb(var(--text_color));
}
/*.card-type .article-main > p {
	display: inline-block;
}
.card-type .article-main span button {
	padding: 4px;
	font-size: 1.3em;
	background-color: transparent;
	border-radius: 5px;
}*/


.at-company-type,
.from-company-type {
/* 	border: 2px solid black; */
	border-radius: 5px;
	padding: 0.5em;
	margin: 10px 0;
	background-color: rgb(var(--bg_color));
	box-shadow: inset 0 0 30px rgb(var(--theme_color), 0.2);
}






.article-main {
	position: relative;
	font-size: 1.2em;
	width: 100%;
}
.article-main-container {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'.article-edit';
	grid-column-gap: 5px;
	align-items: center;
	padding: 0.2em;
	text-align: center;
}
.article-main-name {
	font-size: 1.3em;
	font-weight: 700;
	text-align: center;
}
.article-main-name > a {
	color: rgb(var(--theme_color),1);
}
.article-main-time {
	display: inline-block;
}
.article-main-time.edit{
	width:100%;
}
.article-main-time-note{
	display: inline-block;
	font-size: 0.8em;
	color: rgb(var(--theme_color), 1);
}
.article-main input[type=text]{
	width: 80%;
}
.article-main select {
	width: 80%;
}

.article-main-preorder{
	font-size: 0.8em;
}


.articlePrices {
	display: grid;
    grid-template-columns: auto auto;
    grid-gap: 5px;
    font-size: 1.3em;
    font-weight: 700;
    width: fit-content;
    align-items: center;
    align-content: center;
}
.articlePrices > * {
	padding: 5px;
}
.articlePrices-edit.edit {
	font-size: 1em;
}

.articlePrices > label {
	cursor: pointer;
    border-radius: 5px;
}
.articlePrices > label:hover {
	background-color: rgb(var(--theme_color), 0.6);
}

.addArticlePricesForm {
	display: grid;
    grid-template-columns: 90px auto 100px;
    align-items: center;
    grid-gap: 5px;
}
.addArticlePricesForm input {
	width: 100%;
}


.article {
  text-align: left;
/*   font-size: initial; */
}
.article-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'article-name article-image article-edit'
    'article-description article-image article-edit'
    'article-side article-image article-edit'
    'article-price article-image article-edit';
  grid-column-gap: 5px;
  align-items: center;
  font-size: 1.2em;
  padding: 0.2em;
  border-top: 1px solid black;
  cursor: pointer;
}
.article-container.active {
	background-color: rgb(var(--theme_color),0.2);
	box-shadow: 0 0 15px rgb(var(--theme_color), 1), inset 0 0 10px rgb(var(--theme_color), 1);
}
.article-container input {
	font-size: 1em;
	width: 100%;
}
.article-container input[type=checkbox] {
	width: auto;
}
.article-name {
  grid-area: article-name;
  font-size: 1em;
  font-weight: 700;
  word-break: break-word;
  margin-right: 2px;
  text-align: left;
}
.article-name.edit{
	border-radius: 5px;
    padding: 3px;
    box-shadow: 0 0 2px 2px rgb(var(--theme_color), 1);
}
.article-name.edit > *{
	white-space: normal;
}
.article-description {
	grid-area: article-description;
  word-break: break-word;
  font-size: 0.9em;
  font-weight: 400;
}
.article-price {
  grid-area: article-price;
  font-size: 1.1em;
  color: rgb(var(--theme_color),1);
  
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  align-items: center;
  text-align: left !important;
}
.article-price label{
	width: 100%;
}
.article-price > div > span {
	padding-right: 5px;
}
.article.edit{
	grid-column: 1 / span 4;
	text-align: center;
	text-decoration: underline;
}
.sold-out {
	font-size: 0.8em;
    padding: 0px 5px;
    color: rgb(var(--alarm_color));
    border: 2px solid rgb(var(--alarm_color));
    border-radius: 100px;
}
.available {
	font-size: 0.8em;
    padding: 0px 5px;
    color: green;
    border: 2px solid green;
    border-radius: 100px;
}
.sold-out-change-button:hover {
	/*background-color: rgb(var(--theme_color), 0.4);*/
	cursor: pointer;
}
.article-container > .article-image {
	grid-area: article-image;
	position: relative;
	height: 100%;
}
.article-container .article-image img{
	max-width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}
.input-dropdown .article-image > img{
	max-width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
}
#companyArticles .article .article-image > img{
	max-width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 10px;
}
.article-wrapper .article-image > img,
.allergen-wrapper .article-image > img{
	width: 100%;
	height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.article-main-orders{
	display: flex;
    top: 0;
    right: 0;
    position: absolute;
    background-color: rgb(var(--shadow_color), 0.6);
    padding: 2px;
    border-radius: 0 10px 0 10px;
    box-shadow: 0 0 20px rgb(var(--theme_color), 0.5), inset 0 0 3px rgb(var(--theme_color), 0.5);
}
.article-main-orders > svg {
	width: 1.5em;
	color: rgb(var(--theme_color),1);
	filter: brightness(2);
}

.article-price input{
	text-align: center;
}
.article-price-calc{
	display: none;
}
.article-edit {
	grid-area: article-edit;
}
.edit{
	font-size: 1.3rem;
}
.edit > * {
	padding-right: 0;
	white-space: nowrap;
}
.edit > * > button {
	padding: 4px;
	font-size: 0.8em;
	background-color: transparent;
	border-radius: 5px;
}

.side-button, .extra-button {
	padding: 2px;
	margin-top: 3px;
	background-color: transparent;
	border-radius: 5px;
}
.input-search {
  display: inline-block;
}
.input-search > input[type=text]{
  display: block;
  width: 100%;
}
.input-dropdown {
	/*display: grid;
	grid-template-columns: 1fr auto auto auto;*/
	position: absolute;
	max-height: 300px;
	min-width: 50%;
	max-width: 95%;
	overflow: auto;
  text-align: left;
  white-space: nowrap;
  list-style-type: none;
  background-color: rgb(var(--bg_color));
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border: 2px solid black;
  border-radius: 5px;
  z-index: 101;
}
.input-dropdown > div {
	
	font-size: 1em;
	border-bottom: 1px solid black;
	padding: 5px;
	white-space: normal;
	cursor: pointer;
  background-color: rgb(var(--theme_color),0.5);
  border-right: 1px solid black;
}
.input-dropdown > .input-dropdown-article{
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	
}
.input-dropdown > div > *{
	padding: 5px;
}
.input-dropdown > div:hover {
	background-color: rgb(var(--theme_color),1);
}
.input-dropdown-price {
	font-size: 0.8em;
}
.input-dropdown-allergen {
	font-size: 0.6em;
}
.article-side {
	display: none;
  grid-area: article-side;
  font-size: 0.9em;
}
.article-side > div > div{
	display: inline-block;
}
.side-name{
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	grid-column-gap: 2px;
}
.side-name > span:last-child{
	white-space: nowrap;
}
.article-extra {
	display: none;
  grid-area: article-extra;
  font-size: 0.9em;
}
.article-extra > div > div {
	display: inline-block;
}
.extra-name{
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	grid-column-gap: 2px;
}
.extra-name > span:last-child{
	white-space: nowrap;
}
.allergen-button {
	color: rgb(var(--theme_color), 1);
	padding: 3px;
    cursor: pointer;
    font-size: 0.5em;
    border: 2px solid;
    border-radius: 100px;
}


.veggie_logo {
	display: inline-block;
    height: 1em;
    width: 1em;
	margin: 0 2px;
    padding: 0 5px;
    border-radius: 100px;
    color: yellow;
    background-color: green;
    background-size: 100%;
    background-image: url(/staticImage/Veggie.png);
}

.vegan_logo {
	display: inline-block;
    height: 1em;
    width: 1em;
	margin: 0 2px;
    padding: 0 5px;
    border-radius: 100px;
    color: green;
    background-color: yellow;
    background-size: 100%;
    background-image: url(/staticImage/Vegan.png);
}

.bio_logo {
	display: inline-block;
    height: 1em;
    width: 1em;
	margin: 0 2px;
    padding: 0 5px;
    border-radius: 100px;
    color: white;
    background-color: lightgreen;
    background-size: 100%;
    background-image: url(/staticImage/BIO.png);
}








.dynamic {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	z-index: 900;
	background-color: rgb(0,0,0,0.8);
	/*border: 2px solid black;*/
}
.dynamic-content-flexbox {
	display: flex;
	align-items: end;
    text-align: center;
    justify-content: center;
	position: absolute;
	height: 100%;
	width: 100%;
	/*border: 2px solid black;*/
}

@keyframes moveUpAnimation {
	0% {
		transform: scaleY(0.1);
	}
	100% {
		transform: scaleY(1);
	}
}

.dynamic-content {
	display: grid;
	grid-template-rows: auto 1fr auto;
	position: relative;
	height: auto;
	min-height: 40%;
	max-height: 100%;
	width: 100%;
	max-width: 600px;
	background-color: rgb(var(--bg_color));
	text-align: left;
	transform-origin: center bottom;
	animation: fadeInAnimation ease 1s, moveUpAnimation ease 0.5s;
	border-radius: 10px 10px 0 0;
}

.dynamic-content > form > div > div > input[type=submit]{
	font-size: 1.8em;
	background-color: green;
}
.dynamic-content-header {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	font-size: 1.8em;
	font-weight: 700;
	hyphens: auto;
	width: 100%;
	background-color: rgb(var(--theme_color),0.4);
	border-radius: 10px 10px 0 0;
}
.dynamic-content-header .dynamic-close-button{
	font-size: 0.6em;
	padding: 5px 15px;
	text-align: center;
	cursor: pointer;
	width: 100%;
}
.dynamic-content-header > span {
	padding: 8px;
}

.dynamic-content-header .head{
	display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
    hyphens: auto;
    padding: 5px;
}
.dynamic-content-header .head .name{
	font-weight: 700;
	text-align: center;
}

.dynamic-content-body {
	position: relative;
	overflow: auto;
	background-color: rgb(var(--bg_color));
}
.dynamic-content-body > * {
	margin: 10px 0;
	padding: 0 10px;
}
.dynamic-content-body > pre {
	font-size: 1.4em;
}
.dynamic-content-footer {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 5px;
	padding: 5px;
	
	background-color: rgb(var(--theme_color),0.4);
}
.dynamic-content-footer .article-disabled{
	display: grid;
    grid-template-columns: 1fr auto;
    
	grid-column: 1 / span 2;
	
	width: 100%;
	letter-spacing: 0.3em;
	padding: 0 10px;
	
	font-size: 1.5em;
    font-weight: 700;
    text-align: center;
}
.dynamic-content-footer > button {
	width: 100%;
	letter-spacing: 0.1em;
	padding: 0 10px;
	
	font-size: 2em;
    font-weight: 700;
    text-align: center;
	background-color: rgb(var(--theme_color),0.3);
	/*border: 3px solid rgb(var(--theme_color),0.6);*/
	border-color: rgb(var(--theme_color),0.6);
	border-radius: 10px;
	
	cursor: pointer;
}
.article-amount-button {
	color: green;
	cursor: pointer;
}
.articleGroup{
	position: relative;
	padding: 10px;
/*     border: 2px solid black; */
    border-radius: 5px;
    background-color: rgb(255,255,255,0.1);
    box-shadow: inset 0 0 30px rgb(var(--theme_color), 0.2);
    color: rgb(var(--text_color));
}
.articleGroup.edit{
	box-shadow: inset 0 0 100px rgb(var(--theme_color), 1);
}
.articleGroup-grid{
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: 5px;
	align-items: center;
}
.articleGroup > *{
	padding: 5px;
}



.articleGroup-article {
	display: block;
    cursor: pointer;
    border-radius: 5px;
}
.articleGroup-article:hover {
	background-color: rgb(var(--theme_color),0.6);
}

.articleGroup-article > div{
	display: flex;
	gap: 3px;
    align-items: center;
}

.articleGroup-submit > div {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 5px;
	padding: 5px;
	margin: -0px -15px -15px -15px;
	border-radius: 0px 0px 10px 10px;
	
	background-color: rgb(var(--theme_color),0.6);
	font-size: 1.5em;
}

.articleGroupForm {
	text-align: left;
}
.articleGroupForm-inputName {
	text-align: left;
	font-weight: 700;
}



.articleGroupArticleForm .article-name{
	display: inline-block;
	width: 60%;
}
.articleGroupArticleForm .article-price{
	display: inline-block;
	width: 35%;
}
.articleGroupArticleForm input:not(input[type="date"]){
	width: 100%;
}

.articleGroupType {
	font-size: 1.5em;
}

.articleGroupType-description > span {
	display:inline-block;
	width:32%;
	text-align:center;
}

div:has(> .articleGroupType) > button{
	width: 32.5%;
}

button.articleGroupType {
	background-color: rgb(var(--bg_color));
	border-radius: 5px;
}
button.articleGroupType:not(.active):hover {
	background-color: rgb(var(--theme_color),0.4);
}

button.articleGroupType > * {
	padding: 5px;
}

.articleGroupType.active {
	background-color: rgb(var(--theme_color),1);
}




.editOpenType .articleGroup {
	text-align: center;
}

.editOpenType .articleGroup > *:first-child {
	font-size: 1.2em;
	font-weight: 700;
}

.editOpenType .articleGroup input {
	text-align: center;
	font-size: 1em;
}
.editOpenType .articleGroup input[type=text] {
	font-size: 1.5em;
}
.editOpenType .articleGroup input[type=time] {
	width: 6rem;
}
.editOpenType .articleGroup select {
	text-align: center;
}

.editHoliday .articleGroup {
	text-align: center;
}
.editHoliday .articleGroup > *{
	font-size: 1.2em;
	font-weight: 700;
}
.editHoliday .articleGroup input {
    text-align: center;
    font-size: 1em;
}





#dayCompanys .show-all-menus,
#at-company .show-all-articles,
#from-company .show-all-articles,
#nearProducts .show-all-articles {
	display: inline-block;
	color: rgb(var(--theme_color),1);
	padding: 5px;
    cursor: pointer;
}


.dayCompanys-company,
.nearProducts-company {
	display: grid;
    grid-template-columns: 25% 1fr;
    grid-gap: 10px;
    align-items: center;
	text-align: center;
}

.dayCompanys-logo,
.nearProducts-logo {
	width: 100%;
	max-height: 100px;
	object-fit: contain;
	animation: fadeInAnimation ease 1s, scaleOutAnimation ease 0.5s;
}

#dayCompanys .company-characteristics,
#nearProducts .company-characteristics {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: self-start;
	font-size: 0.8em;
}
#dayCompanys .company-distance,
#nearProducts .company-distance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    font-weight: 700;
    background-color: rgb(var(--bg_color), 0.8);
    box-shadow: 0 0 20px rgb(var(--theme_color), 0.3), inset 0 0 3px rgb(var(--theme_color), 0.3);
    border-radius: 0 0 0 15px;
}
#dayCompanys .company-distance > svg,
#nearProducts .company-distance > svg {
	width:1.5em;
}


#nearProducts .product-control select {
	max-width: 100%;
}

.company-orders{
	display: flex;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    border-radius: 0 0 25px 0;
    background-color: rgb(var(--bg_color), 0.8);
    box-shadow: 0 0 20px rgb(var(--theme_color), 0.3), inset 0 0 3px rgb(var(--theme_color), 0.3);
}

.company-orders > svg {
	width: 3em;
	color: rgb(var(--theme_color), 1);
}

.company-orders-announcement{
	display: flex;
    font-size: 1.5em;
    justify-content: center;
}

.company-orders-announcement > svg{
	width: 2em;
    color: rgb(var(--theme_color), 1);
}




.articles {
	font-size: 1.3em;
}
.articles .article {
	display: grid;
	grid-template-columns: 1fr auto auto auto auto;
	border-bottom: 1px solid black;
}
.articles .article > * {
	padding: 5px;
}
.articles .article-company-button > i {
	position: relative;
}

.articles .article-company-button > i > div {
	position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid white;
    border-radius: 50%;
    color: blue;
    background-color: rgb(0 255 0 / 60%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#companyArticles .company-name{
    font-size: 1.1em;
    font-weight: 700;
    word-break: break-word;
}

#companyArticles .input-dropdown-name{
	font-weight: 700;
}

.company-wrapper .articleGroup {
	text-align: center;
}

.company-wrapper #restaurant-name,
.company-wrapper #restaurant-type {
	font-size: 1.4em;
}

.company-wrapper label {
	display: block;
	padding-top: 5px;
}

.company-wrapper input[type=text],
.company-wrapper input[type=password],
.company-wrapper input[type=number],
.company-wrapper input[type=tel],
.company-wrapper textarea,
.company-wrapper select {
  width: 80%;
  padding: 12px 20px;
  margin-top: 5px;
  display: inline-block;
  border: 2px solid #ccc;
  box-sizing: border-box;
  border-color: red;
  outline: 2px solid white;
  border-radius: 5px;
}





/*************************ORDERS************************************/
.order-add-button {
	display: grid;
    grid-template-columns: 1fr auto;
	cursor: pointer;
}



.order-type {
	display: flex;
	align-items: center;
	flex-direction: column;
	
	font-size: 1.8em;
}

.order-type-button {
	cursor: pointer;
	padding: 5px;
    margin: 5px;
    border: 2px solid black;
    border-radius: 5px;
    font-size: 1em;
    color: black;
}

.order-type-button.active,
.delivery_user_detail.active,
.check_delivery_address.active {
	background-color: rgb(var(--theme_color), 1);
	color: white;
}

.order-type-button:hover:not(.active),
.delivery_user_detail:hover:not(.active) {
	background-color: rgb(var(--theme_color), 0.4);
}

.order-address {
	font-size: 0.6em;
}




.order-date-time {
	display: inline-block;
    font-size: 1.8em;
    border-radius: 10px;
    box-shadow: 0px 2px 5px -1px rgb(var(--theme_color),1);
    cursor: pointer;
}

.order-time-times {
	display: flex;
	justify-content: center;
    flex-wrap: wrap;
    gap: 15px 20px;
    font-size: 1.5em;
}

.order-time-times > div {
	border: 1px solid black;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.order-time-times > div:hover {
	background-color: rgb(var(--theme_color), 0.6);
}



.cart-amount{
	color: red;
    position: absolute;
    font-size: 0.5em;
    font-weight: 700;
    top: 10%;
    left: 3%;
    width: 100%;
}

.cart-amount-value{
	animation: change-cart-amount-value 2000ms;
}

@keyframes change-cart-amount-value {
	0% {
		transform: scale(1, 1);
	}
	10%{
		transform: scale(3, 3);
	}
	15%{
		transform: scale(3.5, 3.5);
	}
	20%{
		transform: scale(3, 3);
	}
	90%{
		transform: scale(3, 3);
	}
	100% {
		transform: scale(1, 1);
	}
}

.cart_button_mobile{
	position: fixed;
    z-index: 101;
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    bottom: 10px;
    right: 10px;
    font-size: 3em;
    padding: 5px;
    background-color: rgb(var(--shadow_color), 0.6);
    border-radius: 100px;
    border: 3px solid rgb(var(--theme_color), 1);
    
    box-shadow: rgb(70 70 70) 3px 8px 15px 2px;
}

.cart_article {
	border-bottom: 1px solid black;
	
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr auto;
	grid-template-rows: 1fr auto;
	grid-template-areas:
        'cartArticleName cartArticleQuantity'
        'cartArticleName cartArticlePrice';
}
.cart_article pre {
	padding-left: 10px;
	font-size: 0.9em;
}

.cart_article_name {
	grid-area: cartArticleName;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}
.cart_article_quantity {
	grid-area: cartArticleQuantity;
	display: flex;
    align-items: center;
    justify-content: end;
}
.cart_article_price {
	grid-area: cartArticlePrice;
	text-align: right;
}
.cart_article_price > div {
	padding: 2px;
}


.cart_article_quantity_control {
	float: right;
	display: inline-grid;
    grid-template-columns: auto 1fr auto;
    outline: 1px solid black;
    border-radius: 10px;
    border:none;
}

.cart_article_quantity_control > div {
	padding: 5px 10px;
	font-weight: 700;
}

.cart_article_quantity_decrease {
	background-color: rgb(255,0,0,0.4);
	border-radius: 10px 0 0 10px;
	cursor: pointer;
}

.cart_article_quantity_number {
	padding: 5px 20px;
}

.cart_article_quantity_increase {
	background-color: lightgreen;
	border-radius: 0 10px 10px 0;
	cursor: pointer;
}


.order-date-time.edit{
	animation: add-to-cart 1000ms infinite;
}

@keyframes add-to-cart {
	0% {
		transform: scale(1, 1);
		box-shadow: rgb(255, 0, 0) 0px 2px 5px -1px;
	}
	30%{
		transform: scale(1.02, 1.02);
		box-shadow: rgb(255, 0, 0, 0.5) 0px 2px 5px -1px, rgb(0, 0, 0, 1) 3px 4px 8px 0px;
	}
	70%{
		transform: scale(1.02, 1.02);
		box-shadow: rgb(255, 0, 0, 0.5) 0px 2px 5px -1px, rgb(0, 0, 0, 1) 3px 4px 8px 0px;
	}
	100% {
		transform: scale(1, 1);
		box-shadow: rgb(255, 0, 0) 0px 2px 5px -1px;
	}
}





.cart_button {
	display: block;
}





.order_user_details{
	display:flex;
	gap:10px;
	flex-direction:column;
}

.order_user_detail{
	padding: 10px;
    font-size: 1em;
    border-radius: 10px;
    border-width: thick;
    cursor: pointer;
}

.order_user_detail.active {
	border-color: rgb(0, 255, 0, 1);
}

.order_user_detail_alert{
	display: none;
	color: red;
	font-weight: 700;
	text-align: center;
}

.order_user_detail_set{
	border: 2px solid black;
}

.add_order_user_detail,
.edit_order_user_detail,
.check_delivery_address{
	border: 5px solid rgb(var(--theme_color), 0.6);
    border-radius: 10px;
    
}

.add_order_user_detail > div:first-child,
.edit_order_user_detail > div:first-child,
.check_delivery_address > div:first-child {
	padding: 10px;
}

.add_order_user_detail label,
.edit_order_user_detail label,
.check_delivery_address label {
	display: block;
	font-size: 1em;
}

.add_order_user_detail .loginValidation,
.edit_order_user_detail .loginValidation,
.check_delivery_address .loginValidation {
	font-size: 0.8em;
}

.edit_order_user_detail_button{
	display: inline-block;
	color: rgb(var(--theme_color), 1);
	font-size:0.8em;
	padding:3px;
}

.delivery_user_details {
	display:flex;
	gap:10px;
	flex-flow: wrap;
	justify-content: center;
}

.delivery_user_detail{
	padding: 10px;
    font-size: 1em;
    border-radius: 10px;
    border-width: thick;
    cursor: pointer;
}


.footer {
	background-color: transparent;
}


/*Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .dynamic-content-flexbox {
    align-items: center;
  }
  .dynamic-content {
  	height: auto;
  	min-height: 60%;
  	max-height: 100%;
	animation: fadeInAnimation ease 1s;
  }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	main {
		display: grid;
		grid-template-columns: calc(100% - 400px) auto;
	}
	.dynamic-wrapper {
		position: fixed;
		z-index: 102;
		right: 0;
		width: 400px;
		height: calc(100% - 50px);
	}
	.dynamic {
		position: absolute;
		border-left: 5px solid rgb(var(--theme_color),1);
	}
	.dynamic-content{
		height: 100%;
		max-width: 100%;
		animation: none;
		border-radius: 0;
	}
	.dynamic-content-header {
		border-radius: 0;
	}
	body#nearCompanys{
		width: auto;
	}
	#search main,
	#nearCompanys main {
		display: block;
	}
	#nearCompanys .main {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.nearCompany-container {
		margin: 5px;
	}
	.cart_button {
		display: none;
	}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	main {
		display: grid;
		grid-template-columns: calc(100% - 500px) auto;
	}
	.dynamic-wrapper {
		width: 500px;
	}
	#nearCompanys .main {
	  grid-template-columns: 1fr 1fr 1fr;
	}
	
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 
	main {
	  grid-template-columns: calc(100% - 600px) auto;
	}
	.dynamic-wrapper {
	  width: 600px;
	}
}

/*XXXX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1600px) { 
	main {
	  grid-template-columns: calc(100% - 700px) auto;
	}
	.dynamic-wrapper {
	  width: 700px;
	}
}

/* CSS Code wenn Dark Mode aktiv */ 
@media (prefers-color-scheme: dark) {
  /*:root {
  	color: white;
  	background-color: black;
  }
  .control-container {
  	background-color: black;
  }
  .company-time {
      background-color: grey;
  }
  .company-description {
      background-color: grey;
  }
  .menu-day {
      background-color: grey;
  }
  .card-type {
      background-color: grey;
  }*/
  	input[type=text],
	input[type=password],
	input[type=number],
	input[type=tel],
	textarea,
	select,
	button {
		color: rgb(var(--text_color));
		background-color: rgb(30,30,30);
	}
  	
  
	.control-container {
		background-color: rgb(50, 50, 50, 0.8);
	}
  
	.menu .company-time,
	.card .company-time,
	.article .company-time {
		border: 2px solid black;
		background-color: rgb(50, 50, 50);
	}
	
	.input-dropdown {
		background-color: black;
	}
  	
  	.article-main-orders > svg {
		filter: unset;
	}
  	
}

@media print {

}