/* * {
			box-sizing: border-box;
		}*/
		
		body {
			font-family: Arial;
			margin: 0;
		}	

		#navbar_top_inner { /* width commented in ... navbar_top_fixed.css ... because it is controlled here */
			width: 90%;
		}
		
		.myimage
		{
			max-width: 100%;
		}
		
		.description_text
		{
			/* not using this at the moment*/
		}
		
		.item_title
		{
			color: #604FE0;
			
			margin-bottom: 2%;
			
			text-decoration: underline;
		}
		
		#view_basket_heading {
			font-size: 27px;
			margin: 14px auto auto 150px; /* top .. right .. bottom .. left */
		}

		/*.visa_mastercard {
			 width: 340px;
			 height: 42px;
			 margin: 14px auto auto 150px; /* top .. right .. bottom .. left */
		/*}*/
		
		/* ....... Main columns */ /* ... DON'T FORGET You can use ... WORD-WRAP! ... https://www.w3schools.com/cssref/css3_pr_word-wrap.asp */	
		
		 #checkout_container {		 
			 position: relative;
			 width: 90%;
			 /* margin: 50px auto 10px auto; */ /* top .. right .. bottom .. left */
			 margin: 12px auto 10px auto; /* top .. right .. bottom .. left */
			 padding: 10px;		 
			 border: 1px solid green;
		 }
		 
		 #footer_inner
		 {
			 width: 90%;
		 }
		
		 .checkout_row, .row_input, .row_input_radio { /* .............. https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_justify-content */					
			 -webkit-justify-content: center; /* Safari 6.1+ */
				justify-content: centre; /* obsolete when using flex-grow ... as done in ".checkout_col" below */
				
				display: -webkit-flex; /* Safari */
				display: flex;
				flex-wrap: wrap;				
				
				padding: 10px;		  
				border: 1px solid red;

				margin-bottom: 3px;				
		}
		
		.checkout_col
		{			
			padding: 5px;
			border: 1px solid blue;
	 		
			width: 500px;
			flex-grow: 1;
								
			margin: 3px;
		}
		
		.left_div_outer
		{
			display: flex;
			
			padding: 2px;
			
			/* border: 1px solid pink; */
		}
		
		.left_div
		{
			padding: 2%;
			padding-top: 3%;
			
			/* border: 1px solid green; */
			
			/* flex-basis: 30%; */
			
			margin-right: 2px;
			
			flex: 0 0 20%; /* CHECK THIS OUT ... https://stackoverflow.com/questions/29885284/how-to-set-a-fixed-width-column-with-css-flexbox */
						   /* 2nd post 1st comment states "overriding flex-shrink" ... & therefore potentially flex-grow hence my: 0 0 20% */
		}				   /* Also ... https://www.w3schools.com/cssref/css3_pr_flex.asp */		
		
		.right_div
		{
			margin-right: 2px;
			
			padding: 2%;
			padding-top: 3%;
			
			/* width: 50px; */
			/* flex-basis: 70%; */
			
			flex-grow: 1;
			
			/* border: 1px solid orange; */
		}
		
		.row_input { /* ............. overrides .checkout_row above */
			border: none;
			padding: 0;
		}
		
		.row_input_radio { /* ....... overrides .checkout_row above */
			color: gray; /* ........... font colour */
			border: 1px solid gray;
			margin: 10px auto 10px auto; /* top .. right .. bottom .. left */
		}
		
		.spacer {
			min-width: 5px;
		}
		
		.checkout_heading { /* top .. right .. bottom .. left */
			padding: 5px;
			margin: 7px 5px 7px 5px;		
			border: 1px solid blue;
			background-color: #ede6ed;
			text-align: center;
		}
		
		/*#billing_address { /* extra margin below: Legend */
			/*margin-top: 12px;
		}*/
		
		#payment_type { /* extra margin below: Delivery Method */
			margin-top: 17px;
		}	
		
		input[type=number], select { /* https://www.w3schools.com/css/tryit.asp?filename=trycss_forms */
			width: 100%;
			padding: 7px 15px;
			margin: 8px 0;
			display: inline-block;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;	  
			font-size: 15px;
		}
		
		input[type=submit] {
			width: 100%;
			background-color: #4CAF50;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 17px;
		}

		input[type=submit]:hover {
			background-color: #d88838;
		}
		
		#delivery_input {
			display: none;
		}
		
		table {
			width: 100%;
			font-size: 14px;			
		}
		
		table, th, td {
			border: 1px solid gray;
			border-collapse: collapse;
		}
		
		th, td {
			padding: 10px 15px 10px 15px; /* top .. right .. bottom .. left */
			text-align: left;
		}
		
		.no_border td {
			border: 0;
		}
		
		.feature_row {
			padding: 7px 15px; /* top & bottom .. left & right */					
		}
		
		/* .table_spacer {
			padding: 1px 15px;
			/* background-color: #eae9ce; */				
		/* } */
		
		table tr:nth-child(3n+2) {
			background-color: rgb(253, 253, 253);			
		}		
		
		table tr:nth-child(3n+3) {
			background-color: rgb(242, 242, 242);			
		}

		/* .product_name {
			text-decoration: underline;				
		} */		
		
		table th {
			background-color: #dedfed;
			color: #424360; /* ........... font colour */
		}
		
		#total_product_cost
		{
			background-color: #F0FCFF;
		}
		
		#total_price_span_1
		{		
			color: #48453E;
			font-size: 29px;
		}
		
		#price_only
		{
			color: #D90801;
			font-size: 29px;
			text-decoration: underline;
		}
		
		#delivery_vat
		{
			color: #4F4C95;
			font-size: 24px;
			font-style: italic;
		}
		
			.submit_button { /* https://www.w3schools.com/howto/howto_css_animate_buttons.asp */
				width: 100%;			
				border: 1px solid gray;
				border-radius: 4px;
				background-color: #4CAF50;	
				
				color: #FFFFFF;
				text-align: center;
				font-size: 17px;
				padding: 10px;
				
				transition: all 0.5s;
				cursor: pointer;			
			}
			
			.submit_button:hover {
				background-color: #d88838;
			}
			
			.submit_button span {
				cursor: pointer;
				display: inline-block; /* somehow corrects vertical alignment discrepancy of ">>" character */
				position: relative;			
				transition: padding-right 0.5s; /* transition all ... to also slowly change colour*/
			}
			
			.submit_button:hover span {
				padding-right: 25px; /* Magic!: moves "Submit" text left ... padding does effect document flow ... even when position is: absolute ... */
			}
			
			.submit_button span:after {
				content: '\00bb';
				position: absolute; /* like for zoom-image ... this stops this! element from effecting the document flow ... so keeps "Submit" text in the middle */
				opacity: 0;					/* But! see how padding below ... does its Magic! */
				top: 0;
				right: -20px; /* offsets ">>" character to the right side of span ... "+" = to the left ... "-" = to the right ... a bit strange */
				transition: right 0.5s; /* transition all ... to also slowly change colour*/
			}
			
			.submit_button:hover span:after {
				opacity: 1;
				right: 0; /* moves ">>" character left */
			}