/*ANY CHANGES TO THIS FILE REQUIRE A VERSION UPDATE TO CACHE.MANIFEST*/

@font-face {
	font-family: Avenir;
	src: url('/fonts/Avenir-Roman.woff') format('woff'), url('/fonts/Avenir-Roman.ttf') format('truetype');
}

@font-face {
	font-family: AvenirBold;
	src: url('/fonts/Avenir-Black.woff') format('woff'), url('/fonts/Avenir-Black.ttf') format('truetype');
}

@font-face {
	font-family: AvenirLight;
	src: url('/fonts/Avenir-light.woff') format('woff'), url('/fonts/Avenir-light.ttf') format('truetype');
}

html div,
html button,
html span {
	font-family: 'Avenir', 'Roboto', Arial, sans-serif !important;
}
html a {
	font-family: 'Roboto', 'Avenir', Arial, sans-serif !important;
}
body {
	/*Now handling spacing between the body and header in the header component, with marginBottom = height of header */
	/*padding-top:50px;*/
	margin: 0 !important;
}

/* Material UI oversized margin creating horizontal scrollbar, workaround */
.product-container > div > div > div {
	margin: 0 !important;
}

.inner-center {
	display: table;
	margin: 0 auto;
}

#hubspot-messages-iframe-container.widget-align-right {
	bottom: 56px !important;
}

.paper {
	margin: 20px;
}
.card {
	margin: 15px;
}
.card-with-form {
	margin: auto;
}
.raised-button {
	margin: 5px;
}
.dialog-raised-button {
	margin-top: 15px;
	margin-bottom: 15px;
}
.checkbox {
	margin-bottom: 16px;
}
.floating-action-button {
	right: 20px;
	top: 90%;
	position: fixed;
}
.clickable-table-row {
	cursor: pointer;
}
.block-span {
	display: block;
	margin-bottom: 5px;
}
form {
	text-align: center;
}

.menu-switcher-dspr-card {
	margin: 12px;
	padding: 0;
	height: 200px;
	cursor: pointer;

	position: relative;
}

