@font-face {
	font-family: "Roboto";
	src: url('/static/fonts/Roboto/Roboto-Regular.ttf')
}


    .button-container1 {
      display: flex;
      flex-wrap: wrap;

    }

    .button1 {
      margin: 5px;
    }
 


/* standard colors */
:root {
	--bg-color: #4c4c4c
	--bg-color-light: #939393
	--bg-color-dark: #353535
	
   	--accent-color: #a11919;
    --accent-color-light: #f04745;
    --accent-color-dark: #660000;

   	--text-color: #fafafa;
    --text-color-light: #ffffff;
    --text-color-dark: #bababa;

    --error-color: #ec363a;

	--menu-color: #faf9f7;
    --bw-media-color: #9e1a1a;
    --extra-color: #6c757d;
    --bw-media-color: #9e1a1a;
}

.checkbox-a {
	display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.checkbox-a:focus {
    outline: none;
}

/* The message box is shown when the user clicks on the password field */
#PWmessage {
	display:none;
	background: #f1f1f1;
	color: #000;
	position: relative;
	padding: 20px;
	margin-top: 10px;
  }
  
  #PWmessage p {
	padding: 10px 35px;
	font-size: 18px;
  }
  
  /* Add a green text color and a checkmark when the requirements are right */
  .valid {
	color: green;
  }
  
  .valid:before {
	position: relative;
	left: -35px;
	content: "\2714";
  }
  
  /* Add a red text color and an "x" icon when the requirements are wrong */
  .invalid {
	color: red;
  }
  
  .invalid:before {
	position: relative;
	left: -35px;
	content: "\2716";
  }


.button-transparent  {
	background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
	padding-bottom: 2px;
	width: 100%;
	height: 100%;
}

.button-transparent:focus {
	outline: none;
}

.span-margin-bottom {
	padding-bottom: 10px;
	height: 38px;
}

/* back to the top button */
#myBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	left: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color:  var(--bw-media-color); /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 15px; /* Some padding */
	border-radius: 15px; /* Rounded corners */
	font-size: 30px; /* Increase font size */
	opacity: 0.7;
  }
  
  #myBtn:hover {
	background-color: #555; /* Add a dark-grey background on hover */
  }

/* fonts */

.p-style {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	padding: auto auto;
	font-size: 16px;
}

.p-style-bold {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 20px;
}

.barcode-text {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 30px;
}

.barcode-text-small {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 10px;
}

/* general */

.div_content {
    width: 2% 10%;
	
}

.own-space {

    padding: 3rem 8rem;
    margin-bottom: 2rem;
  	float: left;
}

.margin-top {
	margin-top: 10%;
}

.grid-img {
    
    height: auto;
    width: auto;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
	grid-gap: 0.5rem;


}

.grid-ul {
    list-style: none;
	padding-right: 10px;
	padding-left: 10px;
	height: 100%;

}
.grid-li {

	margin-bottom: 4%;
	margin-right: 2%;
	padding-top: 5%;
	width: 100%;

}

.grid-price {

	font-weight: 700;
	/* margin: 10px 10px; */
	margin-top: 50px;
	margin-bottom: 5px;
	margin-right: 10px;

	/* box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5); */

}

.grid-gap {

	margin-top: 5px;
	width:  100%;

}

.grid-li-right {

	margin-top: 10px;
	width: 100%;
	text-align: right;

}

.grid-item {

	text-align: center;
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);
	border-radius: 3px;
}

.grid-button {

	margin-bottom: 50px;
	margin-right: 2%;
	/* padding: 1%; */
	padding-top: 5%;
	width: 100%;
}

.grid-menu {
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);
	border-radius: 3px;
	margin: 1px 0px;
	text-align: center;
	padding: 8px;
	height: 36px;	
	font-weight: 700;

}

.dropdown-1 {
	position: relative;
	margin: 7px 10px;
	text-align: right;
	padding: 4px;

}
/* admin */
.admin-customers-margin{
	margin: 15px 5%;
}

/* caterer menu */
.radio-style_cm {

	margin: 35px 35px;
	padding: 20px;
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);

}

#label-style_cm {
    font-size: 30px;
    font-weight: 500;
	width: 120px;
	height: 120px;
	padding: 20px;
	border: 1px solid #fff;
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);
	transition: all 0.3s ease-in;

}

