@import url('//fonts.googleapis.com/css?family=Sarabun:300,400,600,700,800&display=swap');

body {
	padding-right: 0;
	padding-left: 0;
	color: #393939;
	font-family: 'Sarabun', Arial, Helvetica, sans-serif;
	background: #007940 url("banner_amgs.png") top center no-repeat;
	background-size: contain;
	}

/* Form Wrapper */
.form-wrapper {
	padding-right: 12px;
	padding-left: 12px;
	}

/* Hero */
.container-fluid {}
	.container-fluid.hero {
		background: url("banner_amgs.png") top center no-repeat;
		background-size: cover;
		}
		.container-fluid.hero .col-12 {
			position: relative;
			height: 160px;
			}

/* Media Queries */
@media screen and (max-width: 400px){
	.container-fluid.hero .col-12 { height: auto; }
}


/* Logo */
.container-fluid.hero .logo {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -60px 0 0 -178px;
	display: block;
	width: 358px;
	height: auto;
	border: 0 none;
	}


/* Media Queries */
@media screen and (max-width: 400px){

	/* Logo */
	.container-fluid.hero .logo {
		position: relative;
		top: auto;
		left: auto;
		margin: 15px auto;
		width: 100%;
		max-width: 100%;
		}
}


/* Containers */
.container {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 15px;
	border: 1px solid #186b44;
	background-color: #fff;
	background-color: rgba(255,255,255,0.95);
	
	-webkit-border-radius: 	3px;
	-moz-border-radius: 	3px;
	border-radius: 			3px;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.10);
	-moz-box-shadow: 	0 0 10px rgba(0,0,0,0.10);
	box-shadow: 		0 0 10px rgba(0,0,0,0.10);
	}
	.container > .row {}
		.container > .row.section-name {}
		.container > .row.header-calculations {}
		.container > .row.section-sub-name {}
		
		/* Section Header */
		.container > .row h2 {
			margin: 0 -15px 15px;
			padding: 5px 15px 15px;
			font-size: 1.65rem;
			font-weight: bold;
			font-weight: 600;
			border-bottom: 1px solid #e0e0e0;
			}
		
		/* Subheader */
		.container > .row h3 {
			font-size: 1.35rem;
			font-weight: normal;
			font-weight: 400;
			}
		
		/* Label Tags */
		.container label { cursor: pointer; }
		
		/* Solvent Header */
		.container > .row .solvent-header {
			padding-bottom: 5px;
			}
			.container > .row .solvent-header a,
			.container > .row .solvent-header div,
			.container > .row .solvent-header label {
				padding: 5px 16px;
				display: block;
				color: #fff;
				font-size: 0.90rem;
				text-transform: uppercase;
				background-color: #0d56a5;
				
				-webkit-border-radius: 	3px;
				-moz-border-radius: 	3px;
				border-radius: 			3px;
				}
				.container > .row .solvent-header a:hover {
					text-decoration: none;
					}
		
		/* Solvent Form Controls */
		.solvents .form-group {
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%;
			}
			.solvents .form-control { width: 100%; }
		
		/* Disabled Fields: Perpendicular */
		.container > .row input[readonly] + input[readonly] {
			margin-top: 5px;
			}
	
	.form-top {}
		.form-top.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			margin-top: 0;
			width: 100%;
			max-width: 100%;
			
			-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
			-moz-box-shadow: 	0 0 10px rgba(0, 0, 0, 0.10);
			box-shadow: 		0 0 10px rgba(0, 0, 0, 0.10);
			}
	
	/* Section: Header Buttons/Method */
	.container.button-header {
		margin-top: 0;
		}
		
		/* Active Sticky Button Header/Method */
		.form-top.fixed .container.button-header,
		.form-top.fixed .container.method-number {
			width: 100%;
			max-width: 100%;
			border-width: 0 0 1px;

			-webkit-border-radius: 	0;
			-moz-border-radius: 	0;
			border-radius: 			0;
			-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.00);
			-moz-box-shadow: 	0 0 0 rgba(0, 0, 0, 0.00);
			box-shadow: 		0 0 0 rgba(0, 0, 0, 0.00);
			}
			.form-top.fixed .container.button-header {
				margin-bottom: 0;
				border-width: 0;
				}
			.form-top.fixed .container.method-number {
				margin-top: 0;
				margin-bottom: 0;
				padding-top: 25px;
				}

			/* Inner */
			.form-top.fixed .container.button-header .stick-inner,
			.form-top.fixed .container.method-number .stick-inner {
				margin: 0 auto;
				padding-right: 15px;
				padding-left: 15px;
				width: 100%;
				max-width: 1140px;
				}
				.form-top.fixed .container.method-number .stick-inner {
					padding-right: 15px;
					padding-left: 15px;
					}
				
				.btn.btn-warning.clear {
					color: #fff !important;
					}
			
			.form-top.fixed + .container.method {
				margin-top: 425px;
				}
			
			/* Media Queries */
			@media screen and (min-width: 576px){
				.form-top.fixed .container.button-header .stick-inner,
				.form-top.fixed .container.method-number .stick-inner {
					max-width: 540px;
					}
			}
			@media screen and (min-width: 768px){
				.form-top.fixed .container.button-header .stick-inner,
				.form-top.fixed .container.method-number .stick-inner {
					max-width: 720px;
					}
			}
			@media screen and (min-width: 991px){
				.form-top.fixed .container.button-header .stick-inner,
				.form-top.fixed .container.method-number .stick-inner {
					max-width: 960px;
					}
			}
			@media screen and (min-width: 1200px){
				.form-top.fixed .container.button-header .stick-inner,
				.form-top.fixed .container.method-number .stick-inner {
					max-width: 1140px;
					}
			}
			
			@media screen and (max-width: 640px){
				
				/* Fixed Container */
				.form-top.fixed {
					position: static;
					top: auto;
					left: auto;
					z-index: 9;
					margin-top: 0;
					width: 100%;
					max-width: 100%;
					
					-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.00);
					-moz-box-shadow: 	0 0 0 rgba(0, 0, 0, 0.00);
					box-shadow: 		0 0 0 rgba(0, 0, 0, 0.00);
					}
				
				/* Button Header */
				.form-top.fixed .container.button-header {
					position: fixed;
					top: 0;
					left: 0;
					z-index: 9;
					margin-top: 0;
					width: 100%;
					max-width: 100%;
					border-width: 0 0 1px;
					
					-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
					-moz-box-shadow: 	0 0 10px rgba(0, 0, 0, 0.10);
					box-shadow: 		0 0 10px rgba(0, 0, 0, 0.10);
					}
					.form-top.fixed .container.button-header .stick-inner {
						padding-right: 15px;
						padding-left: 15px;
						}
				
				/* Method */
				.form-top.fixed .container.method-number {
					margin-top: 68px;
					max-width: 540px;
					
					-webkit-border-radius: 	3px;
					-moz-border-radius: 	3px;
					border-radius: 			3px;
					}
					.form-top.fixed .container.method-number .stick-inner {
						padding-right: 0;
						padding-left: 0;
						}
				
				/* Method */
				.form-top.fixed + .container.method {
					margin-top: 10px;
					}
			}
			
			@media screen and (max-width: 575px){
				.form-top.fixed .container.button-header .stick-inner {
					padding-right: 0;
					padding-left: 0;
					}
			}

			@media screen and (max-width: 400px){
				.container.button-header .stick-inner .btn {
					margin: 0 0 10px;
					padding-right: 0;
					padding-left: 0;
					display: block;
					float: none;
					width: 100%;
					max-width: 100%;
					text-align: center;
					}
					.container.button-header .stick-inner .btn:last-child {
						margin-bottom: 0;
						}
				
				/* Method */
				.form-top.fixed .container.method-number {
					margin-top: 210px;
					}
			}

		.button-header-wrapper { text-align: right; }
	
	/* Section: Method Number */
	.container.method-number {}
	
	/* Section: Greenness Number */
	.container.greenness-score {}
	
	/* Section: Method */
	.container.method {}
	
	/* Section: Standards (Top) */
	.container.standards-top {}
	
	/* Section: Standards (Bottom) */
	.container.standards-bottom {}
	
	/* Section: Sample */
	.container.sample {}
	
	/* Section: SST */
	.container.sst {}
	
	/* Section: Sensitivity */
	.container.sensitivity {}
	
	/* Section: Mobile Phases (Top) */
	.container.mobile-phases-top {}
	
	/* Section: Mobile Phases (Bottom) */
	.container.mobile-phases-bottom {}
	
	/* Section: Instrument Conditions */
	.container.instrument-conditions {}
	
	/* Section: Notes */
	.container.notes {}



