/* Tyler's list of common used (helper) classes to make life easier */
/* Created on 11.20.2019 */
/* Use these classes to begin each new site */

body {
	font-family: 'Heebo', sans-serif;
	margin: 0px;
}
.float {
	float: left;
}
.span_it {
	width: 100%;
}
main {
	float: left;
	width: 100%;
}
.inner {
	float: left;
	margin-left: 15%; /* SET MARGINS FOR THE PAGE WIDTH */
	width: 70%; /* SET MARGINS FOR THE PAGE WIDTH */
}
.pad_5 {
	padding: 5px;
}
.pad_10 {
	padding: 10px;
}
.pad_15 {
	padding: 15px;
}
.spacer {
	margin-top: 25px;
}
h2 {
	text-decoration: none;
}
a {
	color: inherit;
	text-decoration: none;
}
.drop_shadow {
	-webkit-box-shadow: 10px 10px 20px -12px rgba(0,0,0,1);
	-moz-box-shadow: 10px 10px 20px -12px rgba(0,0,0,1);
	box-shadow: 10px 10px 20px -12px rgba(0,0,0,1);
}

/* BUTTONS */
.cold_button {
	float: left;
	padding: 15px;
	padding-left: 25px;
	padding-right: 25px;	
	cursor: pointer;
	margin: 15px;
	margin-left: 0px;
	font-weight: bold;
	transition: ease 1s;
	color: white; /* ADJUST COLOR */
	background-color: none; /* ADJUST COLOR */
	border: solid white 1px; /* ADJUST COLOR */
}
	.cold_button:hover {
		background-color: white; /* ADJUST COLOR */
		color: black; /* ADJUST COLOR */
		opacity: 0.8;
		transition: ease 1s;
	}
.hot_button {
	float: left;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;	
	border-radius: 1000px;
	cursor: pointer;
	margin-left: 0px;
	transition: ease 1s;
	color: white; /* ADJUST COLOR */
	background-color: #4540A7; /* ADJUST COLOR */
	border: solid #4540A7 1px; /* ADJUST COLOR */
}
	.hot_button:hover {
		background-color: #15115B; /* ADJUST COLOR */
		color: white; /* ADJUST COLOR */
		opacity: 0.8;
		transition: ease 1s;
	}
	
/* TABLES */
.gen_table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid white;
  padding: 5px;
}
tr {
	background-color: white;
}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
th {
  padding: 5px;
  text-align: left;
  background-color: #343A3F;
  color: white;
}
	
/* MEDIA TYPES -- RESPONSIVENESS */
@media only screen and (max-width: 1000px) {
	.inner {
		margin-left: 2%; /* SET MARGINS FOR THE PAGE WIDTH */
		width: 96%; /* SET MARGINS FOR THE PAGE WIDTH */
	}
}

/* End of Tyler's helping classes. All custom classes begin here. */
.gen_container {
	float: left; 
	width: 40%; 
	margin-left: 30%; 
	margin-top: 80px;
	padding-bottom: 150px;
}
.logo {
	width: 40%; 
	margin-left: 30%; 
	filter: invert(1) brightness(100); 
}
.input_icons {
	width: 60%; 
	height: 60%; 
	margin-top: 10px; 
	filter: invert(1) brightness(100);
}
.white_svg {
	filter: invert(1) brightness(100);
}
.login_container {
	float: left;
	width: 100%;
	margin-top: 20px;
	background-color: white;
	border-radius: 20px;
	transition: ease 0.5s;
}
.user_img {
	float: left;
	font-size: 20px;
	border: solid 1px #C2CCD5;
	border-width: 1px 0px 1px 1px;
	background-color: #C2CCD5;
	width: 9%;
	height: 45px;
	text-align: center;
}
.input_container {
	margin-bottom: 15px;
}
.submitter {
	width: 98%;
}
.other_steps {
	margin-top: 25px; 
	margin-bottom: 25px; 
	text-align: center;
}
.alert {
	margin-bottom: 30px; 
	font-size: 25px; 
	color: white; 
	text-align: center;
}
.alert_icon {
	height: 25px;
}
@media only screen and (max-width: 1200px) {
	.gen_container {
		float: left; 
		width: 60%; 
		margin-left: 20%; 
		margin-top: 100px;
		padding-bottom: 150px;
	}
	
}
header {
	background: rgb(48,26,155);
	background: linear-gradient(142deg, rgba(48,26,155,1) 0%, rgba(8,93,225,1) 100%);
	background-repeat: no-repeat;
    background-attachment: fixed;
	position: fixed;
	width: 100%;
}
.header_extender {
	float: left;
	width: 100%;
	height: 100px;
}

@media only screen and (max-width: 1000px) {
	body {
		font-size: 30px;
		-webkit-appearance: none;
	}

	.submitter {
		-webkit-appearance: none;
	}
	.input_container {
		margin-bottom: 25px;
	}
	.gen_container {
		float: left; 
		width: 90%; 
		margin-left: 5%; 
		margin-top: 100px;
		padding-bottom: 150px;
	}
	.user_img {
		border: solid 1px #C2CCD5;
		border-width: 1px 0px 1px 1px;
		background-color: #C2CCD5;
		width: 9%;
		height: 70px;
		margin-top: 2px;
		text-align: center;
	}
	.logo {
		margin-bottom: 50px;
	}
	.pad_15 {
		padding: 25px;
	}
	
}