input[type=radio]:checked + .radio-style_cm {
	border-color: 20px var(--bw-media-color);
	color: var(--bw-media-color);
	box-shadow: 0 0.30rem 0.40rem rgba(5,1,0,5);
	font-weight: 700;
	transition: all 0.3s ease-in;
}

.hidebox {
	display: none;
	
}


#label-style_cm:hover {
	transition: all 0.25s ease;
}



/* caterer standardmenu */

.grid-container-csm {
	max-width: 1500px;
	grid-gap: 0.5rem;

	
}

.grid-li-scm {
	text-align: center;
	width: 500px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border-radius: 3px;
	padding: 6px;
	margin-left: 50px;
	margin-top: 5px;
}

.grid-li-title {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border-radius: 3px;
	padding: 15px;
 	margin-left: 50px;
}


@media only screen and (min-width: 1280px) and (max-width: 1500px) {
	.grid-container-csm {
	width: 100%;
	grid-gap: 0.5rem;

	}
	
	.margin-responsive-1 {
		margin-top: 15px;
	}

	
}

.btn-csm1 {
	transform: translate(-168%, 700%);
	margin-left: 24px;
}

.btn-csm2 {
	transform: translate(-120%, 750%);
	
}
	
.btn-csm3 {
	transform: translate(-10%, 40%);
	
}

/* caterer credit */
.grid-container-cc {
	margin: 25px;
	max-width: 1600px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
	grid-template-rows: auto auto auto auto;
	grid-gap: 7rem;

}
#code {
	width: 147px;
	height: 40px;
	border-radius: 3px;
	font-size: 1em;
}

#card-cc {
	width: 720px;
}

.margin-t {
	margin-top: 200px;
}

/* caterer dispense */
.dispense-container {
    min-height: 21rem;
	padding-buttom: 5px;
    
}

.dispense-element {
	
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    margin-right: 1rem;
    margin-left: 1rem;
    text-align: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    min-height: 15rem;
    background-color: var(--text-color-light);
}

/* customer book */


.grid-container-book {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
	grid-gap: 0.5rem;


}


/* customer identification */
#ausweis 
	{
		box-shadow: 0 0.15rem 0.35resm rgba(5,1,0,5);
		width: 300px;
	}

#ausweis h2 p-style
	{
		font-family: Roboto, "Helvetica Neue", Arial, sans-serif;

	}

/* show barcode */

#show-barcode {
	width: 500px;
	margin-left: 25%;
	padding: 25px;
}

/* table */

.table-style {
	
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border-radius: 3px;
 
}

.grid-img {
    max-height: 100px;
    max-width: 200px;
    height: auto;
    width: auto;
}



.grid-sm {

	text-align: center;
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);
	border-radius: 3px;
	padding: 10px;
	width: 100%;

}


.dt-buttons {
    padding-right: 7px;
}



.card {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
	border-radius: 3px;
}

.btn-style {
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);
	border-radius: 3px;
}


#invisible hr {
	display: none;
	border: none;
}

.bwm-bg {
	background-color: var(--bw-media-color);
}


.table-own-stripes tbody tr:nth-of-type(odd) {
    background-color: var(--menu-color);
}



.dataTables_filter {
    float: right !important;
	margin-top: 15px;
}

/* kiosk */
.kiosk-barcode {
	margin-left: 0;
}

.auto-margin {
	margin: auto !important;
	
}

.btn-kiosk {
 
	width: auto;
    padding: 10px auto;
	margin:auto 30%;
	
}

.placeholder_k {
	width: 96%;
    padding: 10px auto;
	margin-left: 2%;
	
}


/* Media Queries */

@media only screen and (max-width: 1920px) and (orientation : landscape) {
	.margin-responsive-1 {
		margin-top: 15px;
	}

}

@media only screen and (max-width: 1368px) and (orientation : landscape) {
		#container-content {
		margin: auto;
		padding: 5px;
	}
	
}

@media only screen and (max-width: 1280px) and (orientation : landscape) {
	.own-space {

    	padding: 15px;
  
	}
	#container-content {
		margin: auto;
		
	}
	.grid-li {
		margin: 6px;
	
	}
	.btn-csm3 {
		transform: translate(-13%, 60%);
	
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}

	
	
}

@media only screen and (max-width: 1180px) and (orientation : landscape) {
	.grid-li-title {

		margin-top: 2px;
		margin-left: 2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 370px;
		margin: 2px 7px;
		margin-left: 2rem;
	}
	.btn-csm1 {
		transform: translate(-168%, 720%);
		margin: 0;
		margin-left: 20px;
	}

	.btn-csm3 {
		transform: translate( 85%, -660%);

	}
	
}

