.container{
	padding: 6px;
	font-size: 12px;
	line-height: 1.5em;
}
.container *{
	font-family: 'Raleway', sans-serif;
}

@media (min-width: 280px) {
	.main__container{
		display:grid;
		grid-template-columns: auto;
		grid-template-rows: repeat(auto auto auto);
	}
	.field{
		display:inline-block;
  		position:relative;
		overflow:hidden;
		width: calc(100%  /3);
	}  
	.dimensions{
		width:25%;
	}  

	
	
}

.gr__totals{
	margin-top: 15px;
}
.total__qty, .total__weight, .total__volume, .total__chargeable__weight{
		display:inline-block;
  		position:relative;
		overflow:hidden;
		text-align: center;
	width: 100%;
	color:#0053a0
		
	}

.total__qty,.total__weight, .total__volume{
		width:33%;
		
	}



.total__qty__value, .total__weight__value, .total__volume__value{
		position:relative;
	}


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

.calculator{
	grid-column: 1;
	grid-row: 1 / span 1;
}

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

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

input, select{
	height: 100%;
	line-height: 100%;
	width: 100%;
	border: 1px solid #d3d3d3;
	font-size: 16px;
	text-align: center;
	background:transparent;
	font-weight: 600;
	padding-top:10px;
}

input{
	position:relative;	
}
select{
	text-align-last:center;
}

.placeholder {
	position:absolute;
	font-size: 10px;
	padding-left: 1px;
	padding-top: 1px;
	color: gray;
}

#transport__mode{
	width: 100%;
	font-weight: 700;

}

button{
	display:block;
	width:100%;
	line-height: 2;
	font-weight: 300;
	background: #0053a0;
	border: none;
	color: #ffffff;
}

.item__delete__btn{
	display:inline;
	background: none;
	border: none;
	color: #0053a0;
	line-height: 1;
}

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

.clear__all__btn{
	margin:10px auto;
}

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

h2{
	text-transform:uppercase;
	font-weight:400;
	font-size:14px;	
}

.calculator>.section__heading>h2{
	font-weight:700;
}

.information__container span{
	display:block;
}

.item__container{
	grid-column: 1 / span 1;
	grid-row: 2 / span 1;
	text-align: right;
}
#item-header *{
	font-size: 10px;
}

.item div{
	display: inline-block;
}

.item{
	display:grid;
	grid-template-columns: 1fr 3fr 6fr 4fr 4fr 1fr;
	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-top: 1px solid #eaeaea;
	border-bottom:none;
}


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

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



.total__qty__value, .total__weight__value, .total__volume__value, .total__chweight__value  {
	text-align: right;
	font-weight: 700;
	font-size: 16px;
}

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