/* uncomment this to enable FontAwesome */
@import url('font-awesome-4.7.0/css/font-awesome.min.css');

:root{
	--table-bgcolor: #F6FBF0;
	--table-header-bgcolor: #EAF5DB;
	--table-text-color: #606060;

	--btn-gradient-color1: rgb(23, 26, 26); ;
	--btn-gradient-color2: rgb(23, 26, 26); ;
	--btn-hover-color: #647694;
	--btn-text-color: #ffffff;
	--btn-border-radius: 0px;
}


 /* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  width: 100%; /* Set a default minimum width */
/*  margin-left: -125px; /* Divide value of min-width by 2 */ 
  background-color: #E4E4E4; /* Black background color */
  color: rgb(94, 95, 98); /* White text color */
  text-align: center; /* Centered text */
  border-radius: 4px; /* Rounded borders */
  padding-top: 40px; /* Padding */
  padding-bottom: 10px;
  position: fixed; /* Sit on top of the screen */
  z-index: 100; /* Add a z-index if needed */
  /*left: 50%; /* Center the snackbar */
  top: 45%; /* 30px from the bottom */
  border-top: rgba(125,115,100, 0.5) double;
  border-bottom: rgba(125,115,100, 0.5) double;
  height: 100px;
  box-shadow: 0px 0px 300px 300px rgba(93,87,80, 0.6);
}

#snackbar a {
	display: inline-block;
	padding: 10px;
	height: 34px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 4 seconds, this also should be changed in JS show_snackbar() for smooth effect */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 4s;
  animation: fadein 0.5s, fadeout 0.5s 4s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 100px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 100px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 100px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 100px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}




#nopcartpopup {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 850px; /* Set a default minimum width */
/*  height: 400px; */
  transform: scaleY(0.01) translateY(0px);
  /*margin-right: 50px; /* Divide value of min-width by 2 */
  background-color: #fafafa; /* Black background color */
  color: #303030; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 16px; /* Rounded borders */
  /*padding: 36px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 15000; /* Add a z-index if needed */
  /* right: 5%; /* Center the snackbar */
  /*top: -250px; /* 30px from the bottom */
  position: absolute;
  border: var(--btn-gradient-color1) solid 2px;
  transition-property: transform;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  box-shadow: 10px 10px 30px rgba(93,87,80, 0.6);
}

#nopcartpopup .nopentry a { /* this is very general rule for all links in popup */
	text-decoration: none;
	color: grey;
}

#nopcartpopup.show {
    visibility: visible; 
}

#nopcartpopup.slideout {
    transform: scaleY(1) translateY(225px) /* here 250 is half height of popup. must also include padding */;
}


#nopcartpopup_header {
	text-align: right;
}

#close_button {
	display: inline-block;
	width: 30px;
	height: 36px;
	border-radius: 0%;
	border: 0px;
	padding: 0px 0px 0px 10px;
	margin: 5px;
	font-size: 18px;
	line-height: 36px;
	vertical-align: middle;
	color: var(--btn-text-color);
	background-color: var(--btn-gradient-color1);
	background:linear-gradient(to bottom, var(--btn-gradient-color1) 5%, var(--btn-gradient-color2) 100%);
	box-shadow: none;
	text-align: center;
}

#nopcartpopup_header a.close_button{
	text-align: center;
	color: var(--btn-text-color);
}

#nopcartpopup_footer a.single_view_cart_button{
	margin: 10px 10px 10px 10px;
	padding: 15px 15px 15px 15px;
	height: auto;
}


/********* buttons and nop shopping cart ***********/
	/*
	https://www.bestcssbuttongenerator.com/
	https://webdeasy.de/en/top-css-buttons-en/
	*/
.myButton, .nopbutton, a.myButton, a.nopbutton {
	background-color: var(--btn-gradient-color1);
	/* background: linear-gradient(to bottom, rgb(23, 26, 26), rgb(23, 26, 26) 60%, rgb(90, 110, 110) );  /* blinks on transition */
	display: inline-block;
	color: rgb(255, 255, 255);
	font-family: font-family: "Hind", Arial;
	font-size:13px;
	font-weight:500;
	height: 42px;
	line-height: 13px;
	padding:0px 45px 0px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ded17c;
	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition-duration: 0.5s;
	box-shadow: 5px 5px 10px 0px #e0e0e0;
	border-radius: 4px;
}

.myButton:hover, a.myButton:hover, .nopbutton:hover, a.nopbutton:hover {
	background-color: var(--btn-hover-color);
}
.myButton:active, .nopbutton:active, a.myButton:active, a.nopbutton:active  {
	position:relative;
	top:1px;
	}