@media only screen and (max-width: 1138px) and (orientation : landscape) {
	.grid-li-title {

		margin-top: 2px;
		margin-left: 2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 390px;
		margin: 2px 7px;
		margin-left: 2rem;
	}
	.btn-csm1 {
		transform: translate(-168%, 700%);
		margin: 5px;
		margin-left: 22px;
	}

	.btn-csm3 {
		transform: translate( 95%, -670%);

	}
	

}


@media only screen and (max-width: 1024px) and (orientation : portrait) {

	#container-content {
		margin: auto;
		padding: auto;
	}
	.btn-csm1 {
	transform: translate(-170%, 700%);
	
	}
	.btn-csm3 {
		transform: translate(80%, -655%);
	
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 40px;
		}

	.grid-li-scm {
		text-align: center;
		width: 340px;
		margin: 2px 40px;
	}
	#card-cc {
		width: 400px;
		}
	#show-barcode {
		margin-left: 0;
		width: 500px;
		padding: 25px;
		}
	
	.margin-responsive-1 {
		margin-top: 15px;
	}
	.account-data-size {
		margin-left: 0rem;
		-ms-flex: 0 0 70%;
    	flex: 0 0 70%;
    	max-width: 70%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}

	

}
@media only screen and (max-width: 1024px) and (orientation : landscape) {
	
	.grid-li-title {

		margin-top: 2px;
		margin-left: 2rem;
		}

	.grid-li-scm {
		text-align: center;
		width: 300px;
		margin: 2px 7px;
		margin-left: 2rem;
		}
	
	
	.btn-csm1 {
		transform: translate(35%, 0%);
		margin: 7px;
	
	}
	.btn-csm3 {
		transform: translate(18%, 170%);
	
	}
	
	.margin-responsive-1 {
		margin-top: 15px;
	}
	
	.account-data-size {
		margin-left: 5rem;
		-ms-flex: 0 0 70%;
    	flex: 0 0 70%;
    	max-width: 70%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}


}


@media only screen and (max-width: 1000px) and (orientation : portrait) {
	.btn-csm3 {
		transform: translate(88%, -655%);

	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 7px;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin: 2px 7px;
	}
	#card-cc {
		width: 400px;
	}
	#show-barcode {
		margin-left: 0;
		width: 500px;
		padding: 25px;
	}
	
	
}

@media only screen and (max-width: 960px) and (orientation : landscape) {
	.container {
		margin-left: 0;

	}


	.grid-li-scm {
		text-align: center;
		width: 168px;
		margin-left: 0.5rem;
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 0.5rem;
	}

	.btn-csm1 {
		transform: translate(-10%, 0%);
		margin-top: 15px;
	
	}
	
	.btn-csm2 {
		transform: translate(15%, 0%); 
		margin-top: 15px;
		margin-right: 7px;

	}
	
	.btn-csm3 {
		transform: translate(257%, -500%);
		
	}

}

@media only screen and (max-width: 915px) and (orientation : landscape) {
	.container {
		margin-left: 0;

	}

	.grid-li-scm {
		text-align: center;
		width: 150px;
		margin-left: 0.5rem;
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 0.5rem;
	}

	.btn-csm1 {
		transform: translate(7%, 0%);
		margin-top: 15px;
	
	}
	
	.btn-csm2 {
		transform: translate(15%, 0%); 
	

	}
	
	.btn-csm3 {
		transform: translate(252%, -150%);
		
	}

}


@media only screen and (max-width: 912px) and (orientation : portrait) {
	.container {
		margin-left: 0;

	}


	.grid-li-scm {
		text-align: center;
		width: 140px;
		margin-left: 2rem;
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 2rem;
	}

	.btn-csm1 {
		transform: translate(18%, 0%);
		margin-top: 15px;
	
	}
	
	.btn-csm2 {
		transform: translate(18%, 0%); 
		margin-top: 15px;
		margin-left: 23px;

	}
	
	.btn-csm3 {
		transform: translate(263%, -650%);
		
	}
	
	.margin-responsive-1 {
		margin-top: 20px;
	}
	
	.account-data-size {
		margin-left: 9rem;
	
		-ms-flex: 0 0 100%;
    	flex: 0 0 100%;
    	max-width: 100%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}

}

