/* General text formatting rules applied to all */ 
body {
	font-family: 'Anton', sans-serif;
	font-weight: 100;
	font-size: 11pt;
	background-color: #144170;
	color: #ffffff;
	margin: 0px;
	}

/* The entire space of the application including headers, footers, menus and content */
#appSpace {
	margin: 0px;
	padding: 0px;
	font-weight: 100;
	width: 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%;	}
	.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 { 
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	font-weight: 100;
	display: inline-block;
	width: 100%;
	}
	
#header { 
	font-family: 'Anton', sans-serif;
	background-color: #ffffff; 
	padding: 10px 0 10px 0;
	vertical-align: bottom;
	position: absolute;
	width: 100%;
	max-height: 10vh;
	}
	th {font-size: 10pt;}
	.header {font-size: 16pt;
		
		 }
	.header-centered {font-size: 20pt;
		text-align: center; }
	.centered { text-align: center; }



.cta-header {
	float: inline-end;
	margin-top: 20px; 
}	
	
#signup-header {
	cursor: pointer;
	font-family: "Google Sans Flex", sans-serif;
	font-weight: 200;
	line-height: 1.05;
}


@media only screen and (max-width: 650px){ 
	#signup-header {
		font-size: 0.75em;
	}
}

.login-header {
	position: relative;
	top: -7px;
	margin: 0px 25px 0px 25px;
}

.login-header-button {
	    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 1px black double;
    font-color: white;
    background: rgba(0, 0, 0);
    font-size: 25px;
    width: 100%;
    height: 100%;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    padding: 15px 20px;
    border-radius: 10px;
}

form#box {
	z-index: 1;
}

.welcome-rate-box {
	}

#stpao-logo-image {
	position: fixed; 
	margin: 0px; 
	width: 100%;
	text-overflow: ellipsis;

	top: 60px; 
	vertical-align: top;
	text-align: right;
	z-index: -1;
}

	.stpao-full-logo {
	position: sticky;
	z-index: 1;
	top: 15%;
	left: 35%;
	opacity: 25%;
}

#assessor-message {
}

.assessor-image {
	position: relative;
	top: 75px;
}

@media only screen and (min-width: 481px){
	#stpao-logo-image { 

	}
}

@media only screen and (max-width: 480px){ 
	.stpao-full-logo {
		position: fixed;
		z-index: 1;
		top: 10em;
		left: 0;
		opacity: 25%;
	}
	.cta-header{
		/*position: absolute;*/
	}
}

@media only screen and (max-width: 1081px){
	.right-side-sect {
		display: none;
	}
}

#rms-logo-image {
	position: relative; 
	margin: 0px; 
	width: 100%;
	text-overflow: ellipsis;
	top: 60px; 
	vertical-align: top;
	text-align: right;
	z-index: -1;
}

.logo-image {
		width: 100%;
		max-width: 600px; /* added this to avoid blinding desktop users with the yellow sun */
		height: auto;
		text-overflow: ellipsis;
		overflow: hidden;
		overflow-y: hidden; 
}
		
#rms-logo-image-sm {
	position: absolute; 
	padding: 0px; 
	margin: 0px; 
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	overflow-y: hidden;
	top: -10%; 
	z-index: -1;
	text-align: right;}
	.logo-image-sm {
		width: 50%; 
		height: auto;
		text-overflow: ellipsis;
		overflow: hidden;
		overflow-y: hidden; }


.rms-full-logo {
	position: fixed;
	z-index: 1;
	top: 5%;
	left: 40%;
	opacity: 40%;
}
@media only screen and (max-width: 480px){ 

.rms-full-logo {
	position: fixed;
	z-index: 1;
	top: 4.5em;
	left: 4.3em;
	opacity: 40%;
}
}
	
#logo {
	float: left;
	font-family: 'Anton', sans-serif;
	font-size: 39pt;
	color: #000000; }
	
	.c-logo {
		max-width: 90px;
		cursor: pointer;
	}
	
