/* ALLGEMEIN ------------------------ START */

.artikel-title h1 {
	font-size:		23px!important;
	font-weight:	bold!important;
	width: auto;
	float: left;
}

.artikel-title h2 {
	font-size:		16px!important;
	font-weight:	bold!important;
	padding-left:	7px;
	width:			100%;
}

/* ALLGEMEIN ----------------------- ENDE */

/* ARTIKEL-AREA -------------------- START */

.row-artikel {
	clear:	both;
	width:	auto;
	min-height:	20px;
	float: none;
	box-sizing: border-box!important;
}

.row-artikel:after {
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0px;
}

.artikel-listing {
	width: 100%;
	position: relative;
	float: left;
	margin-top: 20px;
}

.artikel-be-listing {
	width: 100%;
	position: relative;
	float: left;
}

.row-artikel .transition {
	transition: all 0.2s ease 0s;
}

/* ARTIKEL-AREA -------------------- ENDE */

/* FORM ---------------------------- START */

.form-control-artikel, .select-artikel, .textarea-artikel, .label-artikel {
	width: 100%;
	padding: 3px 5px;
	min-height: 30px;
	font-size: 15px;
	height:	30px;
}

.row-artikel input:checked ~ .checkmark:after {
	box-sizing: unset;
}

.row-artikel label {
	margin-bottom: 5px;
}

.container-checkbox-artikel {
	display: 					block;
	position: 					relative;
	padding-left: 				15px;
	margin-bottom: 				0px;
	cursor: 					default;
	-webkit-user-select: 		none;
	-moz-user-select: 			none;
	-ms-user-select: 			none;
	user-select: 				none;
	font-size: 					20px;
	line-height: 				30px;
}

.container-checkbox-artikel-var {
	display: 					block;
	position: 					absolute;
	padding-left: 				0px;
	/* margin-bottom: 				0px; */
	cursor: 					default;
	-webkit-user-select: 		none;
	-moz-user-select: 			none;
	-ms-user-select: 			none;
	user-select: 				none;
	font-size: 					20px;
	line-height: 				20px;
	float:						left;
	top:						28px;
	/* margin-right:				15px; */
	margin-left:				0px;
	left:						-25px;
}

.container-checkbox-artikel-var input,
.container-checkbox-artikel input {
	opacity: 					0;
	cursor: 					pointer;
}

.checkmark-var {
	position: 					absolute;
	top: 						0;
	left: 						0;
	height: 					20px;
	width: 						20px;
	background-color: 			#ccc;
	border:						1px solid #04315E;
}

.container-checkbox-artikel-var:hover input ~ .checkmark-var,
.container-checkbox-artikel:hover input ~ .checkmark {
	background-color: 			#999;
}

.container-checkbox-artikel-var input:checked ~ .checkmark-var,
.container-checkbox-artikel input:checked ~ .checkmark {
	background-color: 			#04315E;
}

.checkmark-var:after {
	content: 					"";
	position: 					absolute;
	display:					none;
}

.container-checkbox-artikel-var input:checked ~ .checkmark-var:after,
.container-checkbox-artikel input:checked ~ .checkmark:after {
	display: 					block;
}

.container-checkbox-artikel .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 30px;
	width: 30px;
	border: 1px solid #5e5e5e;
}

.container-checkbox-artikel .checkmark:after {
	left: 						9px;
	top: 						1px;
	width: 						7px;
	height: 					17px;
	border: 					solid white;
	border-width: 				0 3px 3px 0;
	-webkit-transform: 			rotate(40deg);
	-ms-transform:				rotate(40deg);
	transform: 					rotate(40deg);
} 


.container-checkbox-artikel-var .checkmark-var:after {
	left: 						5px;
	top: 						0px;
	width: 						8px;
	height: 					14px;
	border: 					solid white;
	border-width: 				0 3px 3px 0;
	-webkit-transform: 			rotate(45deg);
	-ms-transform:				rotate(45deg);
	transform: 					rotate(45deg);
} 

/* FORM ---------------------------- ENDE */


/* BTN ------------------------------ START */

.btn-area {
	width:	100%;
	position: relative;
}

.btn-area input {
	position: relative;
	float: right;
}
.btn-area a {
	position: relative;
	float: right;
	color: #000000;
}

.admin-btn-text-image {
	width:						calc(20% - 51px);
	position:					relative;
	float:						left;
	height:						30px;
	margin-right:				10px;
	border:						2px solid #000000;
	top:						0px;
	margin-bottom:				0px;
	margin-top:					0px;
}

