@font-face {
  font-family: "vazir";
  src: url(./Vazirmatn-Medium.ttf) format("truetype");
}

:root {
	--md-outlined-text-field-container-shape: 8px;
	--md-sys-typescale-body-large: 400 1rem system-ui;
	--md-sys-color-primary: #006a6a;
	--md-outlined-text-field-label-text-color: #3f4948;
	--md-outlined-text-field-input-text-color: #161d1d;
	--md-outlined-text-field-input-text-font: "vazir";
	--md-outlined-text-field-label-text-font: "vazir";
	--md-sys-typescale-label-large-font: "vazir";
	--md-fab-label-text-size: 30px;
	--md-fab-label-text-line-height: 60px;
	--md-fab-container-height: 72px;
}

body {
	background-color: #221133;
	text-align: center;
	margin: 0px;
	font-family: "vazir";
	direction: rtl;
}

#title-bar {
	position: relative;
	width: 80%;
	height: 15%;
	transform: translateX(-12.5%);
	-ms-transform: translateX(-12.5%);
}

#app-name {
	position: absolute;
	font-size: 48px;
	color: #ffffff;
	top: 50%;
	transform: translate(50%, -50%);
	-ms-transform: translate(50%, -50%);
}

#back {
	position: absolute;
	width: 54px;
	height: 54px;
	right: 0px;
	top: 50%;
	padding: 16px;
	transform: translate(16px, -50%);
	-ms-transform: translate(16px, -50%);
}

#admin {
	position: absolute;
	width: 200px;
	height: 100%;
	left: 0px;
}

#container {
	background-color: white;
	width: 80%;
	height: 75%;
	border-radius: 64px;
	margin: 0 auto;
}

.container {
	position: relative;
	height: 100%;
	padding: 0px 64px 0px 64px;
	text-align: right;
}

.small-spacer {
	display: block;
	height: 32px;
}

.smaller-spacer {
	display: block;
	height: 16px;
}

.spacer {
	display: block;
	height: 64px;
}

.large-spacer {
	display: block;
	height: 128px;
}

.label {
	font-size: 28px;
}

.small-label {
	font-size: 20px;
}

.value-label {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 52px;
	color: #221133;
}

.value-label-hint {
	display: block;
	width: 100%;
	text-align: left;
	font-size: 20px;
	color: #887799;
	position: relative;
	top: -10px;
}

.input {
	textDirection: LTR;
	width: 50%;
}

.button {
	width: 50%;
	height: 48px;
}

.large-button {
	width: 90%;
	height: 72px;
	margin-right: 5%;
	font-size: 20px;
}

.radio-button-selected {
	width: 160px;
	height: 60px;
	margin-left: 16px;
	font-size: 20px;
}

.radio-button-unselected {
	width: 160px;
	height: 60px;
	margin-left: 16px;
	font-size: 20px;
	--md-filled-button-container-color: #aaaaaa;
}

.center-container {
	width: 90%;
	margin-right: 5%;
	text-align: center;
}

.fab {
	position: absolute;
	bottom: 72px;
	right: 72px;
}

.list {
	position: absolute;
	left: 64px;
	right: 64px;
	bottom: 64px;
	border-radius: 16px;
	border-color: #887799;
	border-width: 2px;
	border-style: outset;
	overflow: scroll;
	scrollbar-width: none;
}

.footer {
	height: 10%;
	width: 100%;
	position: absolute;
}

.footer-logo {
	position: absolute;
	top: 50%;
	transform: translate(50%, -50%);
	-ms-transform: translate(50%, -50%);
	display: inline-block;
	width: 48px;
	height: 48px;
	padding: 12px;
}

#payment-card-number {
	direction: ltr;
}

.payment-item {
	width: 100%;
	height: 112px;
	position: relative;
	border-bottom-style: dashed;
}

.payment-amount {
	position: absolute;
	top: 8px;
	right: 8px;
}

.payment-date {
	position: absolute;
	top: 8px;
	left: 8px;
}

.payment-state {
	position: absolute;
	bottom: 8px;
	right: 8px;
}

.phone-button {
	width: 170px;
	font-size: 18px;
}

.amount-button {
	width: 120px;
	font-size: 18px;
	margin-left: 8px;
}

.internet-button {
	width: 160px;
	margin-left: 12px;
	font-size: 16px;
}

#register {
	text-align: center;
}

.proxy-item {
	width: 100%;
	height: 112px;
	position: relative;
	border-bottom-style: dashed;
}

.proxy-item-code {
	position: absolute;
	top: 8px;
	right: 8px;
}

.proxy-item-amount {
	position: absolute;
	bottom: 8px;
	right: 8px;
}

.proxy-item-button {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	height: 48px;
}

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 2;
}

.overlay-box {
	position: fixed;
	width: 85%;
	right: 7.5%;
	top: 40%;
	background-color: white;
	border-radius: 32px;
}

#loading-img {
	position: fixed;
	height: 60%;
	width: 60%;
	left: 20%;
	top: 15%;
	object-fit: contain;
	
}

#overlay-button {
	width: 90%;
	height: 72px;
	font-size: 20px;
}

.invisible {
	display: none;
}

.errorSpan {
	font-size: 32px;
	color: red;
}

#payment-image {
	height: 80%;
	width: 100%;
	object-fit: contain;
}