@charset "UTF-8";

:root{
	--secondary-color-dark: #bdb822;
}

.mt0{
	margin-top: 0;
}
.mt1{
	margin-top: 1rem !important;
}
.mt2{
	margin-top: 2rem;
}
.mt4{
	margin-top: 4rem;
}
.mtn1{
	margin-top: -1rem;
}
.mb0{
	margin-bottom: 0 !important;
}
.mb1{
	margin-bottom: 1rem;
}
.mb2{
	margin-bottom: 2rem;
}
.full-width{
	width: 100%;
}
.android .show-on-ios{
	display: none !important;
}
.material-icons{
	font-variation-settings: 'FILL' 1;
}
.material-icons.giant{
	font-size: 3rem;
	color: var(--disabled-color);
}
.btn-outline.secondary,
.segmented-control input:checked+label ,
.input-field.highlight .select-controller {
	color: var(--secondary-color-dark);
	border-color: var(--secondary-color-dark);
}
.input-field.highlight input[type=email],
.input-field.highlight input[type=number],
.input-field.highlight input[type=password],
.input-field.highlight input[type=search],
.input-field.highlight input[type=tel],
.input-field.highlight input[type=text],
.input-field.highlight input[type=url],
.input-field.highlight textarea {
	border-color: var(--secondary-color-dark);
}
.input-field.highlight input[type=email]~label,
.input-field.highlight input[type=number]~label,
.input-field.highlight input[type=password]~label,
.input-field.highlight input[type=search]~label,
.input-field.highlight input[type=tel]~label,
.input-field.highlight input[type=text]~label,
.input-field.highlight input[type=url]~label,
.input-field.highlight select~label,
.input-field.highlight textarea~label{
	color: var(--secondary-color-dark);
}
.btn-outline.delete{
	border-color: var(--error-color);
	color: var(--error-color);
}
dl.horizontal dt{
	display: inline-block;
	width: 30%;
	font-weight: 600;
	vertical-align: middle;
}
dl.horizontal dd{
	margin-left: 0;
	margin-bottom: 8px;
	display: inline-block;
	width: 67%;
}

#welcome-screen{
	height: 85vh;
	align-items: center;
	justify-content: center;
}
#welcome-screen h1{
	margin-bottom: 5rem;
}
#welcome-screen h1 .btn-icon{
	font-size: 2rem;
	vertical-align: middle;
}
.otp-field .inputs input {
	font-size: 1.6rem;
	max-width: 3rem;
	border-radius: 0.7rem;
}

@media (max-width: 1023px){
	.navigation.top{
		box-shadow: none;
	}
}
.navigation .page-title{
	font-size: 1.2rem;
	height: 40px;
	line-height: 40px;
	margin-left: 1rem;
	font-weight: 600;
}
.navigation.top .page-title{
	display: none;
}
.navigation .silver-price img{
	width: 1.6rem;
	vertical-align: sub;
}
.navigation .bottom-nav{
	transform: translate3d(0, 0, 0);
}
.navigation .bottom-nav > li > a:not(.active) .icon{
	font-variation-settings: 'FILL' 0;
}
header h1.page-title{
	margin-top: 3rem;
	font-size: 2.1rem;
	font-weight: 600;
	margin-bottom: 0;
}
header h1.page-title .btn-icon{
	font-size: 1.5rem;
	color: var(--secondary-color-dark);
	margin-left: 0.8rem;
	vertical-align: text-top;
}
header h3{
	font-size: 1.3rem;
	color: var(--text-color-lighter);
	display: flex;
	justify-content: space-between;
}
@media (min-width: 1024px){
	.navigation{
		background: var(--primary-color);
		color: var(--on-primary-color);
	}
	.navigation .desktop-nav>li>a:not(.btn):not(.btn-flat):not(.btn-outline){
		color: var(--on-primary-color);
	}
	.navigation .desktop-nav .btn-outline{
		border-color: var(--on-primary-color);
		color: var(--on-primary-color);
	}
	header h1.page-title{
		margin-top: 6rem;
	}
	header h1.page-title .fab{
		width: auto;
		height: auto;
		line-height: 1.3;
		padding: 0.6rem 1.4rem;
		font-weight: 500;
		font-size: 1.3rem;
		margin-top: -0.6rem;
	}
}
main{
	margin-bottom: 8rem
}
@media (min-width: 1024px){
	main{
		margin-bottom: 2rem
	}
}
@media (max-width: 1023px){
	.fab{
		bottom: 6rem;
	}
}
.fab.extended:not(.static){
	font-size: 1.2rem;
	padding: 1rem 3rem;
	width: 80%;
	max-width: 400px;
}

#profile-picture img{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 1.5rem;
}
.token-color{
	margin-bottom: 1.5rem !important;
}
.token-color label{
	padding: 1.5rem;
	border-radius: var(--border-radius) !important;
	margin-right: 0.7rem;
	opacity: 0.3;
}
.token-color input:checked + label{
	opacity: 1;
}
.token-list li{
	cursor: pointer;
	padding-left: 0.5rem;
}
.token-list li.reshopping{
	background: rgb(255 0 0 / 10%);
}
.token-list li .token{
	font-size: 2rem;
}
.token-list li:after{
	left: 0 !important;
}
.token-list li .content{
	overflow: hidden;
	border: none;
}
.token-list .chips{
	margin-top: 0.5rem;
}
.token-list .left-assist{
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.token-list .has-emerald{
	font-size: 2rem;
	background: var(--success-color);
	color: var(--on-secondary-color);
	border-radius: 50%;
	padding: 0.2rem;
	width: 2.4rem;
}
#rebilling-counter{
	position: absolute;
	top: -2.4rem;
	padding: 0.2rem 1.5rem 0.2rem 1rem;
	border: 1px solid var(--warning-color);
	border-radius: var(--border-radius);
	color: var(--warning-color);
	max-width: calc(100% - 1rem);
	overflow-x: auto;
	white-space: nowrap;
}
#rebilling-counter .material-icons{
	margin-right: 0.5rem;
}