.nopbutton {
    padding:3px 6px 3px 6px;
	height: 21px;
	font-size: 11px;
	font-weight: 300;
	border:none;
	border-radius: 4px;
	}

/************* Pseudo elements for icons ***********/
	/* https://fontawesome.com/v4.7.0/cheatsheet/ */

.myButton:before {
    font-family: 'FontAwesome', 'Font Awesome', 'Font Awesome 5 Brands', 'Font Awesome 5 Free';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    position: relative;
	padding-right: 10px;
    -webkit-font-smoothing: antialiased;
}

.single_add_to_cart_button:before {
	content: "\f217";
}

.single_view_cart_button:before {
	content: "\f058";
}
.icon-shop:before {
	content: "\f07a";
}
.icon-checkout:before {
	content: "\f058"; /* check mark */
/*	content: "\f00c"; /* check mark */
/*	content: "\f05d"; /* check mark */
}
.icon-purchase:before {
	content: "\f155"; /* dollar */
	/* content: "\f058"; /* check mark */
}
.icon-delete:before {
	padding: 5px 1px 5px;
	/* content: "\f0c4"; /* scissors */
	content: "\f00d"; /* x */
}
.icon-send:before {
	content: "\f1d8"; /* paper plane */
/*	content: "\f044"; /* pencil */
/*	content: "\f040"; /* pencil2 */
/*	content: "\f14b"; /* pencil3 */
/*	content: "\f0e0"; /* envelope1 */
/*	content: "\f2b6"; /* envelope2 */
/*	content: "\f2b7"; /* envelope3 */
/*	content: "\f003"; /* envelope4 */
}

#close_button:before {
	 /* content: "\f2d4"; /* [x] */
	 /* content: "\f2d3";  /* [x] */
	 content: "\f00d"; /* x */
	 /*content: "\f057";  /* (x) */
	 /* content: "\f05c";  /* (x) */
}


/********** nop table ***************/
	/* other styles:
	https://colorlib.com/wp/css3-table-templates/
	https://css-tricks.com/complete-guide-table-element/
	*/

table.nopcart {
	table-layout: auto;
	width   : 100%;
	margin: auto;
/*	border-collapse: collapse;
	border: 1px solid black; */
	border-radius: 5px;
	color: #808080;
	}

.nopcart tr {
	border-bottom  : 1px solid #d0d0d0;
}

table#nopsummary.nopcart tr td{
	padding: 10px 10px !important;
}

.nopcart a {
	color: grey;
}
.nopheader {
	font-size : smaller;
	padding: 2px 10px 2px 10px;
	border-top: none;
	border-bottom: 2px solid #d0d0d0;
}

td.nopheader:nth-child(1) {
	text-align: left;
}

.nopentry {
	padding: 2px 10px 2px 10px;
	text-align: right;
}

table#nopitemlist .nopentry {
	padding: 35px 10px 35px 10px;
}

/* first column Item title */
td.nopentry:nth-child(1) {
	/* font-weight:bold; */
	padding: 2px 10px 2px 10px;
	text-align: left;
}

/* 2rd column - Quantity */
td.nopentry:nth-child(2) {
	text-align: right;
	width : 40px;
}

/* 3rd column - price */
td.nopentry:nth-child(3) {
	text-align: right;
	width : 10px;
}
	
/* last column - manage buttons */
td.nopentry:nth-child(4) {
	text-align: center;
	width : 60px;
}
td.noptotal {
	/* font-size : 100%; */
	padding: 2px 10px 2px 10px;
	vertical-align: bottom;
	text-align: right;
	border-top: 3px solid white;
	border-right: none;
	border-bottom: 3px solid white;
	border-left: none;

	/* background-color: #F5EADB; */
}
	
td.noptotal:nth-child(2) {

	padding: 2px 10px 2px 10px;
}


input.nopinput {
	padding: 1px 4px 1px 4px !important;
	margin: 1px !important;
	width: 30px;
	text-align: center;
}




