/*
	Define Variables
*/
:root{
	--base-font-family: Arial, Helvetica, sans-serif;
	--button-background: #26bcd7;
	--button-payNow-background: rgb(193, 215, 46);
}
/*
	Base Element Styles
*/
html {
	height: 100%;
	font-size: 62.5%;
}
body {
	margin: 3px;  /*removes default style*/
	font-family: Arial, Helvetica, sans-serif;
	font-family: var(--base-font-family) ;
	font-size: 1.6rem;
}
#container {
	height: 100%;   
	overflow: hidden;  /*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
	margin: 0px;  /*removes default style*/
	/* display: -ms-flexbox;  /*enables flex content for its children*/
	display: flex;  /*enables flex content for its children*/
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	font-family: var(--base-font-family);
}
.footer {
    clear: both;
    padding-top: 27px;
    font-size: 11px;
    text-align: center;
    color: #7CA4A2;
}
img {
	max-width: 100% ;
	width: auto ;
	height: auto ;
}
button, span, div {
	font-size: 1.6rem;
	max-width: 100% ;
}
input, select, textarea {
	/*
	border-radius: 5px;
	border: 1px solid black;
	*/
	font-size: 1.6rem;
	max-width: 100% ;
	padding: 3px;
}
input, textarea {
	background-color: #eee;
}
input:focus{
	background-color: #fff;
}
meter, progress, output {
	max-width: 100% ;
}
a {
	text-decoration: none;
	font-size: 1.6rem;
}
a.obviousLink {
	font-style: italic;
	color: #666;
	text-decoration: underline;
}
.smallerText {
	font-size: 1.4rem;
}
.noBottomSpace { 
	margin-bottom: 0px;
}
.noTopSpace { 
	margin-top: 0px; 
}
/*
	Buttons
*/
.button {
	display: block;
	font-size: 1.6rem; /* match the anchor definition so that they are consistent */
	background: #26bcd7;
	background: var(--button-background); 
	color: white;
	padding: 3px;
	border-radius: 5px;
	border: 1px solid black;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
	min-width: 275px;
	min-height: 40px;
}
.divLikeButton {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	align-self:center;
	font-size: 1.6rem; /* match the anchor definition so that they are consistent */
	background: #26bcd7;
	background: var(--button-background); 
	color: white;
	padding: 3px;
	border-radius: 5px;
	border: 1px solid black;
	text-decoration: none;
	min-width: 250px;
	min-height: 45px;
	margin-left: 3px;
}
.pointLevelDiv {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	align-self:center;
	font-size: 1.4rem; /* match the anchor definition so that they are consistent */
	background: #26bcd7;
	background: var(--button-background);
	color: white;
	padding: 2px;
	border-radius: 5px;
	border: 1px solid black;
	text-decoration: none;
	min-width: 250px;
	min-height: 30px;
	margin: 10px;
}
button.payNow {
	background: rgb(193, 215, 46);
	background: var(--button-payNow-background);
}
.smallButton {
	min-width:  209px;
	min-height: 40px;
}
.listButton {
	min-width:  85px;
	max-width: 125px;
	min-height: 25px;
}
.mediumButton {
	min-width: 175px;
	min-height: 40px;
	background: #cccccc; 
	color: #000;
}
.cupTypeButton{
	min-width: 150px;
	min-height: 40px;
	background: #cccccc; 
	color: #000;
}
.headerButton{
	min-width: 60px;
	padding: 1px;
	min-height: 45px;
	max-height: 60px;
}
.selectedButton{
	background: #b4e400; 
	/* color: var(--button-background); */
	color: #000;
	font-style: italic;
}
.infoButton {
	min-width: 20px;
	min-height: 40px;
	background: #ccc;
	color: #000;
	border-radius: 15px;

}
.drinkButton {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	align-items:flex-start;
	font-size: 1.6rem; /* match the anchor definition so that they are consistent */
	background: #d4f2f7; /* #d4f2f7 #26bdd7 */
	color: black;
	padding: 2px;
	border-radius: 5px;
	border: 1px solid black;
	text-decoration: none;
	min-width: 150px;
	min-height: 40px;
}
.drinkTeaDiv{
	padding: 3px;
}
.bigTextButton {
	font-size: 2.4rem;
}
.bigTextButtonFont {
	font-size: 2.4rem;
}
.medTextButton {
	font-size: 1.6rem;
}
.medTextButtonFont {
	font-size: 1.6rem;
}
.menuButton{
	min-height: 70px;
	padding-bottom: 5px;
}
.prefDiv {
	padding: 5px;
	border-radius: 5px;
	border: 1px solid black;
}
span.spanBold{
	font-weight: bold;
}
span.italicize {
	font-weight: normal;
	font-style: italic;
}
span.passwordShow{
	float: right;
	margin-left: -25px;
	z-index: 2;
	position: relative;
	font-size: 1.4rem;
	color: #ccc;
	font-style: italic;
}
span.passwordHelp{
	font-size: 1.4rem;
	color: #999;
	font-style: italic;
}
span.welcomeMessage {
	font-size: 3.0rem; 
	color: #aaa;
	font-style: italic;
}
span.welcomeMessageLike {
	font-size: 3.0rem; 
	color: #aaa;
	font-style: italic;
}
span.spanHeader {
	font-weight: bold;
	font-size: 2.2rem;
}
span.smaller {
	font-size: 1.4rem; 
}
/*
	Container Divs
*/
.drinkOrderContainer{
	padding: 5px;
	
}
.orderContainerDiv{
	background: #cccccc;
	box-sizing: border-box;
	color: black;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid black;
	text-decoration: none;
	min-width: 150px;
	min-height: 30px;
	margin: 10px 5px 10px 5px;
}
.drinksContainerDiv{
	background: #fff;
	box-sizing: border-box;
	align-items: flex-start;
	color: black;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid black;
	text-decoration: none;
	min-width: 150px;
	min-height: 30px;
	margin: 3px;
}
.displayFlex{
	display: flex;
}
.wholeScreenDiv {
	display: flex;
	align-content: center;
	justify-content: center;
	box-sizing: border-box;
	background: #fff;
	opacity: 1;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
	padding: 2px;
	border-radius: 5px;
	/* border: 2px solid black; */
}
.notVertCentered {
	justify-content: flex-start;
}
.notesTextarea{
	min-width: 175px;
	width:100%;
}
.singlePix{
	background: none;
	max-height: 1px;
	max-width: 1px;
}
/*
	Nav Element Styles
*/
#navButtons {
	width: 100% ; 
	text-align: center ;
	box-sizing: border-box;
}
#navButtons ul {
	margin: 0 ;
	padding: 0px ;
	list-style: none ;
}
#navButtons li {
	margin: 0 ;
	padding: 3px ;
	display: block ;
	list-style: none ;
	/* font-family: var(--base-font-family) ; */
}
#navButtons li a {
	color: #ffffff ;
	background: #26bcd7;
	background:  var(--button-background); 
	/* background-color: #00cc00 ; */
	border-radius: 3px;
	border: 1px outset #008f00 ;
	text-decoration: none ;
	display: block ;
}
#navButtons li a:hover {
	color: #000000 ;
	background: #b4e800 ;
}
.hamburger:not(.no-hover):hover {
	color: #ffffff ;
	background: #b4e800 ; /* c1d82f */
}
.hamburger {
	width: 2em ;
	font-weight: bold ;
	font-size: 150% ;
	color: #000000 ;
	background-color: #ffffff ;
}
.header{
	display: -ms-flexbox;
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
	width: 100%;
}
/*
	Header Bar Element styles
*/
img.headerLogo {
	max-width: 57px;
	max-height: 57px;
}
.headerInput {
	width:80px;
}
/*
	Images
*/
.loginLogoDiv {
	padding: 10px;
	max-width: 200px;
	max-height: 200px;
}
/*
	DIV Element styles
*/
.flexCenter {
	align-items: center;
	justify-content: center;
}
#left {
	box-sizing: border-box;
	width: 20%;
	min-width: 180px;
	flex-shrink: 0;  /*makes sure that content is not cut off in a smaller browser window*/
	display:none;
	background: #cccccc;
	z-index: 999;
}
.column {
	height: 100%;  /*allows both columns to span the full height of the browser window*/
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;  /*places the left and right headers above the bottom content*/
	box-sizing: border-box;
}
.top-left {
	flex-shrink: 0;
	box-sizing: border-box;
}
.top-right {
	flex-shrink: 0;
	display: inline-flex;
	justify-content:space-between;
	box-sizing: border-box;
}
.bundleDiv {
	display: -ms-flexbox;
	display: flex;
	justify-content:flex-start;
}
.bottom {
	padding-left: 5px;
	padding-right: 5px;
	flex-grow: 1;  /*ensures that the container will take up the full height of the parent container*/
	overflow-y: auto;  /*adds scroll to this container*/
	box-sizing: border-box;
}
.flexColumnDiv{
	display: -ms-flexbox;
	display: flex;
	flex-direction:column;
}
.noItemStretch{
	align-items: flex-start;	
}
.superTiny {
  -webkit-appearance: none;
  font-size: 6px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-family: "Helvetica Neue", var(--base-font-family);
  background: #31373d;
  padding: 0px;
  box-shadow: none;
  height: 1px;
        width:1px;
        border-radius: 0px;
  border: 0px #31373d;
  margin: 0;
	opacity: 0;
}
.flexDiv {
	display: -ms-flexbox;
	display: flex;	
	justify-content:flex-start;
	flex-wrap:wrap;
	min-width: 0;
}
.noFlexWrap {
	flex-wrap: nowrap;
	white-space: nowrap;
}
.flexDivContent{
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	padding: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.hideIt {
	display: none !important;
}
.centerWhenSmall {
	justify-content: center;
	align-items: center;
}
.centerWhenNotBig {
	justify-content: center;
	align-items: center;
}
/*
	Form elements
*/
div.formDiv {
	display: -ms-flexbox;
	display: flex;
	flex-direction:column;
}
div.formDivLine {
	display: -ms-flexbox;
	display: flex;	
	justify-content:flex-start;
	flex-wrap:wrap;
	/* padding:5px; */
}
div.formInputDiv {
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	padding-top: 5px;
	padding-bottom: 5px;
}
.field_inputWrapper{
	border-bottom: 1px solid #ccc; 
}
.simpleBorder {
	border: 2px solid grey;
}
label {
	padding: 5px;
	width:60px;
	font-size: 1.6rem;
	display: inline-block;
	/* font-style: italic; */
}
label.latteLabel {
	margin-top: 15px;
	font-style: italic;
	font-weight: bolder;
	text-decoration: underline;
}
input.prompt {
	/* font-style: italic; */
	color: #666;
	background-color: transparent;
	border: 0;
	min-width: 209px;
}
input.prompt:focus{
	font-style: normal;
}
input.maskTel { 
	font-family: 'text-security-circle';
}
.inputError {
	box-shadow: 
		0 0 0 1px rgba(211, 151, 50, 0.3), 
		0 1px 1px 0 rgba(0, 0, 0, 0.07), 
		0 0 0 4px rgba(211, 151, 50, 0.3);
  outline: none;
  z-index: 9;
}

/* Help Styling */
#help .helpQuestion {background-color: #bfffbf; font-style: italic; border-radius: 5px; border: 1px solid black; margin-top: 10px;}
#help .helpDiv li {margin-bottom: 8px;}
#help .helpDiv {padding: 0px 0px 0px 20px;}
#help .helpDiv p {margin: 0px; padding :0px; font-size: 1.2em;}
/* Confirm  Dialog Box */
/* Overlay */
#confirm-overlay {background-color:#eee;}

/* Container */
#confirm-container {overflow:scroll; height:80%; max-height: 80%; width:420px; max-width: 80%; min-width:50%; font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-align:left; background:#fff; border:2px solid #336699;}
#confirm-container .header {height:30px; line-height:30px; width:100%; background-color: #c1d72e; color:#fff; font-weight:bold;}
#confirm-container .header span {padding-left:8px;}
#confirm-container .message {color:#333; font-size:14px; margin:0; padding:12px 4px 12px 8px;}
#confirm-container .buttons {line-height:26px; width:160px; float:right; padding:10px 8px 0;} 
#confirm-container .buttons div {float:right; margin-left:4px; width:70px; height:26px; color:#fff; font-weight:bold; text-align:center; background: #26bcd7; background-color:  var(--button-background); border:1px solid #bbb; cursor:pointer;} 
#confirm-container a.modal-close,
#confirm-container a.modal-close:link,
#confirm-container a.modal-close:active,
#confirm-container a.modal-close:visited {text-decoration:none; font-weight:bold; position:absolute; right:10px; top:2px; color:#fff;}
#confirm-container a.modal-close:hover {color:#ccc;}
@media only screen and (max-width: 321px) {
	.button {
		min-width:290px;
	}
	.mediumButton {
		min-width: 290px;
	}
	.cupTypeButton{
		min-width: 140px;
	}
	.headerButton {
		min-width: 60px;
	}
	.infoButton {
		min-width: 25px;
	}
	.flexDivContent {
		padding: 2px;
	}
	.orderContainerDiv .button {
		min-width: 250px;
	}
	span.welcomeMessage{
		font-size:1.6rem;
	}
	#confirm-container {height:200px; width:290px; font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-align:left; background:#fff; border:2px solid #336699;}
}
@media only screen and (max-width: 376px) and (min-width: 322px) {
	.button {
		min-width:310px;
	}
	.mediumButton {
		min-width: 310px;
	}
	.cupTypeButton{
		min-width: 143px;
	}
	.headerButton {
		min-width: 60px;
	}
	.infoButton {
		min-width: 25px;
	}
	.flexDivContent {
		padding: 2px;
	}
	.menuButton {
		min-height: 75px;
	}
	.orderContainerDiv .button {
		min-width: 300px;
	}
	#confirm-container {height:200px; width:350px; font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-align:left; background:#fff; border:2px solid #336699;}
}
@media only screen and (max-width: 415px) and (min-width:377px) {
	.button {
		min-width:340px;
	}
	.mediumButton {
		min-width: 340px;
	}
	.cupTypeButton{
		min-width: 163px;
		margin: 2px;
	}
	.headerButton {
		min-width: 60px;
	}
	.infoButton {
		min-width: 10px;
	}
	.flexDivContent {
		padding: 2px;
	}
	#confirm-container {height:200px; width:350px; font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-align:left; background:#fff; border:2px solid #336699;}
}
@media only screen and (max-width: 629px) and (min-width:416px) {
	.bigTextButton {
		font-size: 1.6rem;
	}
	.bigTextButtonFont {
		font-size: 1.6rem;
	}
	.medTextButton {
		font-size: 1.2rem;
	}
	.medTextButtonFont {
		font-size: 1.2rem;
	}
	.cupTypeButton{
		min-width: 165px;
	}
	.mediumButton {
		min-width: 165px;
		font-size: 1.4rem;
	}
	.loginLogoDiv {
		max-width: 125px;
		max-height: 125px;
	}
	.centerWhenSmall{
		justify-content: center;
		align-items: center;
	}
	span.welcomeMessage{
		font-size:2.4rem;
	}
	/*
	#container {
		flex-direction: column;
		justify-content:flex-start;
	}
	#left {
		min-width: 100px;
	}
	*/
}
@media only screen and (min-width: 1000px) {
	.bigTextButton {
		min-width: 318px;
		min-height: 45px;
		font-size: 3.0rem;
	}
	.bigTextButtonFont {
		font-size: 3.0rem;
	}
	.medTextButton {
		min-width: 318px;
		min-height: 45px;
		font-size: 2.4rem;
	}
	.medTextButtonFont {
		font-size: 2.4rem;
	}
	.mediumButton {
		min-width: 215px;
		min-height: 45px;
		font-size: 1.8rem;
	}
	.smallButton {
		min-width: 230px;
		min-height: 35px;
		font-size: 1.8rem;
	}
	.headerButton {
		min-width: 75px;
		min-height: 63px;
		max-height: 70px;
		font-size: 1.8rem;
	}
	.notesTextarea{
		min-width: 275px;
		min-height: 100px;
	}
	.divLikeButton {
		font-size: 1.8rem; /* match the anchor definition so that they are consistent */
		min-width: 60px;
		min-height: 63px;
		max-height: 70px;
	}
	/*
	span {
		font-size: 1.8rem;
	}
	*/
	span.welcomeMessage{
		font-size:4.0rem;
	}
	a.obviousLink {
		font-size: 1.8rem;
	}
	.centerWhenNotBig {
		justify-content: flex-start;
		align-items: flex-start;
	}
	img.headerLogo {
		max-width: 67px;
		max-height: 67px;
	}
	.loginLogoDiv {
		max-width: 200px;
		max-height: 200px;
	}	
}