/* Field Colors */

/* Red */
.field-error {
	border-color: #e10000 !important;
	border-width: 2px !important;
	background-color: #fff3f3 !important;
	}
	.field-error:focus {
		-webkit-box-shadow: 0 0 0 0.2rem rgba(225,0,0,0.25) !important;
		-moz-box-shadow: 	0 0 0 0.2rem rgba(225,0,0,0.25) !important;
		box-shadow: 		0 0 0 0.2rem rgba(225,0,0,0.25) !important;
		}

/* Yellow */
.field-warning {
	border-color: #ffc107 !important;
	border-width: 2px !important;
	background-color: #fdfbdf !important;
	}
	.field-warning:focus {
		-webkit-box-shadow: 0 0 0 0.2rem rgba(225,193,7,0.25) !important;
		-moz-box-shadow: 	0 0 0 0.2rem rgba(225,193,7,0.25) !important;
		box-shadow: 		0 0 0 0.2rem rgba(225,193,7,0.25) !important;
		}

/* Green */
.field-success {
	border-color: #00be2c !important;
	border-width: 2px !important;
	background-color: #e9fcee !important;
	}
	.field-success:focus {
		-webkit-box-shadow: 0 0 0 0.2rem rgba(0,190,44,0.25) !important;
		-moz-box-shadow: 	0 0 0 0.2rem rgba(0,190,44,0.25) !important;
		box-shadow: 		0 0 0 0.2rem rgba(0,190,44,0.25) !important;
		}