#footer {
	background-color: #000000; 
	color: #FFFFFF;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 25px;
	padding-bottom: 15px;
	vertical-align: bottom; 
	font-size: 11`pt;
	margin-bottom: 10px; }
	
#userInfo {
	float: right;
	text-align: right;
	padding-right: 5px;
	padding-top: 10px;
	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;}
	
#turn90 {
	margin-top: 175px;
	margin-bottom: 100px;
	margin-left: -75px;
	margin-right: -65px;
	padding-left: 45px;
	padding-right: 45px; 
	float: left;
	font-family: 'Anton', sans-serif;
	font-size: 39pt;
	border-bottom: solid;
	border-bottom-width: 2px;
	border-bottom-color: #ffffff;
	-ms-transform: rotate(270deg); /* IE 9 */
	-webkit-transform: rotate(270deg); /* Safari prior 9.0 */
	transform: rotate(270deg); /* Standard syntax */	
	}
	
#selector {
	width: 350px; }
	​
	
	
/* Filter Side Bar */
	.rating-normal {
		font-size: 10px;}
	.rating-highlighted {
		background: #fff200;
		font-size: 10px;}


/* Login page*/	
	/* grey box with the form */
		.emp-login-box {
			position: relative;
			top: 25%;
			left: 25%; 
		}


		.login-box { 
			margin-top: 125px;
			padding: 10px;
			text-align: left;
			padding-left: 25px;
			padding-right: auto;
			font-weight: 400;	
			font-size: 24px;
			}
		.login-table {
			padding-left: 25px;
			padding-right: 25px;
			width: 200px;	}
		.login-box-bottom {
			font-size: 8pt;
			text-align: right;	}
		.lg-blk-heading {
			font-family: 'Anton', sans-serif;
			font-size: 45pt;
			padding-bottom: 10px;
			color: #000000; }


		.welcome-rate-box{

		}	
/* Signup */
	.signup-box { 
		margin-top: 95px;
		padding: 10px 10px;
		text-align: left;
		font-weight: normal;
		width: 100%;
	}
		
/* Survey */
	.survey-box { 
		margin-top: 125px;
		padding: 10px;
		text-align: left;
		padding-left: 25px;
		padding-right: auto;
		font-weight: normal;
	}

	input.survey-checkbox{
		height: 25px;
		width: 25px;
	}

/* Admin Users */
	.title {
		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: #ebebeb;
		padding-left: 15px;
		font-weight: 100;	}
	tr.row2 {
		padding-left: 15px;
		font-weight: 100;	}
	tr.row2:hover {
		background: #ebebeb;
		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 */
	.xxxx-large {font-size: 24pt; }
	.xxx-large {font-size: 20pt; }
	.xx-large {font-size: 18pt; }
	.x-large {font-size: 16pt; }
	.large {font-size: 14pt; }
	.lm {font-size: 13.5pt;}
	.medium {font-size: 11pt; }
	.smaller {font-size: 9pt; }
	.small {font-size: 7pt; }
	.heading {font-size: 11pt;}
	.heading-centered {font-size: 11pt;
		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 */
/* --------------------------- Added this for android, hopefully it doesn't mess up iOS --------------------- */
form {
	display: inline-block;
}
	.side-by-side {
		/* This container will hold any containers needing to be placed side by side */
		white-space: nowrap;
		vertical-align:top;
		width: 380px;
		float: left;
		padding-bottom: 1%;
		}
		
	.side-by-side .extnd {
		width: 331px;
		margin-left: 0;
		margin-bottom: 0.5%;
		margin-top: 1.5%;
		text-align: left;
		z-index: 1000;
		height: 67px;
		cursor: pointer;
		
	}
	
	#selected_employee {
		display: inline-block;
		padding-top: 2%;
	}
	
	#selected_employee > .extnd { /* Select child of selected employee div */
		/*border: 0.3rem solid #ED2024;
		width: 322px;*/
		box-shadow: 0px 0px 10px 4px #ed2024;
	}
		
	.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 {
		background-color: #000000;
		color: #ffffff;
		font-family: 'Anton', sans-serif;
		font-size: 16px;
		cursor: pointer;
	}
		
	.whtButton {
		text-align: center;
		background-color: #ffffff;
		color: #000000;
		font-family: 'Anton', sans-serif;
		font-size: 30px;	
		padding-left: 7%;
		padding-right: 7%;
		border-radius: 3em / 3em;
		border: none;
		cursor: pointer;
		box-shadow: 0px 0px 2.5px 1px rgb(206, 206, 206), 1.5px 2.5px 1.5px 1px rgb(179, 179, 179);
	}
		
	.startButton {
		background-color: #ffffff;
		color: #000000;
		font-family: 'Anton', sans-serif;
		font-size: 30px;	
		padding-left: 25%;
		padding-right: 25%;
		border-radius: 3em / 3em;
		cursor: pointer;
	}
		
	.whtButton2 {
		background-color: #ffffff;
		color: #000000;
		font-family: 'Anton', sans-serif;
		font-size: 30px;
		border-radius: 3em / 3em;
		padding: 0 7% 0 7%;
		cursor: pointer;
		}
	.redButton {
		background-color: #ed2024;
		color: #fff;
		font-family: 'Anton', sans-serif;
		font-size: 30px;
		border-radius: 3em / 3em;
		-webkit-appearance: none;
		box-shadow: 0px 0px 0px 1px white, 1.5px 2.5px 1.5px 1px rgb(179, 179, 179);
		border: none;
		text-shadow: 0px 0px 2px black;
		padding-top: 1%;
		padding-bottom: 0.5%;
		padding-left: 7%;
		padding-right: 7%;
		font-weight: normal;
		cursor: pointer;
		}
		/* This is the logo red: #ed2024 */
	

hr { background-color: #000000; }



/* DROPDOWN MENU */
/* The container - needed to position the dropdown content */
.dropdown {
	display: inline-block;
	width: 328px;
	height: 45px;
	font-size: 17pt;
	margin-bottom: -5%;
	border-radius: 5px;
	cursor: pointer;
	}

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

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

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

/* Change color of dropdown links on hover */
.dropdown-content a: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;}

/* Customer Login Page */

.l-input {
	width: 350px;
	height: 40px;
	font-size: 20pt;
	margin-left: 5px;
}
.s-input {
		width: 97.5%;
		height: 4vh;
		font-size: 17pt;
}
.rtg-input {
		width: 326px;
		height: 40px;
		font-size: 17pt;
		border-radius: 5px;
	}
.reg {
		height: 35px;
		width: 300px;
		font-size: 24px;
		margin-left: -5%;
	}
#pls-reg {
	position: absolute;
	left: 140px;
	font-weight: normal;
	font-size: 16pt;
	margin-left: -5%;
}
	
/* Mobile Only - iOS Styling  changed from 600 to 812 for iphone*/
@media only screen and (max-width: 812px) and (min-device-width: 375px) {
			.welcome-rate-box{
			margin-top: 50px;
		}	
	/* Login Inputs */
	.l-input {
		width: 300px;
		height: 40px;
		font-size: 17pt;
	}
	/* Signup Inputs */
	
	#s-form {
		display: inline-block;
		width: 100%;
		text-align: left;
	}
	
	.s-input {
		width: 82.5%;
		height: 40px;
		font-size: 15pt;
	}
	
	/******* Register rewards */
	.reg {
		height: 40px;
		width: 300px;
		font-size: 24px;
		margin-left: -5%;
	}
	
	#pls-reg {
		left: 143px;
	}
	
	/******* Rating *******/
	.rtg-input {
		width: 298px;
		height: 50px;
		font-size: 17pt;
	}
	
	#full_name {
		display: block;
		max-width: 100%;
		margin-top: -15px;
	}
	
	.dropdown {
		width: 322.6px;
		height: 55px;
		padding-bottom: -15px;
	}
	
	#employeeSelection {
		position: inline-block;
		top: 29vh;
		left: 20%;
		z-index: 1000;
	}
	/* Employee list items */
	
	.side-by-side .extnd {
		width: 323px;
		margin-left: 1.5%;
		margin-bottom: 0.5%;
		margin-top: -1px; /* Handle how close selected employee is to input box*/
		text-align: left;
		z-index: 1000;
		height: 65px;
	}
	
	#selected_employee {
		text-align: center;
		width: 90%;
		margin-left: -1%;
		margin-top: 2.5%;
		z-index: 50;
	}
	
	#selected_employee > .extnd { /* Select child of selected employee div */
		box-shadow: 0px 0px 10px 4px #ed2024; 
		/*box-shadow: 0px 0px 10px 4px #EFEA25;
		width: 313px;*/
	}
	
	/******* Survey *******/
	.unavail {
		width: 60%;
		/*margin-left: 5%;*/
		display: inline-block;	
		padding-left: 5%;
	}
	
}

/*************** Hamburger Menu ***************/
.menu-btn {
  position: absolute;
  z-index: 50;
  right: 70px;
  top: 40px;
  cursor: pointer;
  transition: all 0.4s ease-in;
  padding: 8px 8px 8px 8px;
}

.menu-btn .btn-line {
width: 29px;
height: 3px;
margin: 0 0 5px 0;
background: black;
transition: all 0.5s ease-out;
}
	
	/* Transition for when .close is added to class */
	.menu-btn.close {
    transform: rotate(180deg); }
    .menu-btn.close .btn-line:nth-child(1) {
      transform: rotate(45deg) translate(10px, 6px); }
    .menu-btn.close .btn-line:nth-child(2) {
      opacity: 0; }
    .menu-btn.close .btn-line:nth-child(3) {
      transform: rotate(135deg) translate(-5px, 1px); }

/* add menu options */
.menu {
  position: fixed;
  top: 95px; /* container height from top - may need to change per logo */
  right: 0;
  width: 100%;
  /* background-color: rgba(128, 128, 128, 0.4); */
  z-index: 49;
  visibility: hidden;
  text-align: center;
  height: 100%;
  transform: translate3d(500px, 0px, -500px);
  transition: all 0.5s ease-out;
 }
.menu.show {
visibility: visible;
transform: translate3d(0px, 0px, 0px);
}

.menu-nav {
margin: 0;
padding: 0;
background: rgba(255, 255, 255, 0.8);
list-style: none;
transform: translate3d(0px, 0px, 0px);
}

.menu-nav.show { /* Need to add .show to menu-nav to animate nav options too */
  transform: translate3d(0px, 0px, 0px);
}
  
.nav-link {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	border: none;
	background: rgba(255, 255, 255);
	font-size: 30px;
	width: 100%;
	height: 100%;
	padding: 2% 0 2% 0;
	font-family: 'Anton', sans-serif;
	font-weight: 400;

}

.nav-item {
	border: 2px solid rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.m-form {
	width: 100%;
}

/*---------------- Profile Page ---------------------*/

#profile-container {
	margin-top: 100px;
	text-align: left;
}

.p-greeting {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
}

.p-greeting {
	font-size: 40px;
}

.profile-items {
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-items .p-item {
	height: 40px;
	width: 300px;
	font-size: 26px;
}

.item-label {
	font-size: 24px;
}

.submit-box {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}

.exit-box {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}

.sv-input {
	height: 38px;
	width: 280px;
	font-size: 20pt;
}

#answer-container {
	position: static;
	padding-left: 75px;
	font-size: 1.75rem;
	/* background-color: rgba(0, 0, 0);
	margin: 1px 1px 1px 1px; */
}

input[type=radio] {
   /* border: 0.5px; */
    width: 15%;
    height: 2em;
}

#rating1 {
	cursor: pointer;
}
#rating2 {
	cursor: pointer;
}

#rating3 {
	cursor: pointer;
}

#rating4 {
	cursor: pointer;
}
#rating5 {
	cursor: pointer;
}

.survey-item { cursor: pointer;}

.survey-disclaimer {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 100;
	font-size: 14pt;
	max-width: 73vw;
}

input + label { cursor: pointer;}
label > input {cursor: pointer;}
#answer-container > label {cursor: pointer;}

@media only screen and (min-width: 768px){
	#content {
		margin-top: 5%;
	}
	
  }


  @media only screen and (min-width: 500px){ 
	  .centered {
		display: flex;
		margin-left: 50px;
	  }
  }