@import "responsive_fitting_labels.css";

/* BASICS */

@media (max-width: 1023px) {
	html {
		box-sizing: border-box;
	}
	
	*, *:before, *:after {
		box-sizing: inherit;
	}
	
	div#blue_bg, div.info_popup, section#calculator, div#left_area, div#project_nav, div#site_nav, div#input_values, div.notes_field, div.description, div#right_area, div#fitting_display, #calc_message, footer {
		width: auto;
		height: auto;
		position: static;
	}	
	
	h1#page_title {
		max-width: calc(100% - 30px);
		color: #0f649d;
		text-shadow: none;
		top: 105px;
		left: 15px;
	}
	
	div#blue_bg {
		/*background-size: 100% auto;*/
		background: white;
	}
	
		div#left_area {
			max-width: 364px;
			margin: 60px 15px 0;
			position: relative;
			box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
		}
		
			div#project_nav {
				padding-left: 15px;
				padding-bottom: 8px;
				background-position: right bottom;
				background-size: cover;
			}
		
			div.project_nav_input_group input {
				box-sizing: content-box;
			}
			
				div#site_nav {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding-right: 26px;
				}
				
					img#delete_site {
						margin-left: 6px;
						margin-right: calc( 100% - 170px - (18px * 2) - 6px );
					}
			
				div#site_switcher {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: static;
				}
				
					img#prev_site {
						position: static;
					}
					
					img#next_site {
						position: static;
					}
					
			div#input_values {
				height: 380px;
				padding: 15px;
			}
			
				input.custom-combobox-input {
					box-sizing: content-box;
				}
				
			div#left_bottom_gray_bar {
				width: 100%;
				height: 15px;
			}
					
			img#left_area_right_shadow {
				display: none;
			}
			
	div#right_area {
		max-width: calc( 100% - 30px );
		margin: 15px;
	}
	
		div#fitting_display {
			position: relative;
		}
	
			div#fitting_text {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: stretch;
				height: 90px;
				margin-top: 30px;
				padding: 0 15px;
				position: static;
			}
	
				div.result_text {
					height: auto;
					font-size: 14px;
					line-height: 1.3;
				}
				
			div#fitting_labels {
				width: 100%;
				height: calc( 100% - 90px );
				position: absolute;
				top: 0;
				left: 0;
			}
	
		div#right_bottom_gray_bar {
			height: auto;
			padding: 5px 0 0;
			position: static;
		}
		
		div#right_bottom_decoration {
			position: static;
		}
			
	footer {
		margin-top: 20px;
		padding: 0 15px 15px;
		color: #0f649d;
	}
	
		footer a {
			color: #0f649d;
		}
	
		div#contact_info {
			width: 100%;
			position: static;
		}
		
			div#contact_email {
				position: static;
			}
			
			div#contact_phone {
				margin-top: 10px;
				position: static;
			}
			
	section#calculator {
		position: relative;
		top: auto;
		left: auto;
	}
			
	body div.popup_window {
		width: 100% !important;
		height: auto !important;
		position: absolute;
		top: 65px;
		left: 0;
	}
	
	div.notes_field textarea {
		display: block;
		width: 100%;
		height: 300px;
	}
	
	button#close_project_notes, button#close_site_notes {
		position: static;
	}
	
	div#upload, div#save, div#print, div#csv {
		left: 0;
	}
	
	#file_menu > ul > li > ul.support_docs, #file_menu > ul > li > ul.help {
		left: auto;
		right: 0;
	}
	
	.info_popup img {
		max-width: 100%;
		height: auto;
	}
	
	div#definitions_info_popup table {
		width: 100%;
	}
	
	.responsive_table {
		overflow-x: auto;
	}
	
	div#conversions_info_popup table {
		width: 100%;
		float: none;
	}
	
	.info_popup td, .description_popup_window {
		padding: 1px 5px;
	}
	
	div.info_popup h2 {
		max-width: calc(100% - 60px);
	}
	
	#soil_type_description table.descriptions {
		float: none !important;
		width: 100% !important;
	}
}

@media (max-width: 767px) {
	div.fitting_label {
		font-size: 14px;
		background: transparent;
		text-shadow: 0px 0px 2px white;
	}
}

@media (max-width: 480px) {
	#file_menu > ul > li {
		padding: 6px 9px;
	}
	
	#file_menu > ul > li.hovering, #file_menu > ul > li:hover {
		padding: 5px 8px;
	}
	
	#file_icons img {
		height: auto;
		width: 20px;
	}
	
	#file_icons > ul > li > a {
		padding: 5px 3px;
		font-size: 10px;
	}
	
	h1#page_title {
		font-size: 22px;
	}
	
	div.fitting_label {
		min-width: 0;
	}
}

@media (max-width: 380px) {
	div.project_nav_input_group label {
		font-size: 12px;
	}
	
	div#input_values > div > a, div#input_values > div.fitting_specific_inputs > div > a {
		font-size: 12px;
	}
	
	div.project_nav_input_group input {
		width: 120px;
	}
	
	div#input_values > div > img.rlc_tooltip, div#input_values > div.fitting_specific_inputs > div > img.rlc_tooltip {
		right: 155px;
	}
	
	input.custom-combobox-input {
		width: 130px;
	}
}