/* Media Queries */
/* 800px (min-width) */
@media screen and (min-width: 800px){
	label[for="standards-top-solvent-percentage-1"],
	label[for="standards-top-solvent-percentage-2"],
	label[for="standards-top-solvent-percentage-3"],
	
	label[for="standards-bottom-solvent-percentage-1"],
	label[for="standards-bottom-solvent-percentage-2"],
	label[for="standards-bottom-solvent-percentage-3"],
	
	label[for="sample-solvent-percentage-1"],
	label[for="sample-solvent-percentage-2"],
	label[for="sample-solvent-percentage-3"],
	
	label[for="sst-solvent-percentage-1"],
	label[for="sst-solvent-percentage-2"],
	label[for="sst-solvent-percentage-3"],
	
	label[for="sensitivity-soin-solvent-percentage-1"],
	label[for="sensitivity-soin-solvent-percentage-2"],
	label[for="sensitivity-soin-solvent-percentage-3"],
	
	label[for="mobile-phases-top-solvent-percentage-1"],
	label[for="mobile-phases-top-solvent-percentage-2"],
	label[for="mobile-phases-top-solvent-percentage-3"] {
		position: absolute;
		margin: -1px 0 0 -1px;
		width: 1px;
		height: 1px;
		overflow: hidden;
		}
	
	.method-number-item,
	.greenness-score-total-item,
	
	.solvent-selection-item,
	.solvent-percentage-item {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		}
}

/* 768px (max-width) */
@media screen and (max-width: 768px){
	.col-4.solvent {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		}
}

/* 576px (max-width) */
@media screen and (max-width: 576px){
	.col-6.form-group {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		}
}