/*top, right, bottom, left*/

/*Grids*/

.header {
	display: flex;	
	height: 56.19px;
	justify-content: space-between;
	background-color: #232b2b;
}
.column_select_grid, .query_results_container, .database_schema_container {
	display: grid;	
	grid-template-columns: 17.5% 65% 17.5%;
}
.explanation_container {
	display: grid;	
	grid-template-columns: 10% 80% 10%;
}
.column_select_item_container, .schema_text_container  {
	display: grid;	
	grid-template-columns: 100% 2%;
}
.feature_grid {
	display: grid;
	grid-template-columns: 15% 83%;
	grid-column-gap: 2%;
}
.footer_container {
	padding: 30px 0px;
	border-top: 1px solid #d9dadb;
	background-color: rgba(218, 218, 218, 0.28);
}

/*Containers*/

.center_between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.perfect_center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.column_center {
	display: flex;
	justify-content: space-between;
}
.center_right_item {
	align-self: flex-end;
}
.row_center {
	display: flex;
	align-items: center;
}
.logo_text {
	margin-left: 12px;
}
.fa {
  color: #656a6a;
  color: #656a72;
}
a:hover, a:focus {
	text-decoration: none !important;
}
.column_select_item {
	margin-bottom: 6px;
}
.query_container {
	background-color: #eff0f1;
	margin: 0px 0px 12px 0px;
}
.edit_schema_container {
	/*top, right, bottom, left*/
	margin: 59px 0px 0px 12px;
}
.footer_links_container {
	display: flex;
	justify-content: center;
}
.footer_link_element {
	margin: 0px 30px;
}
.contact_header_container {
	margin-right: 12px;
}

/*Welcome Formatting*/

.welcome_header {
	font-size: 22px;
	/*font-weight: 600;*/
	/*color: #414a4c;*/
	color: #444752;
	/*color: #232b2b;*/
	/*font-family: "Proxima Nova Soft", serif;*/
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
}
.explanation_container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;	
	grid-gap: 10px;
	padding: 0px 20px;
	height: 120px;
}
.explanation {
	/*border: .5px solid #b3b6b7;*/
	border-radius: 6px;
	padding: 4px 8px;
	/*background-color: #d0d8df;*/
}
.explanation_heading {
	color: #464a4f;
	/*color: #232b2b;*/
	margin: 6px 0px;
	font-size: 20px;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
}
.explanation_description, .feature_description {
	color: #93969c;
}
.flex_explanation, .flex_feature {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.flex_feature {
	text-align: center;
}
.mission_diagram {
	width: 100%;
	font-family: proxima-soft, sans-serif;
	font-family: 'Nunito Sans', sans-serif;
	color: #eef1f3;
	/*background-color: #eef1f3;*/
	/*background-color: #666e6f;*/
	/*background-color: #e9e9e9;*/
	background-color: #656a6a;
	border-top: 2px solid #444444;
	border-bottom: 2px solid #444444;	
	padding: 25px 20px;
	display: inline-block;
	font-size: 18px;
	white-space: pre-line;
	text-align: center;
	margin: 0px;
}
.mission_message {
	margin: 24px 0px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.features_container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;	
	grid-gap: 24px;
	padding: 0px 10px;
	margin: 0px 260px 24px 260px;
 	height: 380px;
}
.feature {
	border: 1px solid #93969c;
	border-radius: 6px;
	padding: 4px 8px;
	/*background-color: #e3e3e4;*/
	/*background-color: #e9e9e9;*/
	/*background-color: #93969c;*/
	/*background-color: #f4f4f5;*/
}
.feature_heading {
	/*color: #464a4f;*/
	color: #656a72;
	/*color: #232b2b;*/
	font-weight: bold;
	font-size: 18px;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;	
}

/*Buttons*/

#add_column_button, #edit_schema_cancel_button {
	/*margin-top: 6px;*/
	background-color: #fff;
	color: #1c3d5c;
	border-color: #1c3d5c;
	outline: none;
}
#schema_button {
	background-color: #fff;
	color: #1c3d5c;
	border-color: #1c3d5c;
	outline: none;	
}
#get_queries_button, #new_request_button {
	background-color: #fff;
	color: #444444;
	border-color: #444444;
	outline: none;	
}
.schema_href {
	color: #444444;
}
.schema_href:hover {
	color: #1c3d5c;
}
#queries_list_submit, #edit_schema_submit, #trial_button {
	outline: none;
	background-color: #d46d1b;
	border-color: #eef1f3;
	color: #eef1f3;
}
#trial_button {
	/*top, right, bottom, left*/
	font-size: 18px;
	padding: 12px 12px;
	margin: 16px 0px 16px 0px;
	font-family: 'Nunito Sans', sans-serif;
}