/************ Checkout form design ***********/

	#summarycontainer_on_summary_page, #summarycontainer_on_form_page {
		display: inline-block;
		float: right;
	}

	#productlist_on_summary_page {
		display: inline-block;
		width: 66%;
	}

	/* this breaks the popup, so i just disabled it in html/php
	#productlist_on_form_page {
		 display: none;
	} */

	#productlist_on_summary_page table#nopitemlist tfoot {
		display: none;
	}

	#payment_options_block {
		clear:right;
		display: inline-block;
		float: right;
	}

	.shippingaddress, .billingaddress {
		display:inline-block;
		float:left;
		position:relative;
		width: 305px;
		margin-left:20px;
	}	

	#form_container {
		display: inline-block;
		width: 66%;
		align-self: center;
		align-content: center;
		margin: 50px auto 10px auto;
	}
	
	.field_row {
		padding-left: 280px;
		padding-bottom: 10px;
		list-style: none;
	}
	
	.field_label {
		margin-bottom: 1px;
	}
	.field_input {
		margin-top: 1px;
		margin-bottom: 1px !important;
		font-size: 14px;
		padding-left: 10px;
		line-height:38px;
		border: #e5e5e5 solid 1px;
		width: 250px;
	}

	.field_input:invalid {
		background-color: #ffa9a8;
	}
	.field_input:invalid:after {
		content: "\f12a" ;
		color: darkred;
		background: url(pic/master.png) no-repeat 95%;
		position: absolute;
		font-family: 'FontAwesome';
		top: 0;
		left: 10px;
	}
	.field_input:valid {
		/* background-color: #f0ffe0; */
		/* content: "\f14a" ; */
	}

	select, input[type="file"] {
		height:42px; /* change this to match the height of other fields */
		*margin-top:4px;
		line-height:30px;
		border: #e5e5e5 solid 1px;
	}

	select.selectfield, select.selectfield2 {
		font-size: 14px;
		padding-left: 10px;
	}

	#b_state, #b_country {
		width: 275px !important;
	}

	.section_header, h2.section_header {
		color: rgb(168, 168, 168) !important;
		width: 70%;
/* 		background-color: #f9f9f9; */
		/* border-top: 1px solid rgb(245,245,245); */
		border-bottom: 1px solid rgb(235,235,235);
		/* background: linear-gradient(to right, white, rgb(245,245,245) 50%, white); */
		font-size: 0.8em;
		font-family: "Helvetica", Arial, Helvetica, Tahoma, sans-serif !important;
		padding: 5px 15px 5px;
		margin-bottom: 30px;
		text-align: left;
		font-weight: 100 !important;
	}

	/* highlight form fields */
	.form_fields input:focus, .form_fields textarea:focus {
		  background: #edf7fd;
	  	  padding-left: 10px;
	}

#cardlogos {
	/* display:inline; position:relative; top:1px; left:1px; */
	margin-top: 5px;
	display:inline;
	position:relative;
	top:1px; left:1px;
	font-size: xx-large;
	color: #333;
	}
	input#cc_cvv2 {
		width: 60px;
	}
	
	#billitoshipping_label {
		width: 200px;
		margin-left: 10px;
		display: inline;
		position: relative;
		top: 4px;
	}
	
	#shippingaddress {
		overflow-y: hidden;
		max-height: 700px; /* approximate max height */
		transition-property: all;
		transition-duration: 1.5s;
		transition-timing-function: cubic-bezier(0.7, 0.5, 0.5, 0.7);
	}

	/*********** Contact page **********/

	#contact_page_wrapper {
		width: 100%;
		margin: auto;
	}
	
	#address_block_container {
		width: 300px;
		display: inline-block;
		margin-left: auto;
		vertical-align:top;
		text-align: left;
		/* uncomment if you want it on the right
		float: right; 
		*/
		margin-right: 20px;
		background: linear-gradient(to bottom right, white, rgb(225,225,225) 80%, white);
		border-radius: 15px 15px 4px 4px;
		box-shadow: 0 0 15px 4px rgb(235,235,235);
	}
	
	#contact_form_container {
		width: 70%;
		display: inline-block;
		margin-right: auto;
	}
	
	
	h3.contact_details_header {
		margin-bottom: 10px;
		margin-left: 0px;
		font-size: larger;
		border-top: 1px solid rgb(200,200,200);
		border-bottom: 1px solid rgb(200,200,200);
		color:#464646;
		background: linear-gradient(to right, gray, rgb(245,245,245) 3%, gray);
		padding: 10px 10px 10px;
		border-radius: 15px 15px 0 0;
	}
	p.contact_details_paragraph {
		margin: 0 0 0 0;
		padding: 10px 10px 10px 10px;
	}
	#company_phone {
		border-bottom: #E5E5E5 solid 1px;
		border-radius: 8px;
	}

	#header_company_address:after {
		content: 'Company Address';
		/* content: 'Write us';
		content: 'Our Address';
		*/
		margin-left: 5px;
	}
	
	#header_company_phone {
		margin-top: 80px;
	}
	#header_company_phone:after {
		content: 'Phone';
		/* content: 'Call us'; 
		content: 'Our Phone'; 
		*/
		margin-left: 5px;
	}


	/* here you can switch between displaying address inline separated by commas and displaying line by line. */
	.address_line {
		display: block;
	}
	.address_line:after {
		 /* content: ', '; */
	}
	.address_line:last-child:after {
		content: '';
	}

#buttons_block {
	margin-bottom: 50px;
}