@charset "UTF-8";

body {
	background-color: var(--background-color);
	font-style: normal;
	position: relative;
	background-attachment: fixed;
	user-select: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.body-container {
	overflow: auto;
	background-color: transparent;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.billing-container {
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.billing-title {
	font-family: "Segoe UI";
	font-weight: bold;
	color: black;
}

.billing-text-bold {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: bold;
	color: black;
	text-align: center;
}

.billing-text {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: normal;
	color: black;
	text-align: center;
}

.billing-text-start {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: bold;
	color: black;
	text-align: start;
}

.billing-text-center {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: bold;
	color: black;
	text-align: center;
}

.billing-text-center-slim {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: bold;
	color: black;
	text-align: center;
}

.billing-text-end {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: bold;
	color: black;
	text-align: end;
}

.billing-separator {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: bold;
	color: black;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	vertical-align: middle;
}

.billing-separator-single {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: bold;
	color: black;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	vertical-align: middle;
}

.billing-separator-complex {
	font-family: "Segoe UI";
	font-style: normal;
	font-weight: bold;
	color: black;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	vertical-align: middle;
}

.billing-container-wrap {
	display: flex;
	flex-direction: row;
	justify-content: center;
	vertical-align: center;
}

.billing-container-match {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	vertical-align: center;
	align-items: center;
	align-content: center;
}

.billing-container-titles {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	vertical-align: center;
	align-items: center;
	align-content: center;
}

.billing-total {
	font-family: "Segoe UI";
	font-weight: bold;
	color: black;
}

.billing-codeqr {}

.container-recycler {
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;}

.recycler-elements-billing {
	height: auto;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.billing-footer {
	font-family: "Segoe UI";
	font-weight: bold;
	color: black;
}

  #save-pdf {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: rgba(120, 120, 120, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }

@media only screen and (max-device-width: 640px) {

	body {
		width: 100%;
		height: auto;
	}

	.body-container {
		width: 100%;
		height: auto;
		padding: 1.7rem 1rem 1rem 1rem;
	}

	.billing-container {
		width: 100%;
		max-width: 360px;
		height: auto;			
		margin: 1rem 0.5rem 1rem 0.5rem;
		padding: 2.5rem 1.5rem 1.5rem 1.5rem;		
		box-shadow: 0.1rem 0.1rem 0.1rem 0rem rgba(0, 0, 0, 0.3);
	}

	.billing-title {
		font-size: 1.6rem;
		margin: 0rem 0rem 0.5rem 0rem;
	}

	.billing-text-bold {
		width: auto;
		font-size: 1rem;
		margin: 0.1rem 0rem 0.1rem 0rem;
	}
	
	.billing-text {
		width: auto;
		font-size: 1rem;
		margin: 0.1rem 0rem 0.1rem 0rem;
	}

	.billing-text-start {
		width: 49%;
		font-size: 1rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-text-center {
		width: 18%;
		font-size: 1rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-text-center-slim {
		width: 13%;
		font-size: 1rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-text-end {
		width: 20%;
		font-size: 1rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-separator {
		width: auto;
		font-size: 1rem;
		margin: 1.5rem 0rem 0.5rem 0rem;
	}

	.billing-separator-single {
		width: auto;
		font-size: 1rem;
		margin: -0.3rem 0rem 0.3rem 0rem;
	}

	.billing-separator-complex {
		width: auto;
		font-size: 1rem;
		margin: 1.5rem 0rem 0.5rem 0rem;
	}

	.billing-container-wrap {
		width: 100%;
		height: auto;
		margin: 0.5rem 0rem 0.5rem 0rem;
	}

	.billing-container-match {
		width: 100%;
		height: auto;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-container-titles {
		width: 100%;
		height: auto;
		margin: 1.5rem 0rem 0rem 0rem;
	}

	.billing-total {
		width: auto;
		height: auto;
		font-size: 1.6rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-subfooter {
		width: 100%;
		font-size: 1rem;
		margin: 0rem 0rem 0.5rem 0.5rem;
	}

	.billing-codeqr {
		width: 8rem;
		height: 8rem;
		margin: 1rem 0rem 1rem 0rem;
	}
	
	.container-recycler {
		width: 100%;
	}
	
	.recycler-elements-billing {
		width: 100%;
	}
	
	.billing-footer {
		font-size: 1.2rem;
		margin: 1rem 0rem 1rem 0rem;
	}
}

@media only screen and (min-device-width: 640px) {

	body {
		width: 100%;
		height: auto;
	}

	.body-container {
		width: 100%;
		height: auto;
		padding: 1.7rem 1rem 1rem 1rem;
	}

	.billing-container {
		width: 90%;
		max-width: 400px;
		height: auto;
		margin: 1rem 0.5rem 1rem 0.5rem;
		padding: 2.5rem 1.5rem 1.5rem 1.5rem;
		box-shadow: 0.1rem 0.1rem 0.1rem 0rem rgba(0, 0, 0, 0.3);
	}

	.billing-title {
		font-size: 1.6rem;
		margin: 0rem 0rem 0.5rem 0rem;
	}
	
	.billing-text-bold {
		width: auto;
		font-size: 1rem;
		margin: 0.1rem 0rem 0.1rem 0rem;
	}

	.billing-text {
		width: auto;
		font-size: 1rem;
		margin: 0.1rem 0rem 0.1rem 0rem;
	}

	.billing-text-start {
		width: 47%;
		font-size: 1rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-text-center {
		width: 22%;
		font-size: 1rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-text-center-slim {
		width: 12%;
		font-size: 1rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-text-end {
		width: 19%;
		font-size: 1rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-separator {
		width: auto;
		font-size: 1rem;
		margin: 1rem 0rem 0.5rem 0rem;
	}

	.billing-separator-single {
		width: auto;
		font-size: 1rem;
		margin: -0.3rem 0rem 0.3rem 0rem;
	}

	.billing-separator-complex {
		width: auto;
		font-size: 1rem;
		margin: 1.2rem 0rem 0.5rem 0rem;
	}

	.billing-container-wrap {
		width: 100%;
		height: auto;
		margin: 0.5rem 0rem 0.5rem 0rem;
	}

	.billing-container-match {
		width: 100%;
		height: auto;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-container-titles {
		width: 100%;
		height: auto;
		margin: 1rem 0rem 0rem 0rem;
	}

	.billing-total {
		width: auto;
		height: auto;
		font-size: 1.6rem;
		margin: 0rem 0rem 0rem 0rem;
	}

	.billing-subfooter {
		width: 100%;
		font-size: 1rem;
		margin: 0rem 0rem 0.5rem 0.5rem;
	}

	.billing-codeqr {
		width: 8rem;
		height: 8rem;
		margin: 1rem 0rem 1rem 0rem;
	}
	
	.container-recycler {
		width: 100%;
	}

	.recycler-elements-billing {
		width: 100%;
	}
	
	.billing-footer {
		font-size: 1.2rem;
		margin: 1rem 0rem 1rem 0rem;
	}
}