@font-face {
    font-family: 'SnvDReg';
    src: url('../Fonts/SnvD-Regu.woff2') format('woff2'),
        url('../Fonts/SnvD-Regu.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SnvDRegCon';
    src: url('../Fonts/SnvD-ReguCond.woff2') format('woff2'),
        url('../Fonts/SnvD-ReguCond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SnvDExtCon';
    src: url('../Fonts/SnvD-ExtrCond.woff2') format('woff2'),
        url('../Fonts/SnvD-ExtrCond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
	--blue-sign-color: #3365B5;
	--green-sign-color: #367D4C;
}

html, body {
	overflow: hidden;
	font-family: 'SnvDReg';
}

.narrow {
	font-family: 'SnvDRegCon';
}

*:not(input):not(textarea) {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	cursor: default;
}

body .modal-container {
	background-color: transparent;
	overflow-y: auto;
	width: 100%;
	height: 100%;
}

body .modal-container view-controller.visible {
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(1.6rem);
	backdrop-filter: blur(1.6rem);
	margin-top: 3rem;
	margin-bottom: 3rem;
}

body navigation-bar {
	background: transparent;
}

body navigation-bar bar-button-item, button.navigation {
	padding: 0.4rem;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: calc(var(--navigation-bar-size) * 0.6);
	width: calc(var(--navigation-bar-size) * 0.6 * 4.05);
	box-sizing: border-box;
	color: #FFFFFF;
	text-align: center;
	line-height: calc(var(--navigation-bar-size) * 0.4);
	font-size: 1.3rem;
	cursor: pointer;
	overflow: visible;
	border-radius: 0;
	font-family: 'SnvDReg';
}

body navigation-bar bar-button-item:hover, button.navigation:hover {
	color: #F2F263;
	background-color: transparent;
}

body left-bar-area bar-button-item, button.navigation.left {
	background-image: url('/App/FrouMonk/Resources/Images/Blue Button (Left).png');
	padding-left: 2rem;
}

body left-bar-area bar-button-item.green, button.navigation.left.green {
	background-image: url('/App/FrouMonk/Resources/Images/Green Button (Left).png');
}

body left-bar-area bar-button-item:hover, button.navigation.left:hover {
	background-image: url('/App/FrouMonk/Resources/Images/Blue Button (Left, Pressed).png');
}

body left-bar-area bar-button-item.green:hover, button.navigation.left.green:hover {
	background-image: url('/App/FrouMonk/Resources/Images/Green Button (Left, Pressed).png');
}

body right-bar-area bar-button-item, button.navigation.right {
	background-image: url('/App/FrouMonk/Resources/Images/Blue Button (Right).png');
	padding-right: 2rem;
}

body right-bar-area bar-button-item.green, button.navigation.right.green {
	background-image: url('/App/FrouMonk/Resources/Images/Green Button (Right).png');
}

body right-bar-area bar-button-item:hover, button.navigation.right:hover {
	background-image: url('/App/FrouMonk/Resources/Images/Blue Button (Right, Pressed).png');
}

body right-bar-area bar-button-item.green:hover, button.navigation.right.green:hover {
	background-image: url('/App/FrouMonk/Resources/Images/Green Button (Right, Pressed).png');
}

body bar-button-item:not([disabled]):hover {
	background-color: transparent;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.centerer {
	display: inline-table;
	text-align: left;
	height: 100%;
}

.content-box {
	display: table-cell;
	vertical-align: middle;
}

.content-box > * {
	display: inline-block;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.shadow {
	filter: drop-shadow(0 0.1876rem 0.4375rem rgba(0, 0, 0, 0.5));
}

.box-shadow {
	box-shadow: 0 0.1876rem 0.4375rem rgba(0, 0, 0, 0.5);
}

.sign {
	position: relative;
	color: #FFFFFF;
	text-align: center;
	font-size: 1.8rem;
	display: table;
	vertical-align: middle;
	box-sizing: border-box;
}

.sign.min-size {
	min-height: 11.5rem;
	min-width: 13rem;
}

a[action] > .sign, a[action] > .sign * {
	cursor: pointer;
}

a[action] > .sign:hover {
	color: #F2F263;
}

a[action] > .sign:hover img:not(.no-filter), a[action] > .sign.large-down-arrow:hover::before, a[action] > .sign:hover::after {
	filter: sepia(61%) saturate(2608%) hue-rotate(318deg) brightness(129%) contrast(90%);
}

a[action] > .sign.orange:hover::after, a[action] > .sign.white:hover::after {
	filter: invert(1) sepia(61%) saturate(2608%) hue-rotate(318deg) brightness(129%) contrast(90%);
}

.sign-content {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	padding: 1.1rem;
}

.sign.white, .sign.orange {
	color: #000000;
}

.sign::after {
	content: '';
	display: block;
	position: absolute;
	top: 0.3rem;
	left: 0.3rem;
	bottom: 0.3rem;
	right: 0.3rem;
	border: 0.2rem solid #FFFFFF;
	border-radius: 0.8rem;
	pointer-events: none;
}

.sign.blue {
	background-color: var(--blue-sign-color);
}

.sign.green {
	background-color: var(--green-sign-color);
}

.sign.white {
	background-color: #FFFFFF;
}

.sign.orange {
	background-color: #F6842A;
}

.sign.white::after, .sign.orange::after {
	border-color: #000000;
}

.sign-icon.large {
	height: 1.8rem;
}

.sign-icon.arrow {
	height: 1.5rem;
}

.sign.large-down-arrow {
	padding-bottom: 3.4rem;
}

.sign.large-down-arrow::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 1.3rem;
	left: 0;
	width: 100%;
	height: 1.5rem;
	background-image: url('/App/FrouMonk/Resources/Images/Large Down Arrow (White).png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.sign.white.large-down-arrow::before, .sign.orange.large-down-arrow::before {
	filter: invert(1);
}

button {
	border: none;
	border-radius: 0.5rem;
	background: transparent;
	padding: 1rem;
}

button:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

button:active {
	background-color: rgba(0, 0, 0, 0.18);
}

button.arrow-button {
	background-image: url('/App/FrouMonk/Resources/Images/Large Down Arrow (White).png');
	background-size: 1.7rem;
	background-repeat: no-repeat;
	background-position: center;
	height: 1.2rem;
	width: calc(1.2rem * 1.375);
	padding: 0.3rem;
	box-sizing: content-box;
}

.arrow-button.up {
	transform: rotate(180deg);
}

.sign.white button.arrow-button, .sign.orange button.arrow-button {
	filter: invert(1);
}

.sign.white button.arrow-button:hover, .sign.orange button.arrow-button:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.sign.white button.arrow-button:active, .sign.orange button.arrow-button:active {
	background-color: rgba(255, 255, 255, 0.18);
}

.validation-response-label {
	display: block;
	font-style: italic;
	color: #DE2323;
}

body .reservation-form input, body .reservation-form textarea {
	font-family: 'SnvDReg';
	padding: 0.7rem;
	display: block;
	width: 100%;
	font-size: 1rem;
	border-radius: 0.6rem;
	border: none;
}

.traffic-light {
	background-image: url('/App/FrouMonk/Resources/Images/Traffic Light.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 2.5rem;
	height: calc(2.5rem * 2.305343);
	padding-top: calc(2.5rem * 2.305343 * 0.22);
}

.traffic-light .light {
	width: 46.94%;
	height: 20.36%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: calc(2.5rem * 2.305343 * 0.043);
	margin-left: calc(2.5rem * 0.2671);
	cursor: pointer;
	opacity: 0;
}

.traffic-light .light:hover {
	opacity: 1;
}

.traffic-light .light.red {
	background-image: url('/App/FrouMonk/Resources/Images/Red Light.png');
}

.traffic-light .light.yellow {
	background-image: url('/App/FrouMonk/Resources/Images/Yellow Light.png');
}

.traffic-light .light.green {
	background-image: url('/App/FrouMonk/Resources/Images/Green Light.png');
}

.traffic-light.red:not(:hover) .light.red {
	opacity: 1;
}

.traffic-light.yellow:not(:hover) .light.yellow {
	opacity: 1;
}

.traffic-light.green:not(:hover) .light.green {
	opacity: 1;
}