.admin-btn-variation {
	width:						auto;
	position:					relative;
	float:						left;
	border:						2px solid #000000;
	padding:					0px 10px 0px 0px;
}

.btn-ac-default-var {
    color:						#000000;
    text-decoration:			none;
	font-size:					16px;
    font-weight:				600;
	letter-spacing:				0.5pt; 
	outline:					none;
	background-color:			#ffffff;
	width:						100%;
	line-height:				35px;
	border:						0;
	text-align:					center;
	display:					block;
	padding:					0px;
	border-radius:				0;
}

.btn-ac-default-var i {
	padding:					0px 10px;
}

.btn-ac-default-var.red {
	box-shadow:					0px 0px 10px rgba(255,0,0,1);
	color:						#ff0000;
}

.btn-ac-default-var.active {
	box-shadow:					0px 0px 10px rgba(0,0,0,0.5) inset;
	color:						#666666;
}

.btn-ac-default-var:hover,
.btn-ac-default-var:hover:not(.disabled),
.btn-ac-default-var.active:hover:not(.disabled) {
    color:						#666666;
}

div.admin-btn:has(> button.btn-ac-default-var.disabled) {
	border:						2px solid #666666;	
}

.btn-ac-default-var.disabled {
    color:						#666666;
	cursor:						not-allowed;
}

.btn-back-artikel {
	width:	auto;
	float:	right;
	background-color:	#f0f0f0;
	color:	#000000;
	margin-right: 20px;
}

.btn-erweitert {
    background-color: #f70000;
    color:  #ffffff;
    width:  12.5%;
    margin-left: 10px;
    height: 32px;
    line-height: 15px;
    top:  20px;
    position: relative;
  }
  .btn-erweitert-field {
    background-color: #f70000;
    color:  #ffffff;
    width:  15.9%;
    margin-left: 5px;
    height: 32px;
    line-height: 15px;
    top:  20px;
    position: relative;
  }

.btn-x {
	background-color: transparent;
	width: auto;
	margin-left: 10px;
	position: absolute;
	color: #ff0000; 
	text-decoration: none; 
	font-size: 22px;
	padding: 0px 0px;
	top: 22px;
	right: -25px;
}

.btn-x:hover {
	opacity: 0.7;
}



/* BTN ------------------------------ ENDE */

/* EDIT/IMG-FIELD ------------------- START */

.admin-img-artikel {
	width:						calc(25% - 22.5px);
	float:						left;
	position:					relative;
	margin:						0px 0px 30px 17px;
	height:						160px;
}

.img-edit-field-artikel {
	height:						175px;
	position:					relative;
	overflow:					hidden;
	width:						calc(100% - 2px);
	display:					inline-flex;
	border:						1px solid #666666;
	background-color:			#b9b9b9;
}

.img-edit-field-artikel > a.placeholder i {
	margin-top:					50px;
	margin-bottom:				25px;
}

.img-edit-field-artikel > a.placeholder:hover {
	background-color:			#2e2e2e;
	color:						#eeeeee;
}

.img-edit-field-artikel img {
	max-height:					198px;
	position:					relative;
	margin:						auto;
	max-width:					100%;
	vertical-align:				middle;
}

.img-edit-bar-artikel {
	width:						100%;
	height:						60px;
	line-height:				60px;
	bottom:						0;
	left:						0;
	position:					absolute;
	display:					none;
	background-color:			#333333;
	border-top:					1px solid #666666;
}

.img-edit-field:hover .img-edit-bar-artikel {
	display:					block;
}

.img-edit-bar-artikel > p,
.img-edit-bar-artikel > a {
	width:						20%;
	text-align:					center;
	float:						left;
	font-size:					26px;
	color:						#cccccc;
	display:					block;
	cursor:						default;
	margin:						0;
}

.img-edit-bar-artikel > a {
	cursor:						pointer;
}

.img-edit-bar-artikel > a[href="#"] {
	cursor:						default;
}

.img-edit-bar-artikel > a[href="#"]:hover {
	color:						#cccccc;
}

.img-edit-bar-artikel > a:hover,
.img-edit-bar-artikel > a:hover > .fa-close {
	color:						#777777!important;
}

/* EDIT/IMG-FIELD ------------------- ENDE */

/* GRID ----------------------------- START */

