/*-----------------------------------*/
/*---------- LOGIN POPUP  -----------*/
/*-----------------------------------*/
/* Account popups have been deprecated */
.loginPopup {
  width: 100%;
}
.loginPopup .popupWrap {
  max-width: 500px;
  min-height: 400px;
}
.loginPopup .popupWrap form {
  width: 100%;
}
.loginPopup .popupWrap .loginFail {
  display: block;
  background: var(--error);
  color: white;
  padding: 0.5em 1em;
  border-radius: 0.3em;
}
.loginPopup .popupWrap .loginFail:empty {
  display: none;
}

/*--------------------------------------*/
/*---------- Popup Messages  -----------*/
/*--------------------------------------*/
.popupWrap {
  min-width: 400px;
  min-height: 220px;
  padding: 0.5em;
  margin-top: auto;
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
}
.popupWrap .text {
  text-align: center;
  font-size: 1.1em;
}
.popupWrap .text:before {
  display: block;
  content: "\f071";
  font-family: FontAwesome;
  font-size: 3em;
  color: #DF3B42;
  margin: 0 auto 0.3em;
  line-height: 1em;
}
.popupWrap .text:after {
  display: block;
  margin: 1em auto 0;
  content: "";
  width: 100%;
  max-width: 100px;
  height: 5px;
  background: #3f414e;
}
.popupWrap.error .text:before {
  content: "\f06a";
  color: var(--error);
}
.popupWrap.error .text:after {
  background: var(--error);
}
.popupWrap.warning .text:before {
  content: "\f071";
  color: var(--warning);
}
.popupWrap.warning .text:after {
  background: var(--warning);
}
.popupWrap.success .text:before {
  content: "\f058";
  color: var(--success);
}
.popupWrap.success .text:after {
  background: var(--success);
}
.popupWrap .text:before {
  content: "\f06a";
  color: #DF3B42;
}
.popupWrap.info .text:before {
  content: "\f05a";
  color: #3f414e;
}

