﻿#density-calculator.calculator-form {
	border: 1px solid #dbdbdb;
	margin: 50px auto;
	padding: 3.5rem 0 0;
	max-width: 48rem;
	background-color: #fff;
	box-shadow: 0 40px 40px -30px rgba(68,68,68,.28)
}

	#density-calculator.calculator-form h2 {
		font-size: 3.5rem;
		line-height: 3.6rem;
		font-weight: 800;
		text-transform: uppercase;
		color: #2D2926;
		text-align: center;
		padding: 0 2.5rem;
		margin-bottom: .8rem
	}

	#density-calculator.calculator-form .calculator-form-fields {
		padding: 0 1.8rem;
		display: flex;
		flex-flow: row wrap;
		list-style: none !important
	}

		#density-calculator.calculator-form .calculator-form-fields li {
			position: relative;
			padding: 1.3rem .6rem .5rem;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			width: 50%;
			margin: 0 0 10px
		}

			#density-calculator.calculator-form .calculator-form-fields li::before {
				display: none !important
			}

			#density-calculator.calculator-form .calculator-form-fields li label {
				font-size: 1.5rem;
				font-family: trade-gothic-next,sans-serif;
				font-weight: 400;
				color: #53565a;
				white-space: nowrap
			}

			#density-calculator.calculator-form .calculator-form-fields li input {
				border: none;
				border-radius: .4rem;
				background-color: transparent;
				box-shadow: inset 0 0 0 1px #c9c9c9;
				position: relative;
				padding: .8rem 2.2rem;
				height: 4.5rem;
				width: 100%
			}

				#density-calculator.calculator-form .calculator-form-fields li input:focus {
					outline: 0;
					box-shadow: inset 0 0 0 2px #1c9dd4
				}

				#density-calculator.calculator-form .calculator-form-fields li input:hover {
					box-shadow: inset 0 0 0 2px #1c9dd4
				}

				#density-calculator.calculator-form .calculator-form-fields li input.error {
					box-shadow: inset 0 0 0 2px #e03535
				}

					#density-calculator.calculator-form .calculator-form-fields li input.error + label,
					.calculator-form-fields li.error label {
						color: #e03535 !important
					}

			#density-calculator.calculator-form .calculator-form-fields li.error:after {
				content: "Value must be a positive number";
				position: absolute;
				left: .6rem;
				bottom: -1.8rem;
				color: #e03535;
				font-size: 1.3rem
			}

	#density-calculator.calculator-form .calculate-btn-wrapper {
		padding: 0 2.5rem
	}

		#density-calculator.calculator-form .calculate-btn-wrapper .calculate {
			margin: 1.5rem 0 1rem;
			width: 100%;
			font-size: 1.7rem;
			color: #fff;
			background-color: #3399cc;
			padding: 1rem 3rem;
			border-radius: 0;
			letter-spacing: .1rem;
			text-transform: uppercase;
			text-decoration: none;
			min-width: 15rem;
			display: inline-block;
			transition: all .3s ease-in-out;
			position: relative;
			font-weight: 800;
			border: none;
			white-space: normal;
			cursor: pointer;
			text-align: center
		}

	#density-calculator.calculator-form .calculator-form-result {
		margin: 2rem 0 0;
		padding: 1.5rem 2.5rem 1.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		background-color: #f3f3f3;
		box-shadow: inset 0 0 0 1px #c9c9c9
	}

		#density-calculator.calculator-form .calculator-form-result h3 {
			margin-bottom: 0;
			text-transform: none;
			color: #2D2926
		}

		#density-calculator.calculator-form .calculator-form-result .density {
			font-size: 3.6rem
		}

			#density-calculator.calculator-form .calculator-form-result .density.calculated {
				text-align: center;
				font-family: trade-gothic-next-condensed,sans-serif;
				font-weight: 800;
				width: 100%;
				border-radius: .4rem;
				background-color: #fff;
				box-shadow: inset 0 0 0 1px #1c9dd4;
				padding: 1rem 1rem;
				line-height: 1em;
				margin-top: 10px
			}

		#density-calculator.calculator-form .calculator-form-result .freight-class-label {
			font-size: 1.8rem;
			color: #53565a;
			margin-top: 15px; /* Adjust spacing as needed */
			font-weight: 600;
			text-align: center;
			width: 100%;
		}

.calculator-instructions {
	max-width: 768px;
	margin: 0 auto 10px;  
	font-size: 1.4rem;
	line-height: 1.6;
	color: #53565a;
}