@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	
	font-family: 'Open Sans', sans-serif;
}

.text-right {
	text-align: right !important;
}

.text-left {
	text-align: left !important;
}

.text-center {
	text-align: center !important;
}
.text-bold {
	font-weight: bold;
}

.view h1 div i.fa {
	line-height: 24px;
}

.view .content {
	padding: 1em 1em 0 1em;
}

.hidden {
	display: none;
	pointer-events: none;
}

.fa-bars {
	margin-right: 8px;
}

.progress-circle {
  transition: 0.35s stroke-dashoffset;
  transform: rotate(135deg);
  transform-origin: 50% 50%;
}

#score {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 120px;
	height: 120px;
	
	background: #f9f9f9;
	border-radius: 60px;
}

#score .score {
	display: block;
	position: absolute;
	top: 38px;
	left: 0;
	width: 120px;
	font-size: 32px;
	text-align: center;
}

#score #calendar-button {
	display: block;
	box-sizing: border-box;
	padding: 10px 0;
	position: absolute;
	font-size: 24px;
	text-align: center;
	top: 70px;
	left: 0;
	background: #fff;
	color: #000;
	
	width: 48px;
	height: 48px;
	border-radius: 24px;
}

#score .statuses i {
	overflow: hidden;
	box-sizing: border-box;
	
	position: absolute;
	text-align: center;
	margin-top: var(--p);
	top: calc((var(--i) * 25px));
	left: calc(-30px - var(--l));
	
	border-radius: 20px;
	line-height: 18px;
	width: 20px;
	height: 20px;
	font-size: 12px;
	border-bottom: 1px solid #4e4e4e;
	border-right: 1px solid #4e4e4e;
}

#score .statuses i[state=on] {
	color: #8FDC79;
}

#score .statuses i[state=off] {
	color: #d71b1b;
}

main {
	padding: 1em;
}

main h1#title {
	font-weight: normal;
	font-size: 24px;
	padding: 0;
	margin: 0;
	max-width: calc(100% - 120px);
}

main h1#title .description {
	display: inline-block;
	font-size: 15px;
	text-transform: uppercase;
}

main h1#title .weather {
	display: block;
	font-size: 12px;
	line-height: 1.8;
	margin: 1em 0;
}

main h1#title .date {
	display: inline-block;
	font-size: 14px;
	
	background: #f9f9f9;
	padding: 4px 8px;
	margin: 4px 0 2px 0;
	border-radius: 30px;
	
	vertical-align: top;
}

main h1#title .range {
	font-size: 15px;
}

main .holiday {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: 1em;
	text-align: left;
	height: 20px;
}

.fa-thermometer, .red {
	color: #DC3D34;
}

.fa-snowflake-o {
	color: #34C0DC;
}

.fa-cloud {
	color: #D4DCDA;
}

.fa-flag {
	color: #B2DCD2;
}

.fa-star {
	color: #ECCF4A;
}

.fa-thumbs-up, .blue, a, a:visited {
	color: #5AB4EC;
}

.fa-heartbeat {
	color: #EC4949;
}

.signal {
	display: block;
	font-size: 12px;
	margin-bottom: 1em;
}

.signal .progress {
	position: relative;
	display: block;
	margin-top: 0.5em;
	height: 8px;
	width: 100%;
	background: #f9f9f9;
	border-radius: 4px;
}

.signal .progress .bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: #8FDC79;
	transition: 0.35s;
}

.signal table.table {
	background: #f9f9f9;
	width: 100%;
}

.signal table.table,
.signal .progress,
.signal .progress .bar {
	border-radius: 4px;
}

.signal table.table .label {
	font-size: 20px;
	display: block;
	font-weight: bold;
	
	height: 30px;
    line-height: 30px;
}

.signal table.table .price {
	font-size: 14px;
}

.signal table.table tr td {
	width: 25%;
}

.signal table.table.fuel tr td {
	width: 20%;
}

.signal .event {
	text-align: center;
	padding: 1em 0 0 0;
	font-size: 12px;
	line-height: 2.8;
}

.signal .event .fa {
	font-size: 24px;
	display: block;
}

.operations {
	margin: 1em 0 0 0;
	display: block;
}