.grid-s-1, .grid-s-2, .grid-s-3, .grid-s-4, .grid-s-5, .grid-s-6, .grid-s-7,
.grid-s-8, .grid-s-9, .grid-s-10, .grid-s-11, .grid-s-12,
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9,
.grid-10, .grid-11, .grid-12 {
  float: left;
	padding-right: 5px;
	padding-bottom: 10px;
	margin-right:	0px;
}

.grid-1 {
	width: 8.3333333333%;
	}
	.grid-2 {
	width: 16.6666666666%;
	}
	.grid-3 {
	width: 25%;
	}
	.grid-4 {
	width: 33.3333333333%;
	}
	.grid-5 {
	width: 41.6666666666%;
	}
	.grid-6 {
	width: 50%;
	}
	.grid-7 {
	width: 58.3333333333%;
	}
	.grid-8 {
	width: 66.6666666666%;
	}
	.grid-9 {
	width: 75%;
	}
	.grid-10 {
	width: 83.3333333333%;
	}
	.grid-11 {
	width: 91.6666666666%;
	}
	.grid-12 {
	width: 100%;
	}

@media (min-width: 768px) and (max-width: 1245px) {
	.grid-1 {
		width: 19.3333333333%;
		margin-right: 0px;
		}
		.grid-2 {
		width: 22.6666666666%;
		margin-right: 0px;
		}

		.admin-btn-text-image {
			width: calc(35% - 51px);
			position: relative;
			float: left;
			height: 30px;
			margin-left: 0px;
			border: 2px solid #000000;
			top: 0px;
			margin-bottom: 5px;
			margin-top: 0px;
		}

		.btn-ac-default {
			font-size: 12px;
		}

		.btn-erweitert {
			background-color: #f70000;
			width: 18.5%;
			margin-right: 10px;
			height: 30px;
			line-height: 15px;
			top: 0px;
			position: relative;
		}

		.btn-x {
			background-color: transparent;
			width: auto;
			margin-left: 10px;
			position: relative;
			color: #ff0000; 
			text-decoration: none; 
			font-size: 17px;
			padding: 0px 0px;
			top: 25px;
		}
}


@media (min-width: 0px) and (max-width: 767px) {
	.grid-1 {
		width: 19.3333333333%;
		margin-right: 0px;
		}
		.grid-2 {
		width: 22.6666666666%;
		margin-right: 0px;
		}

		.admin-btn-text-image {
			width: calc(35% - 51px);
			position: relative;
			float: left;
			height: 30px;
			margin-left: 0px;
			border: 2px solid #000000;
			top: 0px;
			margin-bottom: 5px;
			margin-top: 0px;
		}

		.btn-ac-default {
			font-size: 12px;
		}

		.btn-erweitert {
			background-color: #f70000;
			width: 18.5%;
			margin-right: 10px;
			height: 30px;
			line-height: 15px;
			top: 0px;
			position: relative;
		}

		.btn-x {
			background-color: transparent;
			width: auto;
			margin-left: 10px;
			position: relative;
			color: #ff0000; 
			text-decoration: none; 
			font-size: 17px;
			padding: 0px 0px;
			top: 25px;
		}
}

@media screen and (max-width: 500px) {
    .grid-s-1 {
	  width: 8.3333333333%;
	}
	.grid-s-2 {
	  width: 16.6666666666%;
	}
	.grid-s-3 {
	  width: 25%;
	}
	.grid-s-4 {
	  width: 33.3333333333%;
	}
	.grid-s-5 {
	  width: 41.6666666666%;
	}
	.grid-s-6 {
	  width: 50%;
	}
	.grid-s-7 {
	  width: 58.3333333333%;
	}
	.grid-s-8 {
	  width: 66.6666666666%;
	}
	.grid-s-9 {
	  width: 75%;
	}
	.grid-s-10 {
	  width: 83.3333333333%;
	}
	.grid-s-11 {
	  width: 91.6666666666%;
	}
	.grid-s-12 {
	  width: 100%;
	}
}

  @media (min-width: 768px) and (max-width: 1245px) {
	.grid-1 {
		width: 19.3333333333%;
		margin-right: 0px;
		}
		.grid-2 {
		width: 22.6666666666%;
		margin-right: 0px;
		}

		.admin-btn-text-image {
			width: calc(35% - 51px);
			position: relative;
			float: left;
			height: 30px;
			margin-left: 0px;
			border: 2px solid #000000;
			top: 0px;
			margin-bottom: 5px;
			margin-top: 0px;
		}

		.btn-ac-default {
			font-size: 12px;
		}

		.btn-erweitert {
			background-color: #f70000;
			width: 18.5%;
			margin-right: 10px;
			height: 30px;
			line-height: 15px;
			top: 0px;
			position: relative;
		}

		.btn-x {
			background-color: transparent;
			width: auto;
			margin-left: 10px;
			position: relative;
			color: #ff0000; 
			text-decoration: none; 
			font-size: 17px;
			padding: 0px 0px;
			top: 25px;
		}
}