@media only screen and (max-width: 896px) and (orientation : landscape) {
	.container {
		margin-left: 0;

	}


	.grid-li-scm {
		text-align: center;
		width: 150px;
		margin-left: 0.5rem;
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 0.5rem;
	}

	.btn-csm1 {
		transform: translate(7%, 0%);
		margin-top: 15px;
	
	}
	
	.btn-csm2 {
		transform: translate(15%, 0%); 
	

	}
	
	.btn-csm3 {
		transform: translate(252%, -150%);
		
	}
}

@media only screen and (max-width: 854px) and (orientation : landscape) {
	.container {
		margin-left: 0;

	}


	.grid-li-scm {
		text-align: center;
		width: 140px;
		margin-left: 0.5rem;
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 0.5rem;
	}

	.btn-csm1 {
		transform: translate(7%, 0%);
		margin-top: 15px;
	
	}
	
	.btn-csm2 {
		transform: translate(15%, 0%); 
	

	}
	
	.btn-csm3 {
		transform: translate(252%, -100%);
		
	}
}

@media only screen and (max-width: 823px) and (orientation : landscape) {
	
}



@media only screen and (max-width: 820px) and (orientation : portrait) {
	.container {
		margin-left: 0;
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 0.5rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 150px;
		margin-left: 0.5rem;
	}
	
	.btn-csm1 {
		transform: translate(-10%, 0%);
		margin-top: 15px;
	
	}
	
	.btn-csm2 {
		transform: translate(15%, -0%); 
		margin-top: 15px;
		margin-right: 7px;

	}
	
	.btn-csm3 {
		transform: translate(255%, -650%);
		
	}
	
	.margin-responsive-1 {
		margin-top: 20px;
	}
	
	.account-data-size {
		margin-left: 6rem;
	
		-ms-flex: 0 0 80%;
    	flex: 0 0 80%;
    	max-width:800%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}

}

@media only screen and (max-width: 800px) and (orientation : portrait) {
	.container {
		margin-left: 0;
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 0.5rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 150px;
		margin-left: 0.5rem;
	}
	
	.btn-csm1 {
		transform: translate(-10%, 0%);
		margin-top: 15px;
	
	}
	
	.btn-csm2 {
		transform: translate(15%, -0%); 
		margin-top: 15px;
		margin-right: 7px;

	}
	
	.btn-csm3 {
		transform: translate(255%, -650%);
		
	}
	
	.margin-responsive-1 {
		margin-top: 15px;
	}
	
	.account-data-size {
		margin-left: 4.5rem;
		-ms-flex: 0 0 100%;
    	flex: 0 0 100%;
    	max-width: 100%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}


}

@media only screen and (max-width: 786px) and (orientation : landscape) {
	.grid-li-title {

		margin-top: 5px;
		margin-left: 1.2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 150px;
		margin-left: 1.2rem;
	
	}
	
	.btn-csm1 {
		transform: translate(19%, 0%);
	
	
	}
	.btn-csm2 {
		transform: translate(5%, -10%);
		margin-top: 15px;
		margin-left: 20px;

	}
	
	.btn-csm3 {
		transform: translate(257%, -100%);

	}
	
}


@media only screen and (max-width: 768px) and (orientation : portrait) {
	.grid-li-title {

		margin-top: 5px;
		margin-left: 1.2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 150px;
		margin-left: 1.2rem;
	
	}
	
	.btn-csm1 {
		transform: translate(0%, 0%);
	
	
	}
	.btn-csm2 {
		transform: translate(5%, -10%);
		margin-top: 15px;
		margin-left: 20px;

	}
	
	.btn-csm3 {
		transform: translate(257%, -650%);

	}
	
	.account-data-size {
		margin-left: 1rem;
		-ms-flex: 0 0 85%;
    	flex: 0 0 85%;
    	max-width: 85%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}

}

@media only screen and (max-width: 745px) and (orientation : landscape) {
	.grid-li-title {

		margin-top: 2px;
		margin-left: 4rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin: 2px 7px;
		margin-left: 4rem;
	}
	.btn-csm1 {
		transform: translate(-168%, 700%);
		margin: 5px;
		margin-left: 22px;
	}
	
	.btn-csm2 {
		transform: translate(52%, 0%);
		margin-left: 20px;
	}

	.btn-csm3 {
		transform: translate(4%, -690%);

	}

}