.operations .row {
	margin: 0 auto;
	max-width: 300px;
	display: flex;
}

.operations .row .operation {
	margin: 1em;
	flex: 1;
	text-align: center;
}

.operations .row .operation .button {
	box-sizing: border-box;
	padding-top: 19px;
	display: inline-block;
	position: relative;
	font-size: 24px;
	line-height: 64px;
	width: 64px;
	height: 64px;
	background: #f9f9f9;
	border-radius: 32px;
}

.operations .row .operation .button.bolt {
	line-height: 0;
	padding: 0;
}

.operations .row .operation .button .badge {
	box-sizing: border-box;
	background: #f00;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 12px;
	line-height: 20px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	color: #fff;
}

.operations .row .operation .button.bolt {
	color: #f9f9f9;
}

.operations .row .operation .button.bolt .badge {
	padding-top: 5px;
	background: #27B973;
	font-size: 12px;
}

.operations .row .operation .button.active {
	background: #8FDC79 !important;
	color: #f9f9f9;
}

@keyframes spin {
  0%   {transform: rotate(0deg);}
  100% {transform: rotate(359deg);}
}

.operations .row .operation .button .spinner {
	display: none;
	pointer-events: none;
	width: 96px;
    height: 96px;
    border-radius: 100%;
    position: absolute;
    top: -16px;
	left: -16px;
	
	animation: spin 5s linear infinite;
}

.operations .row .operation .button.active .spinner {
	display: block;
	box-sizing: border-box;
	border: 4px dashed #fff;
}

.events {
	box-sizing: border-box;
	padding: 8px 1em;
	position: fixed;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	height: 38px;
}