/*-----------------------------------*/
/*------------ REGISTER  ------------*/
/*-----------------------------------*/
.accountWrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-direction: column;
      flex-direction: column;
  width: 100%;
  max-width: 780px;
  min-height: 500px;
  margin: auto;
  padding: 1em;
}
.accountWrap form {
  width: 100%;
}
.accountWrap form input {
  width: 100%;
}
.accountWrap form input.account-registerbtn, .accountWrap form input.account-loginbtn {
  background: var(--success);
  background: var(--cta);
  color: white;
  border: var(--buttonBorderWidth) solid var(--cta);
  transition: var(--transition);
}
.accountWrap form input.account-registerbtn:hover, .accountWrap form input.account-loginbtn:hover {
  border-color: var(--success);
  color: var(--success);
  border-color: var(--cta);
  color: var(--cta);
  background: transparent;
}
.accountWrap form input.account-cancel {
  background: transparent;
  color: var(--fontColor);
  border: 0px solid rgba(0, 0, 0, 0);
  text-decoration: underline;
}
.accountWrap form input.account-cancel:hover {
  color: var(--error);
  color: var(--primaryLight);
}
.accountWrap form span {
  display: none;
}
.accountWrap form .select:focus, .accountWrap form .select:hover {
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.accountWrap .guest input {
  margin: 1.5em auto;
  padding: 0.5em 1em;
}
.accountWrap .col-2 {
  -ms-flex-positive: 1;
      flex-grow: 1;
}
.accountWrap h1 {
  margin-top: 0;
  font-size: 3.5em;
}
.accountWrap.registerResponse {
  max-width: 600px;
}
.accountWrap.registerResponse p {
  font-size: 1.2em;
  line-height: 1.8em;
  text-align: center;
}
.accountWrap .password {
  width: 100%;
  margin: 0 auto;
}
.accountWrap .password fieldset {
  padding: 1em;
  font-size: 0.9em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3em;
  margin: 0;
}
.accountWrap .password fieldset legend {
  margin: 0 0 0 -0.5em;
  font-size: 1.2em;
  padding: 0 0.5em;
}
.accountWrap .password fieldset span {
  display: block;
}

.noSidebar .sidebar {
  display: none;
}

.messageWrap {
  margin: 2em auto;
  text-align: center;
}
.messageWrap .error {
  color: var(--error);
  font-size: 1.5em;
  font-weight: bold;
}
.messageWrap .error:before {
  content: "\f06a";
  color: var(--error);
  display: block;
  content: "\f071";
  font-family: FontAwesome;
  font-size: 3em;
  margin: 0 auto 0.3em;
  line-height: 1em;
}
.messageWrap .error:after {
  display: block;
  margin: 1em auto 0;
  content: "";
  width: 100%;
  max-width: 100px;
  height: 5px;
  background: var(--error);
}

/*-----------------------------------*/
/*--------- View Order Popup --------*/
/*-----------------------------------*/
.viewOrderWrap .actionBtns {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  width: 100%;
  max-width: 200px;
  margin: 1em auto 0;
  text-transform: capitalize;
}
.viewOrderWrap .actionBtns .btn {
  background: black;
  color: white;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0.5em;
  text-decoration: none;
  width: 48%;
}
.viewOrderWrap .actionBtns .btn:before {
  content: "";
  font-family: fontAwesome;
  margin-right: 0.3em;
}
.viewOrderWrap .actionBtns .btn.email {
  background: #25a65a;
}
.viewOrderWrap .actionBtns .btn.email:before {
  content: "\f0e0";
}
.viewOrderWrap .actionBtns .btn.print {
  background: #08689f;
}
.viewOrderWrap .actionBtns .btn.print:before {
  content: "\f02f";
}

@media all and (max-width: 700px) {
  .accountWrap {
    font-size: 0.9em;
  }
  .registerForm, .loginPopup {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .registerForm {
    height: 90vh;
    padding-bottom: 70px;
  }
}
/*-----------------------------------*/
/*-------- ACCOUNTS SECTION  --------*/
/*-----------------------------------*/
.accountsTopBar {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  background: var(--opacity60);
  color: var(--white);
  font-size: 0.9em;
  line-height: 1em;
}
.accountsTopBar .container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
}
.accountsTopBar a {
  color: var(--white);
  margin: 0 0.1em;
  border-radius: 0;
}
.accountsTopBar a:hover {
  background: var(--primary);
  color: var(--white);
}
.accountsTopBar .accountsSection {
  padding: 0;
  margin: 0;
  width: auto;
}
.accountsTopBar .accountsSection a:before {
  content: "";
  font-family: "fontAwesome";
  font-size: 1em;
  color: var(--white);
  margin-right: 0.5em;
}
.accountsTopBar .accountsSection a:after {
  content: "";
  font-family: inherit;
  font-size: 1em;
  color: var(--white);
}
.accountsTopBar .accountsSection a.login:before {
  content: "\f090";
  font-family: "fontAwesome";
}
.accountsTopBar .accountsSection a.login:after {
  content: "Login";
}
.accountsTopBar .accountsSection a.register:before {
  content: "\f007";
  font-family: "fontAwesome";
}
.accountsTopBar .accountsSection a.register:after {
  content: "Register";
}
.accountsTopBar .accountsSection .accountsWrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
}
.accountsTopBar .accountsSection .accountsWrap .loggedIn {
  display: inline-block;
  margin-right: 0.5em;
  padding: 0.8em 1.6em;
  text-decoration: none;
}
.accountsTopBar .accountsSection .accountsWrap .loggedIn:before {
  content: "\f007";
  font-family: "fontAwesome";
  margin-right: 0.5em;
}
.accountsTopBar .accountsSection .accountsWrap .loggedIn .message:before {
  font-family: inherit;
  content: "Welcome, ";
  margin: 0;
}
.accountsTopBar .accountsSection .accountsWrap .logout {
  padding: 0.8em 1.6em;
  margin-left: 0.5em;
  text-decoration: none;
}
.accountsTopBar .accountsSection .accountsWrap .logout:before {
  font-family: "fontAwesome";
  content: "\f08b";
}
.accountsTopBar .accountsSection .accountsWrap .logout:after {
  font-family: inherit;
  content: "Logout";
}
.accountsTopBar .accountsSection .accountsWrap .accountEmail span {
  margin-right: 0.2em;
}
.accountsTopBar .viewCartSection {
  padding: 0;
  margin: 0;
  width: auto;
}