@media only screen and (max-width: 740px) and (orientation : landscape) {
	.grid-li-title {

		margin-top: 2px;
		margin-left: 4rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin: 2px 7px;
		margin-left: 4rem;
	}
	.btn-csm1 {
		transform: translate(-168%, 700%);
		margin: 5px;
		margin-left: 22px;
	}
	
	.btn-csm2 {
		transform: translate(-120%, 710%);
		margin-left: 0;
	}

	.btn-csm3 {
		transform: translate(115%, -650%);

	}
	
	#table_groups {
		 padding-right: auto !important
	}

}

@media only screen and (max-width: 712px) and (orientation : portrait) {
	.grid-li-title {

		margin-top: 2px;
		margin-left: 2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 460px;
		margin: 2px 7px;
		margin-left: 2rem;
	}
	.btn-csm1 {
		transform: translate(-168%, 700%);
		margin: 5px;
		margin-left: 22px;
	}

	.btn-csm3 {
		transform: translate(128%, -670%);

	}
	
	.grid-container-book {
    display: grid;
    grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-gap: 0.5rem;
	}
	
	
	.margin-responsive-1 {
		margin-top: 30px;
	}
	
	.account-data-size {
		margin-left: 11rem;
	
		-ms-flex: 0 0 100%;
    	flex: 0 0 100%;
    	max-width: 100%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}
	
	
}


@media only screen and (max-width: 667px) and (orientation : landscape) {
	
}


@media only screen and (max-width: 658px) and (orientation : landscape) {
	
}


@media only screen and (max-width: 640px) and (orientation : landscape) {
	#container-content {
		margin: 0 auto;
		padding: 2px auto;
	
	}
	.grid-li-title {

		margin-top: 2px;
		margin-left: 4rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin: 2px 7px;
		margin-left: 4rem;
	}
	.btn-csm1 {
		transform: translate(-168%, 700%);
		margin: 5px;
		margin-left: 22px;
	}

	.btn-csm3 {
		transform: translate(115%, -670%);

	}
	
	.grid-container-book {
    display: grid;
    grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-gap: 0.5rem;

	}
	
	.margin-responsive-1 {
		margin-top: 25px;
	}
	



}
@media only screen and (max-width: 600px) and (orientation : portrait) {
	.grid-li-title {

		margin-top: 5px;
		margin-left: 1.2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin-left: 1.2rem;
	
	}
	
	.btn-csm1 {
		transform: translate(0%, 0%);
		margin-top: 15px;

	}
	
	.btn-csm2 {
		transform: translate(0%, -60%);
		margin-top: 40px;
		margin-left: 20px;

	}
	
	.btn-csm3 {
		transform: translate(-19%, -710%);

	}
	
	.grid-container-book {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-gap: 0.5rem;

}
	.margin-responsive-1 {
		margin-top: 30px;
	}
	
	.account-data-size {
		margin-left: 2rem;
		-ms-flex: 0 0 90%;
    	flex: 0 0 90%;
    	max-width: 90%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}

	
}

@media only screen and (max-width: 568px) and (orientation : landscape) {
		#container-content {
		margin: 0 auto;
		padding: 5.8rem;

	}
	
	#table_groups {
		 padding-right: auto !important
	}
	

}

@media only screen and (max-width: 540px) and (orientation : portrait) {
		#container-content {
		margin: 0 auto;
		padding: auto;

	}

	#table_groups {
		 padding-right: auto !important
	}
	
	.account-data-size {
		margin-left: 0rem;
	
		-ms-flex: 0 0 70%;
    	flex: 0 0 70%;
    	max-width: 70%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}
	
}

@media only screen and (max-width: 533px) and (orientation : landscape) {
		#container-content {
		margin: auto;
		padding: 4.8rem;
	}
	
	.grid-li-title {

		margin-top: 5px;
		margin-left: 3.5rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin-left: 3.5rem;
	
	}
	
	.btn-csm1 {
	transform: translate(43%, 0%);
	margin-top: 15px;
	
}
	.btn-csm2 {
	transform: translate(43%, -60%);
	margin-top: 40px;
	margin-left: 20px;

}
	
	.btn-csm3 {
		transform: translate(0%, -710%);

	}

}


@media only screen and (max-width: 480px) and (orientation : portrait) {
	#container-content {
		margin: 0 auto;
		padding: 3.1rem;

	}
	.grid-container-book {
    display: grid;
    grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-gap: 0.5rem;


}
	.account-data-size {
		margin-left: 0rem;
		-ms-flex: 0 0 75%;
    	flex: 0 0 75%;
    	max-width: 75%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}


	

}

