@charset "UTF-8";
/* framework Retail v36 */
@import url('fontawesome-free-5.15.4-web/css/all.min.css');
:root {
  --table-bgcolor: #F6FBF0;
  --table-header-bgcolor: #f5f0b9;
  /* yellow-green */
  --table-text-color: #606060;
  --btn-bgcolor: rgb(55, 102, 149);
  /* blue deep water */
  --btn-border-radius: 3px;
  /* square: 3px, rounded: 3.5ch */
  --btn-text-color: #ffffff;
  /* white for dark buttons */
  --myLargeButton-height: 4.5rem;
  --myMediumButton-height: 3rem;
  /* em or rem */
  --icon-color: var(--btn-bgcolor);
  --field-border-color: #e5e5e5;
  /* #e5e5e5; */
  --formfont: normal normal normal normal 14pt/1.2 sans-serif;
  --formfont-color: #757575;
}
/* Generic buttons block */
.myButton {
  color: var(--btn-text-color);
  background-color: var(--btn-bgcolor);
  border: none;
  border-radius: var(--btn-border-radius);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: calc(var(--myLargeButton-height) / 100);
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0px 5px 10px 5px rgba(90, 90, 90, 0.1);
  font-size: 11pt;
  height: 1.8em;
  padding: 0.4em;
  line-height: 1em;
  font-weight: normal;
  font-style: normal;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  margin: 1em;
}
.myButton::before {
  font-weight: normal;
  font-family: 'FontAwesome', 'Font Awesome', 'Font Awesome 5 Brands', 'Font Awesome 5 Free';
  font-weight: 900;
  /* 400 or 900 or none required for font awesome 5. do not make "normal" */
}
.myButton:hover {
  filter: brightness(110%);
}
.myButton:active {
  top: 0.1ch;
  box-shadow: none;
}
.medium {
  font-size: calc(var(--myMediumButton-height) / 3);
  width: calc(var(--myMediumButton-height) * 5);
  height: var(--myMediumButton-height);
  padding-left: var(--myMediumButton-height);
}
.medium::before {
  /* for icon */
  line-height: var(--myMediumButton-height);
  text-align: center;
  /* for background square */
  width: var(--myMediumButton-height);
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
}
.large {
  width: 100%;
  height: var(--myLargeButton-height);
  font-size: calc(var(--myLargeButton-height) / 3);
  min-width: 15em;
  /* must be no more than field min-width /* calc(var(--myLargeButton-height) * 3); */
  max-width: 100%;
  /* calc(var(--myLargeButton-height) * 24); */
  padding-left: var(--myLargeButton-height);
  padding-bottom: calc(var(--myLargeButton-height) / 4.5);
  margin: 0;
}
.large::before {
  /* for icon */
  line-height: var(--myLargeButton-height);
  text-align: center;
  /* for background square */
  width: var(--myLargeButton-height);
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--btn-border-radius) 0 0 var(--btn-border-radius);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
}
/* customize individual buttons here */
/* all buttons */
/* add, on every page */
.single_view_cart_button {
  filter: hue-rotate(45deg) contrast(150%);
}
/* view on product and popup button */
.single_view_cart_button:hover {
  filter: hue-rotate(45deg) contrast(150%) brightness(110%);
}
#snackbar > button.single_view_cart_button {
  vertical-align: baseline;
}
/* remove */
#contact_submit_button {
  margin: auto 0 auto;
}
/* on contact, support page */
/* on productlist page, checkout button, other payment options (pp) */
#purchase_button {
  margin: auto 0 auto;
}
/* payment form page */
/* in popup */
/** floating bar appears after adding a product */
#snackbar {
  /*switch #1*/
  top: calc(var(--myMediumButton-height) * -2);
  /*bottom:	/*switch #1*/
  min-width: 250px;
  width: 100%;
  min-height: calc(var(--myMediumButton-height) * 2);
  text-align: center;
  padding: 10px;
  line-height: 2;
  z-index: 250100;
  /* Add if needed */
  background-color: var(--table-bgcolor);
  box-shadow: 0px 5px 10px 5px rgba(90, 90, 90, 0.1);
  visibility: hidden;
  position: fixed;
  transition: all 0.9s;
}
#snackbar.show {
  /*switch #2*/
  top: 0;
  /*bottom: 0; /*switch #2*/
  visibility: visible;
  transition: all 0.9s;
}
/*********** General pages layout **********/
.flexcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  grid-gap: 3rem;
}
.flexblock70 {
  flex: 3 1 65%;
}
.flexblockfixed {
  flex: 1 1 25%;
}
/*********** Contact page **********/
h3.contact_details_header {
  margin: 0.5em 0.5em 0;
  font-size: larger;
  padding: 0;
  color: var(--icon-color);
}
h3.contact_details_header span, h3.contact_details_header i {
  display: block;
  margin: 0.5em 0.5em 0.5em;
  padding: 0;
}
p.contact_details_paragraph {
  margin: 0 1em 2em;
  padding: 0;
}
#header_company_address:after {
  /* content: 'Company Address'; */
  content: 'Address';
  /* content: 'Write us';
  content: 'Our Address';
  */
  display: block;
  margin: 0;
}
#header_company_phone:after {
  content: 'Phone';
  /* content: 'Call us'; */
  /* content: 'Our Phone'; */
  margin: 0;
}
#header_company_email:after {
  content: 'E-mail';
  /* content: 'Our e-mail'; */
  margin: 0;
}
/* 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: '';
}
/*
.fieldrow {font-size: var(--formfont)}
*/
#contact_page_wrapper {
  align-items: normal;
  /* without it address_block_container items will not switch to column by javascript */
  font-size: var(--formfont);
}
div#contact_page_wrapper > * {
  margin: 0;
  padding: 0;
  border: none;
}
#address_block_container {
  display: flex;
  /* for children */
  flex-direction: column;
  font-family: 'Open Sans', helvetica, arial, sans-serif;
  font-size: 0.8em;
  line-height: 1.4em;
  gap: 3rem;
}
#contact_form_container {
  max-width: 60em;
  font-family: 'Open Sans', helvetica, arial, sans-serif;
  font-size: 1em;
}
.contact_element_container {
  text-align: center;
}
.contact_element_container > * {
  text-align: center;
}
#message {
  height: 10em;
}
div#captcha_block {
  border: none;
  box-shadow: none;
}
div#company_address_container .icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
/************ Checkout form design ***********/
#return_policy_block {
  font-size: smaller;
  flex: 1 2 30em;
}
#company_address_block {
  margin: 3em auto 2em;
  text-align: center;
  font-size: smaller;
}
#form1 {
  width: 100%;
}
#order_form_container {
  flex-direction: row-reverse;
}
#summarycontainer_on_summary_page, #summarycontainer_on_form_page {
  min-width: 25em;
  box-shadow: 1em 1em 2em rgba(93, 87, 80, 0.1);
}
#productlist_on_summary_page {
  min-width: 25em;
}
p#address_on_summary_page, div#return_on_summary_page ul li {
  /* it doesnt affect because of flow */
}
/* this breaks the popup, so i just disabled it in html/php
#productlist_on_form_page {
     display: none;
} */
table#nopitemlist .nopentry {
  /*	font-size: larger; */
  padding: 40px;
}
table#nopitemlist .nopentry i {
  font-size: smaller;
  font-style: normal;
}
#productlist_on_summary_page table#nopitemlist tfoot {
  display: none;
}
#payment_options_block {
  clear: both;
  margin: 0;
}
.shippingaddress, .billingaddress {
  display: inline-block;
  float: left;
  position: relative;
  width: 305px;
  margin-left: 20px;
}
#form_container {
  display: flex;
  flex-flow: column nowrap;
}
#form_container li {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
#form2, label {
  font: var(--formfont);
}
.myField {
  width: 100%;
  min-width: 15em;
  font: var(--formfont);
  color: var(--formfont-color);
  border: #e0e0e0 solid 1px !important;
  box-shadow: inset 0 0 0.5em 1px rgba(0, 0, 0, 0.03) !important;
  padding: 0.7em !important;
  background-color: white !important;
  outline: none;
  transition: all 0.3s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.myField:focus {
  filter: grayscale(100%) sepia(30%);
  box-shadow: 0 0.5em 0.7em 0.5em rgba(0, 0, 0, 0.03) !important;
  outline: 4px ridge rgba(120, 125, 130, 0.1);
  outline-offset: 0px;
}
.myField:user-invalid {
  filter: grayscale(100%) sepia(100%) contrast(95%) hue-rotate(-70deg);
}
select.myField:focus {
  filter: none;
}
.shortened {
  flex: 0;
  min-width: 5em;
  width: 5em;
}
.fieldblock {
  display: flex;
  flex-wrap: wrap;
  min-width: 15em;
  max-width: 30em;
  flex: 1 1 49%;
  align-items: center;
  margin: 1em;
}
.fieldblock > label {
  flex: 1 0 7em;
}
#contact_page_wrapper .fieldblock {
  max-width: none;
}
.fieldlabel {
  color: black;
  font-size: smaller;
  margin: 0.6em 0 0.3em;
}
.flexique {
  flex: 5 1 15em;
  white-space: nowrap;
}
.fieldrow {
  justify-content: space-evenly;
}
.section_header, h2.section_header {
  color: #a8a8a8 !important;
  width: 70%;
  /* 		background-color: #f9f9f9; */
  /* border-top: 1px solid rgb(245,245,245); */
  border-bottom: 1px solid #ebebeb;
  /* 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;
}
#cardlogos, #cardlogos-font-icons, #cardlogos-png {
  margin-top: 0.2em;
  display: block;
  font-size: xx-large;
  color: var(--icon-color);
  text-align: right;
  flex: 1 0 10em;
}
#cardlogos-font-icons, #cardlogos-png {
  display: none;
}
#toggleblock {
  width: 80%;
}
#billitoshipping_label {
  width: 250px;
  margin-left: 10px;
  display: inline;
  position: relative;
  vertical-align: bottom;
  text-align: left;
}
#shippingaddress {
  overflow-y: hidden;
  transition-property: all;
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.7, 0.5, 0.5, 0.7);
  visibility: hidden;
  max-height: 0;
}
#billitoshipping {
  height: 15px;
  width: 15px;
  vertical-align: text-top;
}
/* autocomplete */
#autocomplete_container {
  position: relative;
  top: 0;
  left: 0;
  height: 0px;
  width: 100%;
}
#autocomplete_block {
  display: block;
  position: absolute;
  overflow-y: scroll;
  z-index: 999;
  width: 350px;
  max-height: 200px;
  left: 90px;
  top: 0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3) !important;
}
.autocomplete_row {
  border-bottom: 1px solid #ccc;
  line-height: 20pt;
  font-size: 9pt;
  padding: 0 10px;
  cursor: pointer;
}
.autocomplete_row:hover {
  color: white;
  background-color: dodgerblue;
}
/* above this line was a good work done. below sucks */
/********** nop popup ***************/
#nopcartpopup {
  visibility: hidden;
  /* Hidden by default. Visible on click */
  min-width: 450px;
  /* 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: var(--btn-border-radius);
  /* Rounded borders */
  /*padding: 36px; /* Padding */
  position: fixed;
  /* Sit on top of the screen */
  z-index: 250000;
  /* Add a z-index if needed */
  /* right: 5%; /* Center the snackbar */
  /*top: -250px; /* 30px from the bottom */
  position: absolute;
  border: var(--btn-bgcolor) 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);
}
#nopcartpopup_header {
  text-align: right;
}
#nopcartpopup_header a.close_button {
  text-align: center;
  color: var(--btn-text-color);
  text-decoration-line: none;
}
#nopcartpopup_footer a.single_view_cart_button, #nopcartpopup_footer a.single_view_cart_button span {
  margin: 10px 10px 10px 10px;
  padding: 15px 15px 15px 15px;
  height: auto;
  color: var(--btn-text-color);
  text-decoration-line: none;
}
/********** 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 #c9c9c9; */
  background-color: #f9f9f9;
  border-radius: 5px;
}
.nopcart tr {
  border: none;
}
.nopheader {
  font-size: smaller;
  padding: 2px 10px 2px 10px;
  /*	border: 1px solid black; */
  background-color: var(--table-header-bgcolor);
}
.nopentry, #nopsummary td {
  padding: 50px 20px 50px 20px;
  /* border  : none; */
  border-top: 3px solid white;
  border-bottom: 3px solid white;
}
#nopsummary td:nth-child(2) {
  text-align: right;
}
#nopsummary td {
  /*background-color: var(--table-header-bgcolor); */
  border-top: 2px solid var(--table-header-bgcolor);
  border-bottom: 2px solid var(--table-header-bgcolor);
  background-color: #ffffff;
}
#nopsummary tfoot td {
  font-size: x-large;
}
table#nopitemlist .nopentry {
  padding: 50px 30px 50px 30px;
}
/* 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;
}
table#nopitemlist tfoot {
  display: none;
}
td.noptotal {
  /* font-size : 100%; */
  padding: 2px 10px 2px 10px;
  vertical-align: bottom;
  text-align: right;
  /* border: 3px solid white; */
  background-color: var(--table-header-bgcolor);
}
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;
}
/************* Pseudo elements for icons ***********/
/* https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/icon-cheatsheet */
.icon::before {
  display: inline-block !important;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.single_add_to_cart_button:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
}
.single_view_cart_button:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
}
.icon-shop:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
}
.icon-checkout:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  /* check mark */
  /*	content: "\f00c"; /* check mark */
  /*	content: "\f05d"; /* check mark */
}
.icon-purchase:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /*content: "\f155"; /* dollar */
  /* content: "\f023"; /* lock */
  /* content: "\f058"; /* check mark */
  content: "";
  /* card */
  /* content: "\f53b"; /* banknote */
  /* content: "\f3d1"; /* banknote 2 */
  /* content: "\f0d6"; /* banknote 3 */
  /* content: "\f09d"; /* card */
  /* content: "\f09d"; font-weight: 400; /* card regular */
}
.icon-delete:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /* content: "\f0c4"; /* scissors */
  /* content: "\f00d"; /* x */
  content: "";
  /* (\) ban */
  /* content: "\f068"; /* - minus */
  /* content: "\f146"; /* [-] minus square solid */
  /* content: "\f146"; font-weight: 400; /* [-] minus square regular*/
  /* content: "\f056"; /* (-) minus circle*/
  /* content: "\f2ed"; /* trashbin-alt solid */
  /* content: "\f2ed"; font-weight: 400; /* trashbin-alt regular */
  /* content: "\f1f8"; /* another trashbin */
  /* content: "Remove"; font-family: Arial; font-size:smaller; font-weight: 400;/* text */
  /* content: "Delete"; font-family: Arial; font-size:smaller; font-weight: 400;/* text */
}
.icon-send:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  /* paper plane */
  /*	content: "\f044"; /* pencil */
  /*	content: "\f040"; /* pencil2 */
  /*	content: "\f14b"; /* pencil3 */
  /*	content: "\f0e0"; /* envelope1 */
  /*	content: "\f2b6"; /* envelope2 */
  /*	content: "\f2b7"; /* envelope3 */
  /*	content: "\f003"; /* envelope4 */
}
.icon-address:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  /* location-dot */
  /* content: "\f041"; /* location */
  /* content: "\270f"; /* pencil */
  /* content: "\1f3e2"; /* building */
  /* content: "\f044"; /* pen-to-square */
  /* content: "\1f58a"; /* pen */
  /* content: "\f494"; /* warehouse */
  /* content: "\f54e"; /* store */
  /* content: "\f54f"; /* shop */
  /* content: "\1f3e0"; /* house */
  /* content: "\1f310"; /* globe */
  /* content: "\1f4cc"; /* thumbtack */
  /* content: "\f14b"; /* square-pen */
  /* content: "\f2bb"; /* address-card */
  /* content: "\1f4cd"; /* map-pin */
  /* content: "\f5a0"; /* map-location-dot */
  /* content: "\f59f"; /* map-location */
  /* content: "\1f5fa"; /* map */
}
.icon-phone:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  /* normal phone */
  /* content: "\f3cd"; /* mobile phone */
  /* content: "\1f4de"; font-weight: 400; /* reverse phone */
  /* content: "\f098"; /* square-phone */
  /* content: "\f87b"; /* square-phone-alt */
  /* content: "\f2a0"; /* phone-volume */
  /* content: "\1f3a7"; /* headphones */
  /* content: "\f58f"; /* headphones-simple */
}
.icon-email:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "";
  /* email sign @ */
  /* content: "\f199";  /* envelope-square */
  /* content: "\f0e0"; /* envelope solid closed */
  /*content: "\f0e0";  /* envelope outline closed */
  /* content: "\f2b6";  /* envelope-open outline */
  /* content: "\f2b6";  /* envelope-open solid*/
  /* content: "\f658";  /* envelope-open solid letter*/
}
#close_button:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /* content: "\f2d4"; /* [x] */
  /* content: "\f2d3";  /* [x] */
  content: "";
  /* x */
  /*content: "\f057";  /* (x) */
  /* content: "\f05c";  /* (x) */
}
.icon-back:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /* content: "\f04a"; /* << reverse */
  /* content: "\f30a";  /* <- */
  /* content: "\f060"; /* <- large */
  /*content: "\f0a8";  /* (<) round arrow*/
  /* content: "\f104";  /* < */
  /* content: "\f100";  /* << */
  /* content: "\f359";  /* (<) nice round*/
  content: "";
  font-weight: 400;
  /* (<) nice round*/
}