/* Side menu of account once logged in */
.accountMenu:before {
  display: block;
  content: "My Account";
  margin: 1em 0;
  font-size: 1.4em;
  font-family: var(--headingFont);
  font-weight: var(--headingWeight);
  color: var(--headingColor);
}

.enquiryForm.editAccount {
  float: none;
  max-width: none;
  margin: 0 auto 3em;
  padding: 1em;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.enquiryForm.editAccount h3 {
  font-size: 1.5em;
  padding: 0.5em 0.5em 0.5em 0;
  width: 100%;
}
.enquiryForm.editAccount h3.shippingDetailsHeading {
  margin-top: 0;
  padding-top: 0;
}
.enquiryForm.editAccount h3.billingDetailsHeading {
  margin-top: 1em;
}
.enquiryForm.editAccount .account-shipping {
  width: 100%;
}
.enquiryForm.editAccount .account-billing {
  width: 100%;
  margin-top: 2em;
}
.enquiryForm.editAccount .account-registerbtn {
  margin-top: 1em;
}
.enquiryForm.editAccount .checkoutDetails {
  width: 100%;
}
.enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0.3em 0;
  width: 100%;
}
.enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col3 input, .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col3 .select {
  width: 32%;
}
.enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col2 input {
  width: 49%;
}
.enquiryForm.editAccount .sameAsShipping {
  font-size: 1.2em;
  margin-bottom: 1em;
}
.enquiryForm.editAccount .sameAsShipping .enqRight {
  width: 100%;
}
.enquiryForm.editAccount .required {
  font-size: 0.9em;
  margin-top: 0.5em;
}

.account-change-password #changePasswordForm {
  margin: 1em 0 0;
}

.enquiryForm.forgotFormWrap {
  float: none;
  max-width: 700px;
  margin: 1em auto;
  padding: 1em;
}
.enquiryForm.forgotFormWrap .forgotText {
  width: 100%;
  text-align: center;
  padding: 1em 0;
}
.enquiryForm.forgotFormWrap #forgotPasswordForm {
  width: 100%;
}
.enquiryForm.forgotFormWrap .button {
  margin: 2em 0 1em;
}

.accountOrderWrap {
  width: 100%;
  overflow-x: auto;
  margin: 1em auto;
}
.accountOrderWrap .accountsOrderTable {
  width: 100%;
  border: 1px solid var(--opacity20);
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  min-width: 600px;
}
.accountOrderWrap .accountsOrderTable .accountsOrderHead {
  font-size: 1.1em;
  font-weight: 700;
  background: var(--opacity10);
  margin: 0;
}
.accountOrderWrap .accountsOrderTable .accountsOrderHead div {
  padding: 1em;
}
.accountOrderWrap .accountsOrderTable .orderRow:nth-child(even) {
  background: var(--opacity03);
}
.accountOrderWrap .accountsOrderTable .orderRow div {
  width: 20%;
  padding: 0.5em;
  border-spacing: 0;
  margin: 0;
  -ms-flex-align: center;
      align-items: center;
}
.accountOrderWrap .accountsOrderTable .orderRow div .button {
  font-size: 0.8em;
}

.checkoutDetails .existingAccount {
  margin: 0.1em 0 1em;
}

#createAccount:after {
  content: "Create Account";
}
#createAccount icon {
  float: left;
  margin: 0 10px 0 0;
}
#createAccount icon:before {
  content: "\f007";
}

.checkoutNext.createAccount:after {
  content: "Continue as a guest";
}

.checkoutNext.guest:after {
  content: "Continue as a guest";
}

.passwordChange .enquiryForm {
  float: none;
  margin: 1em auto;
  max-width: 500px;
}
.passwordChange .enquiryForm #changePasswordForm {
  width: 100%;
}
.passwordChange .enquiryForm #changePasswordForm .enqLeft {
  width: 35%;
}
.passwordChange .enquiryForm #changePasswordForm .enqRight {
  width: 65%;
}

