/* General text formatting rules applied to all */
	/* Form controls style="width: 380px; height: 40px; font-size: 20pt;" */
body {
	font-family: Helvetica, HelveticaNeue-Light;
	font-weight: 100;
	font-size: 11pt;
	background-color: #ffffff;
	margin: 0px;
}


/*

*/

.emp-pass-change {
	position: absolute;
    top: 20%;
    left: 20%;
	margin: auto;
	border: 2px solid black;
	border-radius: 10px;
	padding: 20px;
	max-width: 300px;
	min-width: 85%;
}

.emp-pass-form{
	margin-top: 100px;
    margin-left: 100px;
    padding: 10px;
    float: left;
    min-width: 425px;
    width: 450px;
}

.emp-pass-title {
	font-family: 'Anton', sans-serif;
	font-size: 30px;
}

.emp-pass-label {
font-size: 16px;
}

/* The entire space of the application including headers, footers, menus and content */
#appSpace {
	margin: 0px;
	font-weight: 100;
	/* 
	height: 100%;
	border-top: solid;
	border-bottom: solid;
	border-left: solid;
	border-right: solid;
	border-width: 1px;
	background-color: #ffffff; */ }
	
#main_menu {
	position: static;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #ebebeb;
	width: 100%	!important;}
	.mainMenuItem {
		font-size: 11pt;
		font-weight: normal;
		color: #000000;
		padding-left: 15px;
		padding-right: 15px;		}
	a.mainMenuItem:link  {color: #000000; font-size: 11pt; text-decoration: none;}
	a.mainMenuItem:visited  {color: #000000; font-size: 11pt; text-decoration: none;}
	a.mainMenuItem:active  {color: #000000; font-size: 11pt; text-decoration: none;}
	a.mainMenuItem:hover {color: #000000; font-size: 11pt; text-decoration: underline;}
	
#content { 
	width: 100%;
	background-color: #ffffff;
	height: 100%;
	/*margin-left: 10px;*/
	margin-right: 10px;
	margin-bottom: 10px;
	font-weight: 100;	}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	
	.employeeTable {
		width: 80% !important;
	}
}	
	
#header { 
	width: 100vw !important;
	font-family: 'Anton', sans-serif;
	background-color: #000000; 
	
	padding-top: 5px;
	padding-bottom: 10px;
	vertical-align: bottom; }
	th {font-size: 10pt;
		font-weight: bold; }
		.header {font-size: 16pt;
		font-weight: bold;
		white-space: nowrap;
		vertical-align:top; }
	.header-centered {font-size: 20pt;
		font-weight: bold;
		text-align: center; }
	.centered { text-align: center; }
	
#footer {
	background-color: #000000; 
	color: #ffffff;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 25px;
	padding-bottom: 15px;
	vertical-align: bottom; 
	font-size: 9pt;
	margin-bottom: 10px; }
	
#logo {
	float: left;
	font-family: 'Anton', sans-serif;
	font-size: 19pt;
	padding-left: 10px;
	color: #FFFFFF; }