@media (min-width: 0px) and (max-width: 767px) {
	.grid-1 {
		width: 19.3333333333%;
		margin-right: 0px;
		}
		.grid-2 {
		width: 22.6666666666%;
		margin-right: 0px;
		}

		.admin-btn-text-image {
			width: calc(35% - 51px);
			position: relative;
			float: left;
			height: 30px;
			margin-left: 0px;
			border: 2px solid #000000;
			top: 0px;
			margin-bottom: 5px;
			margin-top: 0px;
		}

		.btn-ac-default {
			font-size: 12px;
		}

		.btn-erweitert {
			background-color: #f70000;
			width: 18.5%;
			margin-right: 10px;
			height: 30px;
			line-height: 15px;
			top: 0px;
			position: relative;
		}

		.btn-x {
			background-color: transparent;
			width: auto;
			margin-left: 10px;
			position: relative;
			color: #ff0000; 
			text-decoration: none; 
			font-size: 17px;
			padding: 0px 0px;
			top: 25px;
		}
}

@media screen and (max-width: 500px) {
	.grid-s-1 {
	  width: 8.3333333333%;
	}
	.grid-s-2 {
	  width: 16.6666666666%;
	}
	.grid-s-3 {
	  width: 25%;
	}
	.grid-s-4 {
	  width: 33.3333333333%;
	}
	.grid-s-5 {
	  width: 41.6666666666%;
	}
	.grid-s-6 {
	  width: 50%;
	}
	.grid-s-7 {
	  width: 58.3333333333%;
	}
	.grid-s-8 {
	  width: 66.6666666666%;
	}
	.grid-s-9 {
	  width: 75%;
	}
	.grid-s-10 {
	  width: 83.3333333333%;
	}
	.grid-s-11 {
	  width: 91.6666666666%;
	}
	.grid-s-12 {
	  width: 100%;
	}
}

/* GRID ----------------------------- ENDE */

*, *:before, *:after {
	box-sizing: inherit;
}

.travel-title-subitems h1 {
	margin: 0px 0px 15px 0px;
	font-size: 22px;
	width: auto;
	float: left;
}


/* CARD-HEADER ------------------- START */

.card-header {
	margin-bottom: 0;
	background-color: rgba(0,0,0,0.03);
	border-bottom: 0px solid rgba(0,0,0,0.125)!important;
	display: block;
	float: left;
	position: relative;
	width: calc(100% - 0px);
	padding: 0rem!important;
	margin-top: 10px;
}

.card-header h3 {
	font-size:                        20px!important;
	font-weight: 400!important;
	margin: 0!important;
	font-family: inherit!important;
	line-height: 1.2!important;
	color: inherit!important;
	list-style: none!important;
	float: none!important;
	position: unset!important;
  }

  .card-header ul {
	  display: flex;
	  flex-wrap: wrap;

  }
  
  .navbar {
	padding:                          0rem .2rem;
  }
  
  
  .p-2 {
	  padding:                        0rem!important;
  }
  
  .p-nav-link {
	  padding:                        8px 1rem!important;
  }

  
  .nav-pills .nav-link {
	  border-top-left-radius:         0rem;
	  border-top-right-radius:        0rem;
	  border-bottom-left-radius:      0rem;
	  border-bottom-right-radius:     0rem;
	  border-right:                   1px solid #e6e6e6;
	  color: #000;
  }


  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
	  color: #fff;
	  background-color: #e40614;
  }


  
  .card .nav {
	  display: flex;
	  flex-wrap: wrap;
	  padding-left: 0;
	  margin-bottom: 0;
	  list-style: none;
  }
  
/* CARD-HEADER ------------------- END */

/* TAB-PANE ---------------------- START */

.tab-content > .tab-pane {
	display: none;
  }
  
  .tab-content > .active {
	display: block;
  }

/* TAB-PANE --------------------- END */

