.main__container {
	display: flex;
	flex-direction: column;
}
.container{
	padding: 12px 35px;
	font-size: 1em;
	line-height: 1.6;
	font-family: 'Exo 2', 'Open Sans', sans-serif;
	background: #ffffff;
	border-radius: 4px;
}
.footer{
	grid-column: 1 / span 2;
	grid-row: 3 / span 1;
	display: flex;
	flex-direction: column;
	background:none !important;
}

@media (min-width: 720px) {
	.dimensions{
		display:inline-block;
		width: 30%;
	}   
}

@media (min-width: 720px) {
	.main__container{
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 50%));
		grid-template-rows: auto auto auto;
	}
	.footer{
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
		display: grid;
		grid-template-columns:50% 50%;
		grid-template-rows:auto;
		background:none !important;
		padding-right:0px;
	}   

}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
}

.calculator{
	grid-column: 1 / 1;
	grid-row: 1 / span 2;
	text-align: center;
}

input, select{

	height: 2em;
	border-top:none;
	border-left: none;
	border-right: none;
	border-bottom: 1px groove darken(white, 5);
	margin-bottom: 5px;
	font-family: 'Exo 2','Open Sans', sans-serif;
	font-size: 14px;
	text-align: center;
	background-color: #f9f9f9; 
	font-weight: 600;

}

input{
	width:80%;
}
#transport__mode{
	width: 70%;
	max-width: 50%; 
	margin-left: 20px;
	font-weight: 600;

}

button{
	display:block;
	width:80%;
	font-family: 'Exo 2', 'Open Sans', sans-serif;
	font-size: 1em;
	line-height: 2;
	font-weight: 300;
	background: #004f7c;
	border: none;
	color: #ffffff;
}

.item__delete__btn{
	display:inline;
	font-size: 1em;
	background: none;
	border: none;
	color: #004f7c;
	line-height: 1;
}


label{
	font-size: 14px;
}

.results{
	grid-column: 2 / 2;
	grid-row: 1 / span 1;

}

.items{
	grid-column: 2 / 2;
	grid-row: 2 / span 1;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 70px auto;
}

.tr__mode {
	grid-column: 1 / span 2;
}
.volratio{
text-align:left;
	font-size:0.8em;
	padding-bottom:6px;

}

.information__container{
	grid-column: 1 / span 1;
	display:block;
	font-size:14px;

}
.clear__all{
	grid-column: 2 / span 1;
	text-align: center;

}

.clear__all__btn{
	margin:10px auto 0px auto;
}

.calculator__container{
	text-align: center;
}

.section__heading{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}
.information__container span{
	display:block;
}

.item__container{
	grid-column: 1 / span 1;
	grid-row: 2 / span 1;
	text-align: right;
	font-size: 14px;
}

.calculator label, .calculator button{
	display:block;
	margin:10px auto 0px auto;
}
.item div{
	display: inline-block;
}

.item{
	display:grid;
	grid-template-columns: 1fr 2fr 4fr 2fr 2fr auto;
	grid-template-rows: repeat(auto-fill, 1fr);
	padding:0px 12px 0px 12px;
}
.item__quantity{
	grid-column: 1 / 1;
}
.item__weight{
	grid-column: 2 / 2;
}
.item__dims{
	grid-column: 3 / 3;
}

.item__total__weight{
	grid-column: 4 / 4;
}

.item__total__volume{
	grid-column: 5 / 5;
}
.item__delete__btn{
	grid-column: 6 / 6;
}

hr{
	display: block;
	border: 1px inset darken(white, 5);
}

.total__label{
	font-size: 14px;
}

.totals__container{
	display:grid;
	grid-template-columns: 60% 40%;
	font-weight: 400;
}

.gr__totals{
	grid-column: 1 / span 2;
}
.ch__totals{
	grid-column: 1 / span 2;
}

.total__qty > *, .total__weight > *, .total__volume > *,  .total__chargeable__weight> * {
	display: table-cell;
	height:25px;
	width: 100%;
	vertical-align: bottom;
}

.total__qty__value, .total__weight__value, .total__volume__value, .total__chweight__value  {
	text-align: right;
	font-weight: 600;
}

.total__chweight__value{
	font-size: 2em;
	color:#004f7c;
}
.error__container{
	 color: red;
	 text-align: center;
	
}
span{
	pointer-events: none;
}