* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	height: 100%;
}

body {
	background-image: url("HG.jpg");
	background-size: cover;
	font-family: var(--bodyFont, 'Roboto', sans-serif);
}

.wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

iframe {
	background-color: transparent;
	resize: none;
	overflow: hidden;
	border: none;
	outline: none;

	width: 100%;
	height: 100%;
	max-width: 1250px;
}

body .reservision-logo {
	display: none;
}

@media (min-width: 481px) {
	/*iframe {
		max-height: 520px;
	}*/

    body {
        background-image: url(./HG.jpg);
        --color: #fff;
    }
    body.bright {
        backdrop-filter: brightness(2.5);
    }
    body .reservision-logo {
		display: block;
        position: fixed;
        top: 15px;
        left: 0
    }
    body .reservision-logo svg {
        width: 400px;
    }
}

.outlet-selector ul {
	width: 90vw;
	max-width: 500px;
	padding-inline: 2rem;

	& li {
		display: inline-flex;
		list-style: none;
		margin-block: 0.5rem;
		height: 36px;
		width: 100%;
		border-radius: 3px;
		overflow: hidden;

		& button {
			appearance: unset;
			border: none;
			height: 100%;
		}

		& .choose {
			background-color: var(--active, #00b1e7);
			color: #fff;
			flex: 1;
		}

		& .info {
			background-color: #fff;	
			width: 41px;
			display: flex;
			align-items: center;
			justify-content: center;

			& svg {
				width: 80%;
				height: 80%;
			}
		}
	}
}

#outletInfo {
	width: 95vw;
    max-width: 1024px;
	border-radius: 1rem;
	border: none;
	background-color: var(--dialogBackground, #abaaa9);
	&::backdrop {
		background-color: var(--backdrop, color-mix(in oklab, #2d2a28 70%, #ffffff00 30%));
	}
}

.error {
	font-family: Roboto, sans-serif;
	font-size: large;
	color: #fff;
}