#userInfo {
	float: right;
	text-align: right;
	padding-right: 5px;
	
	color: #FFFFFF;
	display: inline-block;	}
	a.userInfo:link  {color: #ffffff; font-size: 11pt; font-weight: normal; text-decoration: none;}
	a.userInfo:visited  {color: #ffffff; font-size: 11pt; font-weight: normal; text-decoration: none;}
	a.userInfo:active  {color: #ffffff; font-size: 11pt; font-weight: normal; text-decoration: none;}
	a.userInfo:hover {color: #ffffff; font-size: 11pt; font-weight: normal; text-decoration: underline;}
	
#logo-image {
	position: absolute;
	left: 80%;
	top: 5%;
	float: right;
	text-align: right;
	padding-right: 5px;
	padding-top: 10px;  }
	
	
/* Filter Side Bar */
	.rating-normal {
		font-size: 10px;}
	.rating-highlighted {
		background: #fff200;
		font-size: 10px;}


/* Login page*/	
	/* grey box with the form */
	.login-box { 
		background-color: #ebebeb;
		margin-top: 100px;
		margin-left: 100px;
		padding: 10px;
		float: left;
		min-width: 425px;
		width: 450px;
	}
		.login-table {
			padding-left: 25px;
			padding-right: 25px;
			width: 400px;	}
		.login-box-bottom {
			font-size: 8pt;
			text-align: right;	}
		.lg-blk-heading {
			font-family: 'Anton', sans-serif;
			font-size: 45pt;
			font-weight: 600;
			padding-bottom: 10px;
			color: #000000; }
	/* Logo to the right of the login-box */
	.login-washed-logo { 
		opacity: 0.4; 
		float: right;
		margin-left: 30px; 
		margin-right: 75px;
		margin-top: 25px;
		z-index: -1;
		display: inline-block;
		display:inline;/*for IE 7 */
		vertical-align:top;		}
		.login-logo-responsive {
			width: auto;
			height: 500px;	}
	.forgot-password {
		width: 450px;
		background-color: #ebebeb;
		margin-top: 100px;
		margin-left: 100px;
		padding: 10px;
		float: left;
	}



/* Admin Users */
	.title {
		font-family: 'Anton', sans-serif;
		background-color: #ebebeb;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		border-top: 0;
	}
	.title2 {
		font-family: 'Anton', sans-serif;
		background-color: #ebebeb;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
	}
	tr.row1 {
		padding-left: 15px;
		font-weight: 100;	}
	tr.row1:hover {
		background: #d7d7d7 !important;
		padding-left: 15px;
		font-weight: 100;	}
	tr.row2 {
		padding-left: 15px;
		font-weight: 100;	}
	tr.row2:hover {
		background: #d7d7d7 !important;
		padding-left: 15px;
		font-weight: 100;	}
	
/* questions */
	.question_container {
		margin: 3px;
		border-style: solid;
		border-width: 1px;		}
	.question {
		margin: 3px; }
	.option	{
		background: #ebebeb;
		padding: 3px;}
	
/*  *** GENERAL CSS CLASSES *** */

/* Text formatting classes */
	.smaller {font-size: 9pt; }
	.small {font-size: 7pt; }
	.heading {font-size: 11pt;
		font-weight: bold; }
	.heading-centered {font-size: 11pt;
		font-weight: bold;
		text-align: center; }
		
	.ellipsis {
		max-width: 200px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		overflow-y: hidden;
	}

	
/* Left and right and side-by-side class */
	.side-by-side {
		/* This container will hold any containers needing to be placed side by side */
		white-space: nowrap;
		vertical-align:top;
		width: 100%;
		float: left;	}
		
	.side-by-side2 {
		display: inline-block; }
		
	.clear {
		clear: both; }
		
	.floatLeft {
		float: left; }

	.floatRight {
		text-align: right;
		float: right; }

	.justifiedRight {
		text-align: right;
		padding: 5px; }	


	


/* DISPLAY */
	.dsp-on {display: inline;}
	.dsp-off {display: none;}

/* INPUT */
	input.small {width:55px;}
	input.long {width:250px;}

/* General link rules applied to all */
	a:link, a:visited, a:active  {color: #000000; text-decoration: none; }
	a:hover {color: #000000; text-decoration: underline; }
	
	a.small:link  {color: #000000; font-size: 8pt; text-decoration: none;}
	a.small:visited  {color: #000000; font-size: 8pt; text-decoration: none;}
	a.small:active  {color: #000000; font-size: 8pt; text-decoration: none;}
	a.small:hover {color: #000000; font-size: 8pt; text-decoration: underline;}

/* Buttons */
	.blkButton {
		border: 1px solid black !important;
		background-color: #000000;
		color: #ffffff;
		font-family: 'Anton', sans-serif;
		font-size: 16px;
		letter-spacing: 0.9px;
		font-weight: 100;
		border-radius: 25px;
	}	

	.secondary-button {
		border-style: solid;
		border-radius: 25px;
		border-width: 3px;
		background-color: #ffffff;
		border-color: #ababab;
		padding: 5px 10px 5px 10px;
	}

	.secondary-button:hover {
		background-color: #EFE925;
	}


	input[type=button].paging-button {
		border: 3px solid #ababab !important;
		border-radius: 25px;
	}

	input[type=button].paging-button:disabled,
	input[type=button].paging-button[disabled] {
		border-color: #ebebeb !important;
	}

hr { background-color: #000000; }



/* DROPDOWN MENU */
/* The container - needed to position the dropdown content */
.dropdown {
	float: left;
	position: relative;
	display: inline-block;	}
.dropdown:hover {cursor: pointer; }

/* button - or link that is hovered over  */
.dropbtn {
	background-color: #000000;
	color: white;
	font-size: 16px;
	font-weight: bold;
	border: none;	}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	float: left;
	text-align: left;
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 146px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;	}

/* Links inside the dropdown */
.dropdown-content a, .dropdown-content div{
	color: black;
	padding: 5px 0px 5px 10px;
	text-decoration: none;
	display: block;	}

/* Change color of dropdown links on hover */
.dropdown-content a:hover, .dropdown-content div:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #000000;}

.order-question:hover {cursor: pointer;}

.order-question:active {opacity: 0.5;}

.title a:hover {cursor: pointer;}

button:hover {cursor: pointer;}

/* Rating Stars Filter */
#rating1:hover {cursor: pointer;}
#rating2:hover {cursor: pointer;}
#rating3:hover {cursor: pointer;}
#rating4:hover {cursor: pointer;}
#rating5:hover {cursor: pointer;}

.blkButton:hover {cursor: pointer;}
.clickable:hover {cursor: pointer;}

.ratings .row1:hover {cursor: pointer;}
.ratings .row2:hover {cursor: pointer;}
.hov {cursor: pointer;}

select {cursor: pointer;} 

.row2 {
	background: rgb(236, 236, 236);
}
td {
	border-top: 1px solid #ebebeb; 
}
 
.borderless {
	border: none;
}


#userForm {
	font-size: 18px;
}

#userForm > tbody > tr > td > input {
	font-size: 18px;
}

#userForm > tbody > tr > td > select {
	font-size: 18px;
	width: 227.5px;
	padding: 1.5px 0px;
}

#userForm > #start-date {
	width: 224px;
}

/* Below is for the Progress Bar of employee Creation */
#progress-bar {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	width: 600px;
	margin-bottom: 20px;
	margin-top: 50px;
}

.prog1 {
	height: 20px;
	width: 15px;
	background-color: black;
	color: white;
	border-radius: 50%;
	z-index: 2;
	padding: 2px 4px 0px 4px;
	font-size: 14px;
	text-align: center;
	border: 2px solid #666;
}

.connector {
	height: 2px;
	width: 97px;
	background-color: #666;
	align-self: center;
	margin-left: -22px;
}

.prog2 {
	height: 20px;
	width: 15px;
	background-color: white;
	color: black;
	border-radius: 50%;
	z-index: 2;
	padding: 2px 4px 0px 4px;
	font-size: 14px;
	text-align: center;
	border: 2px solid #666;
	/*margin-left: -10px;*/
}

.progText {
	margin-left: -45px;
	margin-top: 5px;
}

.login-washed-logo2 {
	opacity: 0.4; 
	float: right;
	margin-left: 30px; 
	margin-right: 75px;
	margin-top: -30px;
	z-index: -1;
	display: inline-block;
	display:inline;/*for IE 7 */
	vertical-align:top;		
}

.login-logo-responsive2 {
	width: auto;
	height: 500px;	
} 

/* Survey creation styling */
.surveyTitle {
	text-align: left;
	font-weight: 700;
	padding-left: 5px;
}

.borderedRow {
	border-bottom: solid 1px rgb(233, 233, 233);
}

.closerInp {
	margin-left: -30px;
}

/* --- Guest Page Styling --- */
#guest-container {
	display: flex;
	flex: 1;
	flex-direction: row;
	justify-content: flex-start; 
	margin-right: 0px;
}

#guest-info {
	flex-direction: column;
	flex: 1.5;
	text-align: left;
	padding-right: 5px;
}

#ratings-table {
	border-spacing: 0px;
	flex: 6;
	margin-top: -50px;
}

#ratings-table .titleBar{
	background-color: #ebebeb;
	padding: 4px;
	font-size: 16px;
	font-weight: 500;
	font-family: 'Anton', sans-serif;
	
}

.guest-row:hover {
	cursor: pointer;
	background-color: #d7d7d7 !important;
}

.info-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: -15px 0px -10px;
}

.info-title {
	padding-right: 15px;
	margin-bottom: -9px;
}

.zip {
	justify-self: right;
	margin-top: 5px;
}

input[type="text"] {
	cursor: text;
}

.table-item {
	padding-left: 3px;
}

.user-error {
	display: none;
	color: red;
	margin: 0px;
}

.customer-editor {
	width: 100%;
}

.customer-editor-title{
	width: 100%;
}