.duplikate {
	margin-left: 20px;
	line-height: 12px;
	padding: 7px 10px;
	font-size: 18px;
	font-weight: 700;
	background: #fff;
	color: #000;
	border: 2px solid #000;
}

.duplikate:hover {
	background: #e8e8e8;
	box-shadow: 0px 0px 3px 1px #aeaeae;
	border: 2px solid #000;
}

.line {
	border-bottom: 1px solid #dddddd;
	margin-bottom: 20px; 
	margin-top: 5px; 
	position: relative;
	padding-bottom: 15px;
}


.wagen-artikel-title {
	overflow: hidden;
	margin-bottom: 20px;
}
.wagen-artikel-title h1 {
	float: left;
}
.wagen-artikel-title .btn {
	float: right;
}
.standort-overview {
	overflow: hidden;
	width: 100%;
	margin-bottom: 20px;
}
.standort-overview .standort-overview-title,
.standort-overview .standort-overview-standort {
	float: left;
	position: relative;
}
.standort-overview .standort-overview-title {
	font-weight: 600;
	margin-right: 20px;
}

.blocktime-select {
	position: relative;
	width: 100%;
	overflow:hidden;
}
.blocktime-select label {
	position: relative;
	float: left;
	margin-right: 10px;
	width: auto;
}
.blocktime-select select.abhol-select {
	position: relative;
	float: left;
	width: auto;
	font-size: 14px;
	padding: 3px 5px;
}

/* Accordion Start*/
.bestell-accordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 1.375em;
	font-weight: bold;
	transition: 0.4s;
}
.bestell-active, .bestell-accordion:hover {
	background-color: #ccc;
}

.bestell-accordion:before {
	content: '\25BA';
	color: #777;
	font-weight: bold;
	float: left;
	margin-right: 5px;
}

.bestell-active:before {
	content: "\25bc";
}

.bestell-panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.ingredient-item input:checked {
	color: #009320;
	font-weight: 600;
}
/* Accordion Ende */

/* weekmenu start */