/*Headers*/
.header_link {
	color: #eef1f3;
	color: #d6d8da;
	margin: 0px 12px;
	font-size: 12px;
}

/*Footer*/

.footer {
	height: 80px;
}
.footer_background {
	border-top: 1px solid #d9dadb;
}
.copyright_text {
	color: #666A73;
	text-align: right;
	font-weight: bold;
}
.footer_link {
	color: #4682b4;
	text-decoration: none;
	font-size: 16px;
}
.footer_link:hover, .header_link:hover  {
	color: #9b9ea1;
}

/*Schema*/

.schema_text, .schema_textarea {
	white-space: pre-wrap;
	height: 500px;
	width: 100%;
	display: block;
	font-size: 12px;
	margin-bottom: 6px;
}

/*Headers*/

.results_header {
	margin: 20px 0px 20px 2px;
}

/*Warnings*/

#demo_warning {
	font-size: 14px;
	border: 1px solid #444444;
	background-color: #FFF8DC;
	background-color: #fffbed;
	padding: 12px 6px;	
	/*top, right, bottom, left*/
	margin: 20px 0px 20px 0px;
	border-radius: 4px;
}

/*Flashes*/

.flash_text {
	background-color: transparent;
	border: none;
	padding: 0px;
	font-size: 16px;
	margin: 10px 0px;
	font-family: "Arial", "Verdana";
}
.error_flash {
	font-size: 20px;
	border: 2px solid #ff6178;
	background-color: #ffcfd6;
	padding: 6px;
	margin: 16px 0px;		
}
.success_flash {
	font-size: 20px;
	border: 2px solid #dff7df;
	background-color: #f5fcf5;
	padding: 6px;
	margin: 16px 0px;	
}
.flash_close {
	font-size: 24px;
	cursor: default;
}
.flash_close:hover {
	color: #aaa;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/*Add home page class to end so it overrides previous margin*/
.flash_home_page {
}

/*Loader*/

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}
.loader_content {
	border: none;
	margin: 10% auto auto auto;
	background-color: transparent;
	width: 64%;
}
#loading {
    width: 35px;
    height: 35px;
    /*display: none;*/
    background: url(loader.gif);
    cursor: wait;  
    background-position: 50% 50%;            
    background-repeat: no-repeat;
    margin: 0 auto;
}

/*Universal*/

h3 {
	margin-top: 10px;
}
body {
	margin: 0;
	padding: 0;
}
.invisible_form {
	display: none;
}
.visible_form {
	display: block;
}
.inline_form {
	display: inline;
}
img {
	height: 16px;
	width: 72px;
}

/*Select2*/

.select2-container{ 
	width: 100% !important; 
}
.select2-selection__rendered {
    line-height: 35px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 35px !important;
}
span.select2-selection.select2-selection--single {
        outline: none;
}

/*Icons*/

.fa-trash {
	margin-left: 4px;
	margin-top: 10px;
	height: 24px;
	color: #444444;
	text-align: right;
}

/*Media Queries*/

@media only screen and (max-width: 1180px) {	

	.column_select_grid, .query_results_container, .database_schema_container {
		display: grid;	
		grid-template-columns: 7.5% 85% 7.5%;
	}
	.welcome_header {
		margin: 16px 4px;
		text-align: center;
	}
	.explanation_container, .mission_message,  .features_container {
		display: inline;
		padding: 0px;
		margin: 0px;
	}
	 .features_container {
		text-align: center;

	 }
	.mission_diagram {
		padding: 14px 8px;
		margin: 16px 8px 16px 0px;
	}
	.flex_feature, .welcome_background {
		/*top, right, bottom, left*/
		margin: 16px 4px 16px 4px;
	}
	.flex_explanation {
		margin: 16px 0px;
	}
	.results_header {
		margin: 20px 4px 20px 2px;
		display: block;
	}
	.query_container {
		white-space: pre-wrap;
	}

}