/* * {
			box-sizing: border-box;
		}*/

      #PayPal_div
      {



                  display: none; /* set to 'flex' on checkout page via JS */
                  justify-content: center;



         /* border: 1px solid green; */

         /* width: fit-content; */

         width: 75%;
         /* padding: 10px; */
         margin: auto;
         margin-bottom: 0;
         margin-top: 30px;
      }

		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 */

		.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, .abs_pos, .row_input_radio, .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;
			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 */
		}

		.method_row {
			padding: 3px;
		}

		.method_radio_buttons {
			margin: 10px auto 10px 5px;; /* top .. right .. bottom .. left */
		}

		.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 */
		}

		#row_input_username {
			/* currently nothing for this */
		}

		#login_button_div {
			display: flex; /* now loaded dynamically via PHP Tags ... in HTML on page load */
			justify-content: space-around;
			margin-top: 3px;
		}

		#login_user_button { /* https://www.w3schools.com/howto/howto_css_animate_buttons.asp */
			width: 75%;
			/* border: 1px solid blue;
			border-radius: 5px;
			background-color: #B1D5C7;	*/

			color: black;
			/* text-align: center; */
			font-size: 14px;
			padding: 4px;

			/* transition: all 0.5s;
			cursor: pointer; */
		}

		.checkout_col, #method_col, #login_col {
			padding: 5px;
			border: 1px solid blue;

			width: 500px;
			flex-grow: 1;

			margin: 3px;
		}

		#method_col	{
			color: gray;
			font-weight: bold;
			border: 1px solid green;
			width: 200px;
			flex-grow: 0;
		}

		#login_col	{
			border: 1px solid green;
			width: 200px;
			flex-grow: 1;
		}

		.spacer {
			min-width: 5px;
		}

		legend {
			color: green;
			font-weight: bold;
		}

		.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;
		}

		#error_message_div {
			/* border: 1px solid blue; */
			margin-top: 5px;
			padding: 5px 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, #message_11
		{
			color: red;
			font-size: 19px;
			/* margin: 0 0 7px 10px; */ /* top .. right .. bottom .. left */
         margin: 0 0 7px 0;
		}

		#message_10
		{
			color: #00893e;
			/* font-weight: bold; */

         padding: 0 10px 0 10px;

         margin: 0;

         /* border is added via JS when PayPal div style.display... is also set to 'block' */
         /* border: 3px dashed rgb(0, 145, 39); */
		}

		#message_11
		{
			color: #12b515;
      /* border: 1px solid orange; */
			/* text-align: center; */
			/* margin: 5px 0 7px 5px; /* top .. right .. bottom .. left */
		}
    #message_11 span
		{
      color: rgb(20, 0, 175);
      text-decoration: underline;
    }


		#message_11 a
		{
			/* color: green; */
		}

		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;
			display: inline-block;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
			font-size: 15px;
		}

		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], input[type=checkbox]
		{
			box-shadow: none; /* disable radio box-shadow */
		}

		.register_button {
			margin-bottom: 10px;
		}

		.submit_button, .register_button { /* https://www.w3schools.com/howto/howto_css_animate_buttons.asp */
			width: 100%;
			border: 1px solid gray;
			border-radius: 4px;
			background-color: green;

			color: #FFFFFF;
			text-align: center;
			font-size: 17px;
			padding: 10px;

			transition: all 0.5s;
			cursor: pointer;
		}

		.submit_button:hover, .register_button:hover {
			background-color: #d88838;
		}

		.submit_button span, .register_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, .register_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, .register_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, .register_button:hover span::after {
			opacity: 1;
			right: 0; /* moves ">>" character left */
		}



		.submit_button {
			background-color: red;
		}



		#delivery_input {
			display: none;
		}

		.table_container {
			padding: 10px;
		}

		table {
			width: 100%;
			font-size: 13px;
			font-family: arial;
		}

		table#t2
		{
			font-size: 15px;
		}

		table, th, td {
			border: 1px solid gray;
			border-collapse: collapse;
		}

		th, td {
			padding: 10px 15px 10px 15px; /* top .. right .. bottom .. left */
			text-align: left;
		}

		table th {
			background-color: #dedfed;
			color: #424360; /* ........... font colour */
		}

		table#t1 tr:nth-child(3n+2) {
			background-color: rgb(253, 253, 253); /* table id=#t1 here stops this ... applying to the 2nd table */
		}

		table#t1 tr:nth-child(3n+3) {
			background-color: rgb(242, 242, 242);
		}

		table#t2 tr:nth-child(2n+0) {
			background-color: rgb(242, 242, 242); /* table id=#t2 here ... has its own color pattern */
		}

		.no_border td {
			/*border: 0;*/
		}

		.feature_row {
			padding: 7px 15px; /* top & bottom .. left & right */
		}

		.table_spacer {
			padding: 1px 15px;
			/* background-color: #eae9ce; */
		}

		.product_name {
			text-decoration: underline;
		}

		.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 */
		}