@media only screen and (max-width: 480px) and (orientation : landscape) {
	#caterer_table {
		width: auto 50%;
	}
	#container-content {
		margin: 0 auto;
		padding: 3.1rem;

	}
}


@media only screen and (max-width: 414px) and (orientation : portrait) {
		#container-content {
		margin: 0 auto;
		padding: 16px;

	}
	.grid-li-title {

		margin-top: 5px;
		margin-left: 1.2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin-left: 1.2rem;
	
	}
	
	.btn-csm1 {
	transform: translate(0%, 0%);
	margin-top: 15px;
	
}
	.btn-csm2 {
	transform: translate(0%, -60%);
	margin-top: 40px;
	margin-left: 20px;

}
	
	.btn-csm3 {
		transform: translate(94%, -870%);

	}
	
	.grid-container-book {
    display: grid;
    grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-gap: 0.5rem;

}
	.margin-responsive-1 {
		margin-top: 30px;
	}
	
	.account-data-size {
		margin-left: 0rem;
		-ms-flex: 0 0 85%;
    	flex: 0 0 85%;
    	max-width: 85%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}


}

@media only screen and (max-width: 411px) and (orientation : portrait) {
	#container-content {
		margin: 0 auto;
		padding: 0.9rem;

	}
}

@media only screen and (max-width: 393px) and (orientation : portrait) {
	#container-content {
		margin: 0 auto;
		padding: 0.3rem;

	}
	.grid-li-title {

		margin-top: 5px;
		margin-left: 1.2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin-left: 1.2rem;
	
	}
	
	.btn-csm1 {
	transform: translate(0%, 0%);
	margin-top: 15px;
	
}
	.btn-csm2 {
	transform: translate(0%, -60%);
	margin-top: 40px;
	margin-left: 20px;

}
	
	.btn-csm3 {
		transform: translate(94%, -870%);

	}
	
}

@media only screen and (max-width: 375px) and (orientation : portrait) {
		#container-content {
		margin: 0 auto;
		padding: 0 auto;

	}
	.grid-container-book {
    display: grid;
    grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-gap: 0.5rem;

}
	.margin-responsive-1 {
		margin-top: 30px;
	}
}


@media only screen and (max-width: 360px) and (orientation : portrait) {
		#container-content {
		margin: 0 auto;
		padding: 1px;

	}
	.grid-li-title {

		margin-top: 5px;
		margin-left: 1.2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin-left: 1.2rem;
	
	}
	.btn-csm1 {
		transform: translate(11%, 0%);
		margin-top: 15px;
		margin-right: 0;
		margin-left: 15px;
}
	
	.btn-csm3 {
		transform: translate(93%, -870%);

	}
	
	.account-data-size {
		margin-left: 0rem;
		-ms-flex: 0 0 80%;
    	flex: 0 0 80%;
    	max-width: 80%
	}
	
	.margin-responsive-2 {
		margin-right: 3px;
	}
	

}

@media only screen and (max-width: 320px) and (orientation : portrait) {
		#container-content {
		margin: 0 auto;
		padding: 1px;

	}
	.grid-li-title {

		margin-top: 5px;
		margin-left: 1.2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin-left: 1.2rem;
	
	}
	
	.btn-csm1 {
	transform: translate(0%, 0%);
	margin-top: 15px;
	
}
	.btn-csm2 {
	transform: translate(0%, -60%);
	margin-top: 40px;
	margin-left: 20px;

}
	
	.btn-csm3 {
		transform: translate(94%, -870%);

	}
	
	
	#table_groups {
		 padding: 0;
	}
	
}

@media only screen and (max-width: 320px) and (orientation : landscape) {
	.grid-li-title {

		margin-top: 5px;
		margin-left: 1.2rem;
	}

	.grid-li-scm {
		text-align: center;
		width: 400px;
		margin-left: 1.2rem;
	
	}
	
	.btn-csm1 {
	transform: translate(0%, 0%);
	margin-top: 15px;
	
}
	.btn-csm2 {
	transform: translate(0%, -60%);
	margin-top: 40px;
	margin-left: 20px;

}
	
	.btn-csm3 {
		transform: translate(94%, -870%);

	}
		
	
}

@media only screen and (max-width: 280px) and (orientation : portrait) {

}

@media only screen and (max-width: 240px) and (orientation : portrait) {
	
}