.resetPassword #resetPasswordForm {
  width: 100%;
  max-width: 600px;
  margin: 2em auto;
}
.resetPassword #resetPasswordForm .enquiryForm {
  float: none;
  margin: 1em auto;
}
.resetPassword #resetPasswordForm .enquiryForm .enqLeft {
  width: 35%;
}
.resetPassword #resetPasswordForm .enquiryForm .enqRight {
  width: 65%;
}

#passwordStrength {
  display: block;
  width: 100%;
  padding: 0.2em;
  margin: 0.2em auto;
  border: 1px solid black;
  outline: none;
  border-radius: 0.3em;
  transition: var(--transition);
  background: transparent;
  color: black;
  text-align: center;
  font-size: 1em;
}
#passwordStrength:empty {
  display: none;
}
#passwordStrength:before {
  content: "";
  font-family: "fontAwesome";
  margin-right: 0.3em;
}
#passwordStrength.pw-very-weak {
  color: var(--error);
  border-color: var(--error);
}
#passwordStrength.pw-very-weak:before {
  content: "\f119";
}
#passwordStrength.pw-weak {
  color: var(--error);
  border-color: var(--error);
}
#passwordStrength.pw-weak:before {
  content: "\f119";
}
#passwordStrength.pw-reasonable {
  color: var(--warning);
  border-color: var(--warning);
}
#passwordStrength.pw-reasonable:before {
  content: "\f11a";
}
#passwordStrength.pw-strong {
  color: var(--success);
  border-color: var(--success);
}
#passwordStrength.pw-strong:before {
  content: "\f118";
}
#passwordStrength.pw-very-strong {
  color: var(--success);
  border-color: var(--success);
}
#passwordStrength.pw-very-strong:before {
  content: "\f118";
}

#passwordStrengthHint {
  display: block;
  width: 100%;
  padding: 0.2em;
  margin: 0.2em auto;
  border: 0px solid var(--opacity20);
  outline: none;
  border-radius: 0.3em;
  transition: var(--transition);
  text-align: center;
  font-size: 0.8em;
}
#passwordStrengthHint:empty {
  display: none;
}

.passwordChangeSuccess {
  padding: 1em;
  width: 100%;
  max-width: 400px;
  margin: 1em auto;
  background: var(--success);
  color: white;
  text-align: center;
}

.passwordReset h3 {
  text-align: center;
  margin: 2em 0;
}

@media all and (max-width: 700px) {
  #navToggleWrap .accountsWrap, #navToggleWrap .viewCartSection {
    display: none;
  }
  .accountsTopBar {
    position: fixed;
    bottom: 0;
    z-index: 100;
    background: var(--opacity80);
  }
  .accountsTopBar .container {
    -ms-flex-pack: center;
        justify-content: center;
  }
  .accountsTopBar .container a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
  }
  .accountsTopBar .container a:before {
    display: block;
    width: 100%;
    font-size: 16px;
    margin: 0;
    margin-bottom: 10px;
  }
  .accountsTopBar .container .accountEmail {
    display: none;
  }
  .accountsTopBar .container .viewCartSection {
    width: 33%;
    display: -ms-flexbox;
    display: flex;
  }
  .accountsTopBar .container .viewCartSection .container {
    margin: 0;
  }
  .accountsTopBar .container .accountsSection {
    width: 66%;
  }
  .accountsTopBar .container .accountsSection a {
    width: 50%;
  }
  .accountsTopBar .container #viewCart {
    width: 100%;
  }
  .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col3 input, .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col3 .select {
    width: 100%;
  }
  .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col3 input:first-child, .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col3 input:nth-child(2), .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col3 .select:first-child, .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col3 .select:nth-child(2) {
    margin-bottom: 0.6em;
  }
  .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col2 input {
    width: 100%;
  }
  .enquiryForm.editAccount .checkoutDetails .checkoutDetailsRow.col2 input:first-child {
    margin-bottom: 0.6em;
  }
  /* hide view cart btn in the navtoggle section */
  #navToggleWrap #viewCart {
    display: none;
  }
  .myAccount .siteBottom .container {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }
  .myAccount .siteBottom .container .sidebar {
    display: block;
    width: 100%;
  }
  .myAccount .siteBottom .container .sidebar .categoryMenu {
    text-align: center;
  }
}