.events .fade {
	box-sizing: border-box;
	padding: 8px 1em;
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	height: 38px;
	background: linear-gradient(to right, #fff, transparent);
}

.view {
	background: #fff;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	overflow-y: scroll;
}

.view h1 {
	padding: 1em 1em 0 1em;
	margin: 0;
	font-size: 15px;
	text-transform: uppercase;
}

.view h1 div {
	display: inline-block;
	float: right;
	background: #f9f9f9;
	border-radius: 12px;
	
	width: 24px;
	height: 24px;
	
	text-align: center;
}

.view table {
	padding: 0;
	margin: 0;
	
	width: 100%;
	box-sizing: border-box;
	
	border-collapse: collapse;
}

.view table thead th {
	text-align: left;
	font-weight: normal;
	border-bottom: 1px solid #221F29;
}

.view table tbody tr:nth-child(odd) {
	background: #f9f9f906;
}

.view table tr.highlight {
	background: #fd00001f !important;
}

.view table tr td:first-child:not([colspan]) {
	padding-left: 4px;
}
.view table tr td:last-child:not([colspan]) {
	padding-right: 4px;
}

.view table td {
	padding: 2px;
	font-size: 14px;
}

.view table td[colspan] {
	border-radius: 4px 4px 0 0;
	padding: 2px 4px;
	font-size: 15px;
	background: #f9f9f9;
}

.view .date-field {
	display: flex;
}

.view .date-field input[type='number'],
.view .date-field div {
	text-align: center;
}

.view .date-field input[type='number'] {
	flex: 10;
}

.view .date-field div {
	flex: 1;
	max-width: 20px;
	min-width: 20px;
	line-height: 36px;
}

.view .price-lock {
	text-align: right;
}

.view .price-lock a {
	font-size: 12px;
	color: #69f;
	text-decoration: none;
}

.overlay, .pop {
	position: fixed;
	z-index: 1000;
}

.overlay {
	opacity: 0.8;
	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	background: #000;
}

.pop {
	background: #fff;
	box-sizing: border-box;
	
	border-radius: 8px;
	top: 65px;
	width: 90%;
	left: 50%;
	margin-left: -45%;
	
	padding: 1.5em 1em 1em 1em;
}

.pop .content p, 
.pop .content h1 {
	padding: 0;
	margin: 0;
	
	text-align: center;
}

.pop .content h1 {
	text-transform: uppercase;
	font-size: 52px;
}

.pop .content h2 {
	margin-top: 0;
}

.pop .options {
	margin: 1em 0 0.5em 0;
	text-align: center;
}

.pop .options button, .pop button, button.button {
	border: none;
	background: #7FC36C;
	color: #f9f9f9; 
	padding: 0.5em 1em;
	
	font-size: 15px;
	border-radius: 4px;
}

button.button.secondary {
	background: #787878;
}

button.button.send-primary {
	width: 258px;
	display: block;
	margin: 0 auto;
	font-size: 22px;
}

.pop .content .flex p {
	margin-bottom: 1em;
}

.settings-header  {
	padding: 1em;
}

.settings-header .settings-close, 
.settings-header .settings-who, 
.settings-header .settings-logout {
	flex: 1;
}

.settings-header .settings-who {
	padding-left: 8px;
}

.settings-header .settings-who .image, 
.settings-header .settings-who .title {
	vertical-align: top;
	display: inline-block;
	height: 39px;
}

.settings-header .settings-who .image {
	width: 39px;
	margin-right: 8px;
}

.settings-header .settings-who .image img {
	object-fit: cover;
	
	width: 39px;
	height: 39px;
	
	border-radius: 20px;
}

.settings-header .settings-who .company {
	font-size: 12px;
}

.settings-header .settings-close,
.settings-header .settings-logout {
	display: inline-block;
	font-size: 24px;
	
	min-width: 20px;
	max-width: 21px;
}

.settings-container {
	overflow-y: scroll;
	overflow-x: hidden;
	
	height: calc(100vh - 71px - 32px - 2em);
}

.settings-container::-webkit-scrollbar {
	display: none;
}

.settings-footer, .shop-footer {
	padding-top: 1em;
	text-align: center;
	border-top: 1px solid #4e4e4e;
}

fieldset {
	border: none;
	border-top: 1px solid #000;
}

fieldset legend {
	margin: 0;
	padding: 0 20px;
	text-transform: uppercase;
}

.vnum-container {
	background: #efefef;
	text-align: center;
	margin-bottom: 1em;
	padding: 6px 0;
}

.vnum-container .vnum {
	text-align: center;
	
	width: 40px;
	height: 50px;
	font-size: 18px;
	
	padding: 4px 6px;
	margin: 0 3px;
	
	border: 1px solid #cecece;
}

.vnum-container .vnum::-webkit-outer-spin-button,
.vnum-container .vnum::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

div.input-split {
	display: flex;
}

div.input-split div.input {
	flex: 1;
}

div.input-split div.input:first-child {
	margin-right: 0.5em;
}

div.input-split div.input:last-child {
	margin-left: 0.5em;
}

div.input {
	margin-bottom: 1em;
}

div.input textarea,
div.input input,
div.input select,
div.input label {
	font-size: 14px;
	display: block;
	border-radius: 4px;
}

div.input textarea,
div.input input,
div.input select {
	box-sizing: border-box;
	
	width: 100%;
	margin: 0.5em 0;
	padding: 4px 8px;
	
	border: 1px solid #cecece;
}

div.input textarea {
	resize: none;
	height: 225px;
}

div.input input,
div.input select {
	height: 26px;
	line-height: 26px;
}

.flex, .settings-header, .fueling {
	display: flex;
}

.flex .half {
	flex: 1;
	width: 50%;
}

.flex .half h3 {
	margin: 0 0 1em 0;
}

.flex table, .flex p {
	border-collapse: collapse;
	font-size: 14px;
}

.flex table td {
	padding: 2px 4px;
}

.products .product {
	padding: 1em;
	margin: 0.5em 0 0 0;
	
	border-radius: 4px;
}

.products .product:nth-child(odd) {
	background: rgba(0,0,0,0.1);
}

.products .product .add-product-button {
	min-width: 60px;
	max-width: 60px;
	font-size: 42px;
	
	text-align: left;
}

.products .product .product-remove {
	min-width: 40px;
	max-width: 40px;
	font-size: 20px;
	
	text-align: right;
}

.products .product .product-name {
	font-size: 12px;
}

.products .product .product-quantity {
	font-weight: bold;
	font-size: 19px;
}

.products .product .product-quantity .quantity {
	color: #d71b1b;
}

.products .product .add-product-button {
	align-self: center;
}

.products .payment-methods {
	margin: 1em 0;
}

.products .payment-methods .half {
	text-align: center;
	padding: 0.4em 0 0.2em 0;
	border-radius: 4px;
	line-height: 24px;
}

.products .payment-methods .half:has(> input[type=radio]:checked) {
   background: #7FC36C;
   color: #222;
   font-weight: bold;
}

.products .payment-methods input {
	display: inline-block;
	width: auto;
	vertical-align: middle;
}

.products .payment-methods label {
	vertical-align: baseline;
}

.products .products-total {
	text-align: center;
    font-size: 24px;
}

.products .products-total span {
	font-weight: bold;
}

.products .send {
	margin-top: 1em;
}

.products .send input {
	height: 55px;
    padding: 0.2em 0.5em;
    font-size: 24px;
    text-align: center;
    border-radius: 8px 8px 0 0;
    max-width: 260px;
    display: block;
    margin: 0 auto;
}

.products .send button.button {
	border-radius: 0 0 4px 4px;
}

.perk {
	margin-top: 8px;
}

.perk .nc input[type=text], 
.perk .nc input[type=number] {
	outline: none; 	
	
	margin: 0.5em 0;
	padding: 4px 8px;
	
	border: none;
	border-bottom: 1px solid #cecece;
}

.perk .nc input[type=text] {
	min-width: 220px;
}

.perk textarea {
	outline: none; 	
	
	resize: none;
	height: 60px;
	
	box-sizing: border-box;
	
	width: 100%;
	margin: 0.5em 0;
	padding: 4px 8px;
	
	border: 1px solid #cecece;
}

.fueling .presets, .fueling .history {
	flex: 1;
	height: calc(100vh - 35px - 2em);
}

.fueling .presets {
	max-width: 60px;
}

.fueling .history {
	padding-left: 1em;
}

.fueling .presets button.preset:first-child {
	margin-top: 0.5em;
}

.fueling .presets button.preset {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	border: none;
	background: #cecece;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
	
	margin: 0 0 0.5em 0;
	padding: 0;
}

hr {
	margin: 0.5em 0;
	border: none;
	border-top: 1px solid #cecece;
}

.form input {
	width: 100%;
	box-sizing: border-box;
	
	outline: none;
	border: 0;
	margin: 0.5em 0;
	
	border-bottom: 1px solid #cecece;
}

.form .total .label, .form .total .total {
	display: inline-block;
}

/* Dark mode */
body.dark, body.dark .view {
	background: #3B3648;
	color: #E9E9E9;
}

body.dark h1 .fa-bars, .gold,
body.dark fieldset legend,
body.dark .products .product .product-quantity .quantity {
	color: #FBEE5B;
}

body.dark #score, 
body.dark main h1#title .date, 
body.dark table.table, 
body.dark .progress, 
body.dark .operations .row .operation .button,
body.dark .events .list,
body.dark .view h1 div,
body.dark .pop,
body.dark .vnum-container,
body.dark .view table td[colspan] {
	background: #221F29;
}

body.dark .form input,
body.dark .form textarea,
body.dark .form select {
	color: #E9E9E9;
	background: #221F29;
	border: 1px solid #3B3648;
}

body.dark .events .fade {
	background: linear-gradient(to right, #221F29, transparent);
}

/* Force Portrait */
/* https://stackoverflow.com/questions/58732970/lock-orientation-portrait-on-vuejs-pwa-for-all-browsers */
@media screen and (min-aspect-ratio: 13/9) {
	html {
		transform: rotate(-90deg);
		transform-origin: left top;
		width: 100vh;
		overflow-x: hidden;
		position: absolute;
		top: 100%;
		left: 0;
	}
	.bw-dashboard {
		height: inherit;
	}
	
	.settings-container {
		height: calc(100vw - 71px - 32px - 2em);
	}
	
	.fueling presets, .fueling .history {
		height: calc(100vw - 35px - 2em);
	}
}
@media screen and (min-width: 1292px) {
	html {
		transform: none;
		transform-origin: none;
		width: 100%;
		overflow-x: none;
		position: relative;
	}
	.bw-dashboard {
		height: 100vh;
	}

	.settings-container {
		height: calc(100vw - 71px - 32px - 2em);
	}
	.fueling .presets, .fueling .history {
		height: calc(100vw - 35px - 2em);
	}
}