.weekmenu {
	position: relative;
	width: 100%;
}
.weekmenu-header {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.weekmenu-body {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.weekmenu-day {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 10px 5px;
}
.weekmenu-dayname {
	position: relative;
	width: 150px;
	float: left;
}
.weekmenu-food-body {
	position: relative;
	width:calc(100% - 150px);
	float: left;
}
.weekmenu-food {
	position: relative;
	width:100%;
	overflow: hidden;
	padding: 5px 0px;
}
.weekmenu-food select {
	font-size: 14px;
}
.weekmenu-dish {
	position: relative;
	width: 50%;
	float: left;
}
.weekmenu-dish select {
	position: relative;
	width: calc(100% - 20px);
}
.weekmenu-garnish {
	position: relative;
	width: 25%;
	float: left;
}
.weekmenu-dessert {
	position: relative;
	width: 25%;
	float: left;
}

/* weekmenu end   */

/* porder start */
.porder {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}


.porder-table table,
.porder-table tr,
.porder-table th,
.porder-table td {
	padding: 0;
	margin: 0;
}
.porder-table table {
	margin: 0 auto;
	min-width:1000px;
}
@media screen {
	.porder-table table {
		border: 1rem solid rgba(255,255,255,1);
	}
}
.porder-table tr th,
.porder-table tr td {
	padding:5px;
}

@media print {
	.porder-table > tr > th,
	.porder-table > tr > td {
		padding:0px;
	}
	.porder-table .table-2 > tr > th,
	.porder-table .table-2 > tr > td {
		padding:2.5px;
	}
}

.porder-table td table tr th,
.porder-table td table tr td {
	 width:60px; 
	 box-sizing: border-box;
}
.porder-table td table tr th:first-child,
.porder-table td table tr td:first-child {
	 width:300px; 
}
.customer .porder-table td table tr th:first-child,
.customer .porder-table td table tr td:first-child {
	 /* width:600px;  */
	 width:600px;
	 position: relative;
	 box-sizing: border-box;
}

.customer .porder-table td table tr th:first-child div:first-child {
	text-align: left;
	font-size: 2rem;
}
@media print {
	.customer .porder-table td table tr th:first-child div:first-child {
		text-align: left;
		font-size: 1.5rem;
		line-height: 1.15em;
	}
}
.customer .porder-table td table tr th:first-child div:nth-child(2) {
	text-align: left;
	font-weight: normal;
	margin-top: 5px;
}

.porder-table .porder-dayname {
	font-weight: 700;
	font-size: 20px;
}
.porder-table .porder-daymenu {
	font-weight: 600;
	font-size: 14px;
}
.customer .porder-table .porder-daymenu {
	font-weight: 600;
	font-size: 18px;
}
.porder-daymenu-description {
	font-size: 14px;
	color: #333333;
}
.porder-table > table {
	border: 1px solid #cccccc;
	background-color: rgba(242,242,242,1);
}

.porder-table .table-2 tr.tr-bt {
	/* border-top: 1px solid #cccccc; */
	border-top: 1rem solid rgba(255,255,255,0);
}
/* .porder-table .table-2 tr:nth-child(1n + 2) {
	border-top: 1px solid #cccccc;
} */
@media print {
	.porder-table .table-2 tr.tr-bt {
		border-top: 1px solid #000000;
	}
}
.table-2-td-n1 {
	text-align: center;
}
.table-2-td-n1 input {
	width: 60px;
	box-sizing: border-box;
	float: right;
	border: 1px solid #cccccc;
}
.porder-top {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}
.porder-top-b {
	position: relative;
	width: 100%;
	overflow: hidden;
	text-align:center;
	margin: 0px 0px 20px 0px;

}
.porder-t-h {
	width: 100%;
	max-width: calc(100% - 215px);
	float: left;
}
.porder-top-b span{
	position: relative;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5em;

}
.porder-top > input {
	display: inline-block;
	float: right;
	margin: 20px 20px 10px 20px;
	background-color: green;
	color: #ffffff;
}
.porder-top > input:hover {
	background-color: rgb(33, 105, 33);
	color: #ffffff;
}
.porder-top-b > .save-btn {
	display: inline-block;
	background-color: green;
	color: #ffffff;
}
.porder-top-b > .save-btn:hover {
	background-color: rgb(33, 105, 33);
	color: #ffffff;
}

.porder-top > .logout-btn {
	background-color: #cccccc;
	color: #121212;
}
.porder-top > .logout-btn:hover {
	background-color: #dddddd;
	color: #121212;
}
.porder-top-b > .logout-btn {
	background-color: #cccccc;
	color: #121212;
}
.porder-top-b > .logout-btn:hover {
	background-color: #dddddd;
	color: #121212;
}

.porder-top-buttons {
	position:absolute;
	right:0;
	z-index: 10;
}

.porder-top-buttons .save-btn {
	background-color: green;
	color: #ffffff;
}
.porder-top-buttons .save-btn:hover {
	background-color: rgb(33, 105, 33);
	color: #ffffff;
}
.porder-top-buttons  .logout-btn {
	background-color: #cccccc;
	color: #121212;
}
.porder-top-buttons  .logout-btn:hover {
	background-color: #dddddd;
	color: #121212;
}
.porder-top-buttons  .print-btn {
	background-color: #cccccc;
	color: #121212;
}
.porder-top-buttons  .print-btn:hover {
	background-color: #dddddd;
	color: #121212;
}
.porder-top-buttons  .print-btn > img {
	width: 16px;
	height: auto;
}
.porder-top-buttons-box {
	display: flex;
	flex-direction: column;
}
.porder-top-buttons-box a{
	box-sizing: border-box;
	width:186px;
	position: relative;
	text-decoration: none;
	margin: 5px 10px;
}
.porder-top-buttons-box button {
	width: 160px;
	margin: 5px 10px;
}

@media (max-width: 1200px) {
	.porder-top-buttons {
		position: relative;
		right:auto;
	}
	.porder-top-buttons-box {
		flex-direction: row;
		justify-content: center;
	}
	.porder-top-buttons button {
		margin: 5px 5px;
	}
}

.print-header {
	position: relative;
	margin-top: 30px;
	text-align: center;
}

@media screen {
	.no-screen {
		display: none !important;
	}
}

@media print {
	.porder-top-buttons,
	.porder-top-b.top-b-2,
	.prev-week,
	.next-week {
		display: none !important;
	}
	.porder input {
		background-color: rgba(0,0,0,0);
		border:none;
	}
	.porder-table > table {
		border: none !important;
	}
	.porder-table .porder-dayname {
		margin-top: 0.05cm;
	}
	.no-print {
		display: none;
	}
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Firefox */
	input[type=number] {
		-moz-appearance: textfield;
	}
	
	@page {
		margin: 0;
	}
	
}

.table-tr-1,
.table-tr-3,
.table-tr-5 {
	background-color: #f0f0f0;
}

/* porder end   */