body {
	font-family: "Roboto", "Helvetica", arial, sans-serif;
	background:#ffffff;
	color:#222222;
	font-weight:400;
	font-size:1.5em;
	line-height:1.75em;
	margin:0;
	padding:0;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: "Roboto", "Helvetica", arial, sans-serif;
	font-weight:600;
	line-height:1.75em;
	margin:0 0 1em 0;
	padding:0;
	text-align:center;
}


header{ 
	width:100%;	
	z-index:100;
	background-color:rgba(255,255,255,1.00);
}

.navwrapper{
	/*width: 92%; */
	margin: 0 auto;
	height:3.5em;
	background-color:#337AB7;
}

#headline{position:absolute; top:0; left:4vw; z-index:100; width:96vw;}
#headline h1{ padding:0; color:#ffffff; font-size:1.75em;  }

#appWrap{
	width:100vw;
	height:calc(90vh - 3.5em);
	margin:0;
	padding:0;
}

#event_select{
	position:absolute;
	z-index:150;
	top:0;
	left:21em;
	width:calc(100vw - 21em);
}


.grid {
  width: 96%;
  height: 90vh;
	
}

.ui-grid {
	height: 90vh;
}

.ui-grid-cell-contents{
	
	font-size:1.5em;
	line-height:1.75em;
}

.ui-grid-filter-container div select option:first-child { display: none; }


.ui-grid-top-panel{
	color: #ffffff;
	background-color:#337ab7;
	background-image:none !important;
}

.ui-grid-filter-select{
	color: black;
}


input{
	color:#000000 !important;
	background-color:#ffffff !important;
}

.modal-header-primary{
		color: #fff !important;
   		background-color: #337ab7 !important;
		border-radius:.35em .35em 0 0 !important;
}

.glyphicon-cog{
	font-size:2.5em !important;
	padding-top:.175em;
	width:100%;
	text-align:center;
}

.modal-body span {
	
	font-size:2em;
}

.modal-body input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2.25); /* IE */
  -moz-transform: scale(2.25); /* FF */
  -webkit-transform: scale(2.25); /* Safari and Chrome */
  -o-transform: scale(2.25); /* Opera */
  padding: 0;
}

#cart{
	padding: 1em;
}

#meetingDetails{
	height:0px;
}

#invoice, #invoice td{
	font-size:1.5em;
}

#message{width:100%;}


#menuToggle {
	display: block;
    position: relative;
    top: 1em;
    left: 1em;
    z-index: 200;
    -webkit-user-select: none;
    user-select: none;
    float: left;
    width: 4em;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;  
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
	background-color:#f2f2f2;
  border-radius: 3px; 
  z-index: 1; 
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #f2f2f2;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#swipemenu {
	position: absolute;
    width: 20em;
    margin: -2.75em 0 0 -1em;
    padding: 1em;
    /* padding-top: 125px; */
    background: #434343;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#swipemenu p {
  padding: 1.5em 0 0.5em 0;
  font-size: 22px;
}

#swipemenu a {
  color: #f2f2f2;
}

#swipemenu a:hover {
	text-decoration: underline;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ div
{
  transform: none;
}

.blue .ui-grid-cell-contents {
	background-color: #9BD99E;
	border-bottom: 1px solid #d4d4d4;
}

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px) {


	header{ 
		padding:0;
		position: fixed;
		top:0;
		width:100%;	
		z-index:100;
	}

	.navwrapper {
		margin: 0 auto;
		display:block; }


	#appWrap{
		max-width:96vw;
		height:calc(90vh - 3.5em);
		margin:0 auto auto auto;
		padding:0;


	}



}