/* * {
			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%;
		}

		.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 */	
		
		#account_container
		{		 
			position: relative;
			width: 90%;
				/* margin: 50px auto 10px auto; */ /* top .. right .. bottom .. left */
			margin: 12px auto 10px auto; /* top .. right .. bottom .. left */
			
			padding: 2px;		 
			
			/* border: 1px solid green; */
		 }
		 
		 #footer_inner
		 {
			 width: 90%;
		 }
		
		.account_row, .row_input, .abs_pos, #method_row { /* .............. 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;		  
		}
		
		.row_input {
			flex-wrap: nowrap; /* nowrap stops for example ... "Last name" starting a new line & instead correctly remain to the right of "First name" */
			border: none; /* .... overrides .account_row above */
			padding: 0;
		}
		
		#method_row {
			padding: 3px;
		}
		
		#save_col	{
			border: 1px solid green;			
			padding: 5px;			
			margin: 9px;
		}
		
		.record_master
		{
			margin-top: 3px;
			margin-bottom: 3px;
		}		
		
		.record_dates
		{
			border: 1px solid green;
			margin: 12px 10px 3px 10px;
			padding: 10px 0; /* top .. right .. bottom .. left */
			transition: all 0.35s;
			background-color: white;
		}
		
		.record_dates:hover
		{
			background-color: orange;
			cursor: pointer;
		}
		
		.save_button_div {
			display: flex;
			justify-content: space-around;
			border: 1px solid orange;
			padding: 3px;
		}
		
		.save_button {
			width: 45%;
			color: black;
			font-size: 14px;
			padding: 5px;
			background-color: #D3E1E1;
			border: 1px solid green;			
			transition: all 0.25s;
		}
		
		.save_button:hover {
			color: #F9FCFE;
			background-color: #288EB7;
		}
		
		.save_button:active
		{
			color: blue;
			background-color: #ABE8D3;
		}
		
		.abs_pos
		{
			position: relative; /* needs changing from default static (not necessarily relative) for absolute position of asterisk to be relative to this */		
			border: none;
			padding: 0;
			width: 100%; /* flex-grow: 1 ... works as well ... flex-grow is used further down because width is already used to control when flex-wrap occurs */
		}
		
		#login_button_div, #register_button_div
		{
			display: flex;
			justify-content: space-around;
			padding: 3px;
			margin-top: 1px; /* additional to the bottom half of the margin applied by ... input[type=password] ... further down */
			
			/* border: 1px solid orange; */
		}
		
		.login_buttons, .register_button { /* register button class because id in use */
			width: 40%;	
			color: black;
			font-size: 14px;
			padding: 4px;
		}
		
		.register_button
		{
			width: 60%;
		}
				
			/* ":" vs "::" https://stackoverflow.com/questions/41867664/what-is-the-difference-between-pseudo-classes-and-pseudo-elements */
		.login_buttons:hover
		{
			/* background-color: #C49E60; */
		}
		
		#register_button_div, #retype_password_div, #save_cancel_div
		{
			display: none;
		}
		
		#input_info_buttons_block
		{	
			border: 1px solid blue;
			text-align: center; /* google ... margin auto vs text align centre ... */
			
			margin-top: 5px;
			padding: 10px 0; /* top .. right .. bottom .. left */
		}
		
		#input_info_buttons_div
		{
			border: 1px solid green;
			text-align: center; /* google ... margin auto vs text align centre ... */
			
			margin-top: 5px;
			padding: 2px 0; /* top .. right .. bottom .. left */
			
			max-height: 300px;		
			overflow: auto;
		}
		
		#error_message_div {			
			border: 1px solid blue;
			margin-top: 5px;
			padding: 10px 0; /* top .. right .. bottom .. left */
		}
		
		#message_1, #message_2, #message_3, #message_4, #message_5, #message_6, #message_7, #message_8, #message_9, #message_10 {
			color: red;
			font-size: 19px;
			margin: 0 0 7px 10px;
		}
		
		legend {
			color: green;
			font-weight: bold;		
		}
		
		.account_col, #method_col, #login_col
		{			
			padding: 5px;
			border: 1px solid blue;
			margin: 3px;
	 		
			width: 500px;
			flex-grow: 1;
		}
		
		#method_col	{
			color: gray;
			font-weight: bold;
			border: 1px solid green;
			width: 165px;
			flex-grow: 0;
		}
		
		#login_col	{
			border: 1px solid green;
			width: 200px;
			flex-grow: 1;
		}
		
			.left_div_outer
			{
				display: flex;
				
				padding: 2px;
				
				/* border: 1px solid pink; */
			}
			
			.left_div
			{
				padding: 1.5%;
				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: 1.0%;
				padding-top: 3%;
				
				/* width: 50px; */
				/* flex-basis: 70%; */
				
				flex-grow: 1;
				
				/* border: 1px solid orange; */
			}
		
		.spacer {
			min-width: 5px;
		}
		
		.spacer_vertical {
			min-height: 10px;
		}
				
		.checkout_heading { /* top .. right .. bottom .. left */
			padding: 5px;
			margin: 7px 5px 7px 5px;		
			border: 1px solid blue;
			background-color: #ede6ed;
			text-align: center;
			font-size: 17px; /* line-height: 1.0; */ /* left here as a reminder it exists */
		}
		
		#copy_billing_parent, #click_to_edit_parent
		{
			/* border: 1px solid #ccc; */			
			text-align: center;
		}
		
		#copy_billing_button, #click_to_edit_details
		{
			width: 98%; 			
			font-size: 13px;			
			color: #0C3E09;
			background-color: #D3E1E1;	
			
			font-weight: bold;			
			border: 1px solid green;			
			transition: all 0.25s;
		}
		
		#copy_billing_button:hover, #click_to_edit_details:hover
		{
			color: #F9FCFE;
			background-color: #288EB7;
		}
		
		#copy_billing_button:active, #click_to_edit_details:active
		{
			color: blue;
			background-color: #ABE8D3;
		}
		
		input:focus/* , select:focus */
		{
			/* outline: 1px ridge blue; */
			
			/* box-shadow: 0 0 3pt 2pt purple; */ /* 2nd post ... https://stackoverflow.com/questions/5394116/outline-radius */
			/* box-shadow: 0 0 0 2pt blue; */
			
			/* box-shadow: 0px 0px 0px 1px blue inset;  /* 4th post from above link */
			box-shadow: 0px 0px 0px 1px blue; /* inset; */
		}
		
		input[type=radio]
		{
			box-shadow: none; /* disable radio box-shadow */
		}
		
		input[readonly], select:disabled
		{
			font-style: italic;
			background-color: #F7F6F6;
		}
		
		input[type=text], input[type=password], select { /* https://www.w3schools.com/css/tryit.asp?filename=trycss_forms */
			width: 100%;
			padding: 7px 15px;
			margin: 8px 0;
			font-size: 15px;
			
			display: inline-block;
			border: 1px solid #ccc;
			border-radius: 3px;
			box-sizing: border-box;	
		}
		
		.submit_button { /* https://www.w3schools.com/howto/howto_css_animate_buttons.asp */
			width: 70%;			
			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_mod {
			background-color: blue; /* important note ... within HTML class="" ... this has to be the 1st class listed to take priority */
		}
		
		.submit_button:hover {
			background-color: #d88838;
		}
		
		.submit_button:active {
			color: blue;
			background-color: yellow;
		}
		
		.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 ... */
		}
		
			/* ":" vs "::" https://stackoverflow.com/questions/41867664/what-is-the-difference-between-pseudo-classes-and-pseudo-elements */		
		.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 */
		}
		
		.asterisk {
			position: absolute;			
			top: 12px;
			left: 5px;
			
			color: red;
			font-size: 20px;
		}
		
			/* ":" vs "::" https://stackoverflow.com/questions/41867664/what-is-the-difference-between-pseudo-classes-and-pseudo-elements */
		::-ms-clear {
			display: none; /* removes "x" from Explorer ... which there's no event for so difficult to control ... and other browsers don't have it anyway */
		}
		
		.account_heading
		{ 
			padding: 5px;
			margin: 7px 5px 7px 5px; /* top .. right .. bottom .. left */		
			border: 1px solid blue;
			background-color: #ede6ed;
			text-align: center;
		}
		
		.myimage
		{
			max-width: 100%;
		}
		
		.description_text
		{
			/* not using this at the moment*/
		}
		
		.item_title
		{
			color: #604FE0;
			
			margin-bottom: 2%;
			
			text-decoration: underline;
		}
		
		table#price_details
		{
			width: 100%;
			font-size: 16px;			
		}
		
		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 */
		}
		
		#checkout_total_up, #checkout_total_up table
		{
			font-size: 20px;
		}
		
		#checkout_total_up
		{
			margin-top: 3px;
		}
		
		#table_totals_div
		{
			display: flex;
			
			flex-wrap: wrap;
			
			overflow-x: auto;
		}
		
		.totals_table_block		
		{
			flex-grow: 1;
			
			margin: 1px;
			padding: 1px;
			
			/* border: 1px solid orange; */
		}
		
		.totals_table
		{
			width: 100%;
		}