.menu-component {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.menu-switcher-dspr-card button {
	display: block;
	height: 100%;
	width: 100%;
}

.menu-switcher-dspr-card img {
	display: block;
	width: 80%;
	height: 80%;
	margin: 20px 10%;

	position: absolute;
	top: 0;
	object-fit: contain;
}

.menu-switcher-dspr-card p {
	position: absolute;
	bottom: 0;
	height: 60px;
	width: 100%;
	margin: 0;
	padding: 0 16px;
	line-height: 60px;
	font-size: 16px;
	color: white;
	background-color: rgba(0, 0, 0, 0.8);
}

.most-recent-dspr-modal p {
	text-align: center;
	font-weight: bold;
	margin: 0;
}

.most-recent-dspr-modal .dspr-full-name {
	font-size: 24px;
}

.most-recent-dspr-modal img {
	display: block;
	width: 80%;
	margin: 24px auto;
	max-height: 240px;
}

.menu-switcher-location-display {
	display: flex;
	align-items: center;
	background-color: #000000;
	padding: 16px;
}

.menu-switcher-call-to-action {
	display: flex;
	align-items: center;
	background-color: #000000;
	padding: 0 16px 16px 16px;
}

.menu-switcher-call-to-action p {
	width: 100%;
	text-align: center;
	color: white;
	margin: 0;
}

.menu-switcher-location-display p {
	color: white;
	margin: 0;
}

.menu-switcher-location-display button {
	padding: 0;
}

.menu-switcher-location-display svg {
	color: white;
}

.menu-switcher-location-display .zipCode {
	margin-left: 8px;
	margin-right: auto;
}

.delivery-hours h3 {
	text-align: center;
	font-weight: normal;
	margin: 4px 0;
}

.delivery-hours p {
	text-align: center;
	color: rgba(0, 0, 0, 0.54);
}

.indica {
	font-weight: bold !important;
	color: #cc99ff !important;
	font-family: 'reklame-script', 'Roboto', 'Avenir', Arial, sans-serif !important;
}
.sativa {
	font-weight: bold !important;
	color: #67cb33 !important;
	font-family: 'reklame-script', 'Roboto', 'Avenir', Arial, sans-serif !important;
}
.hybrid {
	font-weight: bold !important;
	color: #fc952a !important;
	font-family: 'reklame-script', 'Roboto', 'Avenir', Arial, sans-serif !important;
}
.cbd {
	font-weight: bold !important;
	color: #3084f2 !important;
	font-family: 'reklame-script', 'Roboto', 'Avenir', Arial, sans-serif !important;
}
.vaporizer {
	font-weight: bold !important;
	color: #ddd !important;
	font-family: 'reklame-script', 'Roboto', 'Avenir', Arial, sans-serif !important;
}

/* header */
.app-bar {
	/*height:50px;*/
	margin-bottom: 0;
	position: fixed !important;
	top: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
/* .app-bar button:first-child {margin-top:0 !important; position:absolute !important;} */
.app-bar h1 {
	height: 50px !important;
	line-height: 50px !important;
	font-size: 30px !important;
	font-family: 'AvenirBold', Arial, sans-serif !important;
	text-align: center !important;
	color: #000 !important;
}
/* .app-bar svg {color:#fff !important; fill:#fff !important; font-size: 32px;} */
/* .app-bar div:nth-child(n+2) svg {position:relative; top:8px;} */
/* .icon-holder {
    position: absolute;
    top: 0;
    right: 20px;
} */
/* .cart-icon {width:30px !important; height:30px !important;} */
/* .cart-amt {
    position: relative;
    top: -4.5px;
    left: -18px;
    font-size: 12px;
} */

/* .cart-amt {position:relative; top:10px; width:31px; font-size:13px; text-align:center; color:#fff !important;} */

/* subheaders */
.subheader-content {
	margin: 4px 0;
}
.subheader-content:first-child {
	margin-top: 16px;
}

.coupon-flexbox {
	display: flex;
	align-items: flex-start !important;
	flex-direction: column;
}
/* Bottom padding is created by the container element, so no need to specify a larger bottom margin*/
.subheader-content:last-child {
	margin-bottom: 0px;
}

/* cart */
.cart-cta-container {
	position: sticky;
	bottom: 0;
	z-index: 2;

	padding: 16px;
	margin-top: 24px;
	background-color: #f2f2f2;
	box-shadow: 0px -2px 4px -1px rgba(0, 0, 0, 0.2), 0px -4px 5px 0px rgba(0, 0, 0, 0.14),
		0px -1px 10px 0px rgba(0, 0, 0, 0.12);
}

.cart-cta-container div {
	display: flex;
	justify-content: space-between;
}

.cart-cta-container div p {
	margin-top: 2px;
	margin-bottom: 2px;
}

.error {
	color: red;
}

/* login */
.login-section {
	text-align: center;
}
.sign-up {
	padding-left: 16px;
}
.forgot-pass {
	margin-top: 16px;
}

/* Global Idea For Rendered Router Pages?*/
section.page-centered {
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	text-align: center;
	display: flex;
	justify-content: center;
}

/*Global Idea for full-width individual sections*/
.full-width-section {
	width: calc(100% - 32px);
	margin: 16px;
	margin-top: 0;
	text-align: left;
}

.full-width-card {
	margin-top: 16px;
	text-align: center;
	width: 100%;
}

.footer-container {
	height: 56px;
	background-color: white;
	box-shadow: 0px -2px 4px -1px rgba(0, 0, 0, 0.2), 0px -4px 5px 0px rgba(0, 0, 0, 0.14),
		0px -1px 10px 0px rgba(0, 0, 0, 0.12);
	position: fixed;
	bottom: 0;
	width: 100%;
}

/* menu bar */
.menu-list {
	height: 20px !important;
	line-height: 16px !important;
	border-bottom: 1px solid #bbb !important;
}
.menu-list div {
	height: 48px;
	padding: 0;
	line-height: 48px;
}
.menu-list div div div {
	height: 48px;
	padding: 0;
	line-height: 48px;
}
.msg-style {
	padding: 20px;
}
.msg-style-center {
	padding: 20px;
	text-align: center;
}
.msg-style.error {
	color: red;
	font-size: 30px;
	overflow-wrap: break-word;
}
.span-highlight {
	background-color: rgba(48, 133, 246, 0.2);
}

/* profile */

/*moved to UserProfile.js styles object*/
/*.profile-section {text-align:center;}*/

.approved-document,
.invalid-document {
	margin: 16px 0;

	font-weight: bold;
	font-size: 24px;
}

.approved-document:first-child,
.invalid-document:first-child {
	margin-top: 0;
}

.approved-document {
	color: #67cb33;
}

.invalid-document {
	color: red;
}

/* document upload form */
.document-upload-form,
.signup-upload-form {
	background-color: #323232;
	height: 100%;
}

.drop-zone {
	height: 100%;
}

.signup-section .drop-zone.with-file {
	height: calc(100% - 48px);
	padding-top: 40px;
}

.medical-recommend .drop-zone.with-file img {
	max-height: 240px;
}

/*revised and implemented in RevisedUserDocumentUploadForm*/
.document-upload-drop-zone {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.signup-upload-form {
	padding-bottom: 64px;
}

.signup-upload-form p {
	margin: 0;
	padding: 16px;
	color: white;
	/* position: absolute; */
}

.signup-divider {
	margin: 0 16px !important;
	background-color: #777 !important;
}

.signup-upload-driver-license,
.signup-upload-medical-recommendation,
.signature-form {
	height: 200px;
	display: flex;
	flex-direction: column;
}



.signup-upload-driver-license {
	margin-bottom: 64px;
}

.id-verif,
.medical-recommend {
	background-color: #323232 !important;
	border-radius: 0 !important;
}

.id-verif span,
.medical-recommend span {
	color: white;
}

.medical-recommend .document-upload-form {
	max-height: 300px;
}

.signup-upload-form .upload-status {
	position: relative;
	margin: auto;
}

/* slider styles */
/* div[class^='slider-decorator']{margin:0 10px !important;} */

/* slider styles */
/* div[class^='slider-decorator']{margin:0 10px !important;} */
.slider {
	position: fixed !important;
	z-index: 10;
	height: 60px;
}
.slider-slide {
	height: 60px;
	color: #fff;
}
.slide-visible {
	height: 60px;
	color: #fff;
}
/* .slider div[class^='slider-decorator'] button {font-size:28px; color:#fff; background:#000 !important; border:none;} */

/* menu (product page) */
ul.slider-list {
	height: 60px !important;
}
.menu-location-setter {
	position: relative !important;
	top: -1px;
	vertical-align: middle;
}
/* .category-name {height: 60px; font-size:16px !important; position:relative; vertical-align:middle; text-align: center;} */
.product-container {
	padding: 0 !important;
}
.product-container div {
	padding: 0 !important;
}
.product-container div.pricing {
	font-size: 16px;
	color: #fff;
	padding: 10px 10px 10px 0 !important;
}
.cartSnackBar button div {
	color: #fff;
}
.menu-item.selected {
	background-color: #fff !important;
	color: rgb(103, 203, 51) !important;
}
.menu-item.disabled {
	background: none;
}

/* menu-dialog */
/*.menu-dialog {top:90px !important;}*/
/*.menu-dialog div div div div {max-height:inherit !important;}*/

/* kluge-fix for MUI bug: A pricing button would become stuck highlighted if this button appeared in the same location where the user previously tapped on the menu.
    This was caused by the transition animation, which re-evaluates the cursor position during the frames.
 */
.menu-dialog div div {
	transition: none !important;
	-webkit-transition: none !important;
}

/* kluge-fix for MUI bug: Gray wall covering on top of product dialog */
.menu-dialog > div > div > div {
	box-shadow: 0px 14px 45px rgba(0, 0, 0, 0.25), 0px 10px 18px rgba(0, 0, 0, 0.22),
		0px 0px 0px 720px rgba(0, 0, 0, 0.45) !important;
}
.menu-dialog > div + div {
	background-color: rgba(0, 0, 0, 0) !important;
}

.promotional-text-tilebar {
	height: fit-content !important;
}
.promotional-text {
	text-align: center;
	word-wrap: normal;
	white-space: normal;
}

.promotional-text > p {
	margin: 12px 0;
}

/* */
.dialog-product div div span:first-child {
	line-height: 26px !important;
}
.prod-btn-container {
	text-align: center;
}
.prod-btn-box {
	display: inline-block;
}

/* cart */
.cart form {
	text-align: center;
}
.cart .raised-button {
	margin: 0;
}
.cart-product {
	border-top: 1px solid rgb(224, 224, 224) !important;
}
.cart-product div div {
	font-weight: bold;
}
.cart-product div div div {
	top: 20px !important;
	right: 16px !important;
}
.total-price {
	text-align: right;
}
.total-price div {
	display: inline-block;
	margin: 0 0 0 5px !important;
	vertical-align: middle;
	font: bold 16px/16px 'Avenir', Arial, sans-serif !important;
	color: #000 !important;
}

/* orders */
.history-container {
	padding: 0 !important;
}
.history-list {
	border-top: 1px solid #ddd !important;
}
.history-list span.total {
	font-weight: bold;
}
.history-list span.date {
	display: block;
	margin-top: 3px;
	font-weight: bold;
}

@media only screen and (max-width: 479px) {
	html {
		max-width: 460px;
		margin: 0 auto;
	}
	.menu-dialog .image-holder {
		text-align: center;
	}
	.menu-dialog img {
		width: 50% !important;
		min-width: 50% !important;
		max-width: 50% !important;
	}
	.product-grid {
		height: 180px !important;
		padding: 0px !important;
	}
}

@media only screen and (max-width: 340px) {
	.logo em {
		display: none;
	}
}
@media only screen and (min-width: 480px) {
	html {
		margin: 0 auto;
	}

	.menu-dialog .image-holder {
		text-align: center;
	}
	.menu-dialog img {
		width: 50% !important;
		min-width: 50% !important;
		max-width: 50% !important;
		text-align: center;
	}
	.product-grid {
		max-height: 20vh !important;
		min-height: 180px !important;
		width: auto;
		padding: 0px !important;
		text-align: center;
	}

	.product-image {
		height: 20vh;
		min-height: 180px;
		min-width: 480px;
		width: 100% !important;
		object-fit: contain;
		position: absolute;
		top: 0px !important;
		left: 0px !important;
		transform: translateY(0) !important;
	}

	.prod-name {
		text-align: left;
	}
}

.m-signature-pad {
	position: relative;
	font-size: 10px;
	width: 80%;
	height: 200px;
	top: 10%;
	left: 10%;
	/*margin-left: -350px;
    margin-top: -200px;*/
	margin-bottom: 20px;
	border: 1px solid #e8e8e8;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
	border-radius: 4px;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.m-signature-pad--body {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
	border: 1px solid #f4f4f4;
}

.m-signature-pad--body canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.m-signature-pad--footer {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	height: 0px;
}

.m-signature-pad--footer .description {
	color: #c3c3c3;
	text-align: center;
	font-size: 1.2em;
	margin-top: 1.8em;
}

.m-signature-pad--footer .button {
	position: absolute;
	bottom: 0;
}

.m-signature-pad--footer .button.clear {
	left: 0;
}

.m-signature-pad--footer .button.save {
	right: 0;
}

.verify-msg {
	text-align: center;
	background-color: #ffa000;
	color: #fff;
	padding-left: 10px;
	padding-bottom: 5px;
	padding-right: 10px;
	padding-top: 5px;
	font-size: 14px;
}

.strikethrough {
	text-decoration: line-through;
	margin-right: 8px;
	opacity: 75%;
}

.grassp-logo {
	width: 125px;
	text-align: center;
	margin: auto;
}

.grassp-logo:hover {
	cursor: pointer;
}

.grassp-logo:hover {
	cursor: pointer;
}

.header-extension {
	display: none;
}

.error-button {
	background-color: #d32f2f !important;
	color: #fff !important;
}

.error-button:hover {
	background-color: #b61818 !important;
}

.aeropay-button {
	background-color: #323232 !important;
	color: #fff !important;
}

.aeropay-button:hover {
	background-color: #000000 !important;
}
@media screen and (min-width: 420px) {
	.header-extension {
		display: inline-block;
	}
}
/*
@media screen and (max-width: 1024px) {
    .m-signature-pad {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        min-width: 250px;
        min-height: 140px;
        margin: 5%;
    }
    #github {
        display: none;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .m-signature-pad {
        margin: 10%;
    }
}

@media screen and (max-height: 320px) {
    .m-signature-pad--body {
        left: 0;
        right: 0;
        top: 0;
        bottom: 32px;
    }
    .m-signature-pad--footer {
        left: 20px;
        right: 20px;
        bottom: 4px;
        height: 28px;
    }
    .m-signature-pad--footer
    .description {
        font-size: 1em;
        margin-top: 1em;
    }
}
*/