.token{
	border-radius: var(--border-radius);
	padding: 0 0.7rem;
	color: #FFF;
}
.card.off-button{
	padding-bottom: 1rem;
}
.card.off-button .progress.linear{
	width: calc(100% + 1rem);
	left: 3%;
	border-radius: 1rem 1rem 0 0;
	margin: -1rem;
}
.card.off-button .list{
	margin: -1rem -1.5rem;
}
.card.off-button .list li{
	padding: 0.8rem 1.5rem;
}
.card.off-button .list li:last-child:after{
	display: none;
}
.card.off-button .btn-cont{
	position: absolute;
	width: 100%;
	text-align: center;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
}
#products h4{
	font-size: 1.1rem;
}
#products h4 small{
	font-weight: 400;
}

.list.dyno-content{
	margin-top: 2rem;
}
.list.dyno-content li.item:last-child{
	padding-bottom: 2rem;
}
.list.dyno-content ~ .add-dyno{
	left: 50%;
	transform: translate(-50%, -50%);
}
.list.dyno-content .summary{
	margin-top: 0.3rem;
	margin-bottom: 0;
}
.payment-dir-cont{
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.payment-dir-cont .direction-toggle{
	color: var(--surface-color);
	transition: all 0.2s ease-out;
}
.payment-dir-cont .direction-toggle.receiving{
	border: 1px solid var(--success-color);
	color: var(--success-color);
}
.payment-dir-cont .direction-toggle.sending{
	border: 1px solid var(--error-color);
	color: var(--error-color);
	transform: rotate(180deg);
}
.payment-dir-cont .input-field{
	flex-grow: 1;
}

#cash-in-hand{
	background: var(--divider-color-lighter);
}
#cash-in-hand .dropdown-content{
	border-top-color: var(--divider-color);
}
.tab-container.edged{
	padding-top: 0;
}
.payment-dual-status{
	display: flex;
	float: right;
}
.payment-dual-status span,
.payment-dual-status button{
	font-size: 1.5rem;
	border: 2px solid;
	padding: 0.2rem 0.4rem;
	width: auto;
	background: transparent;
}
.payment-dual-status span:first-child,
.payment-dual-status button:first-child{
	border-radius: 1rem 0 0 1rem;
	border-right-color: var(--text-color);
}
.payment-dual-status span:last-child{
	border-radius: 0 1rem 1rem 0;
	border-left: none;
}

@media (max-width: 1023px){
	#new-ticket:not(.active) .head {
		border-radius: 20px 0px 0px 20px;
		transform: translate(0, -6rem);
	}
	.apple #new-ticket:not(.active) .head {
		background: var(--primary-color);
		display: inline-flex;
		float: right;
		color: #FFF;
	}
}
#ticket-list li{
	cursor: pointer;
	padding: 0.8rem 1rem;
}
#ticket-list li.active{
	background: var(--secondary-color-light);
}
#ticket-convo:not(.sidesheet):not(.active){
	transform: translate(-50%, 100%);
}
.ticket-convo{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	padding: 0 !important;
	background: var(--disabled-bg) !important;
}
.ticket-convo ul{
	width: 100%;
	overflow-y: auto;
}
.ticket-convo .message{
	padding: 1rem;
}
.ticket-convo .dp{
	display: inline-block;
	width: 50px;
	margin-right: 10px;
}
.ticket-convo .dp span{
	display: block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #CCC;
	border-radius: 50%;
	color: #FFF;
	font-size: 1.8rem;
}
.ticket-convo .message .content{
	display: inline-block;
	max-width: calc(100% - 70px);
	background: var(--surface-color-2dp);
	border-radius: 10px;
	overflow: hidden;
	vertical-align: top;
}
.ticket-convo .message .content p{
	padding: 1rem;
	margin: 0;
}
.ticket-convo .message .content small{
	font-size: 70%;
	padding-left: 0.5rem;
}
.ticket-convo .reply-box{
	width: 100%;
	margin-top: auto;
	padding: 1rem;
	background: var(--surface-color-2dp);
	box-shadow: 0 -1px 10px rgb(0 0 0 / 25%);
}
.ticket-convo .attachment{
	background: #9da2b9;
	display: block;
	color: #FFF !important;
	padding: 0.4rem 1rem !important;
	border: 0 !important;
}
.dark .ticket-convo .attachment{
	background: #414658;
	color: #e1e1e1 !important;
}
.ticket-convo .system{
	text-align: center;
	padding: 1rem;
}
.ticket-convo .system span{
	background: var(--disabled-color-lighter);
	padding: 0.4rem 1rem;
	display: inline-block;
	border-radius: 10px;
}
@media (min-width: 1024px){
	.ticket-convo .reply-box{
		padding-bottom: 4rem;
	}
}

#qr-input{
	opacity: 0;
}
.text-banner.neutral{
	background: var(--divider-color);
	color: var(--text-color);
}