/*------------------------------------------------------------------------*/
/*------------- Put CSS to overwrite User Accounts CSS here  -------------*/
/*------------------------------------------------------------------------*/

.accountsTopBar .accountsSection {
  padding: 0;
  margin: 0;
  width: auto;
  display:flex;
}


.accountsTopBar {
  background:var(--offWhite);
  border-bottom:1px solid rgba(0,0,0,0.5);
}


.accountsTopBar .accountsSection a:hover:after,
.accountsTopBar .accountsSection a:hover:before{
  color: var(--fontColor)!important;
}


a#viewCart {
  display:block;
  width:120px;
}


#banner .contactContainer {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-family:var(--bodyFont);
  text-decoration:none;
  color:var(--white)!important;
  width:100%;
  font-family:var(--headingFont);
  font-weight:500;
  text-decoration:none!important;
}

.accountsSection {
  order:1;
}

.accountsTopBar .container {
  display: -ms-flexbox;
  display: flex;
  flex-direction:row-reverse;
  -ms-flex-pack: end;
  justify-content: space-between;
  font-size:0.8rem;
}


.cartWrap {
  display:flex;
}

.cartWrap a {
  color:#222!important;
}

.cartWrap a:before ,
.cartWrap a:after{
  color:#222!important;
}

@media (max-width:700px) {

  .accountsTopBar {
    transition: var(--transition);
    color:#fff;

  }

  .mobileScroll.scrollStart .accountsTopBar {
    transform: translatey(100%);
  }
  .cartWrap {
    width:100%;
  }
}



@media (min-width:700px) {
  .accountsTopBar {
    border-bottom:1px solid rgba(30,30,30,0.05);


  }

  .accountsTopBar * {
    font-size:0.7rem;
  }


  .viewCartSection {
    display:flex;
  } 

  .accountsTopBar a.enquire-trigger {
    background:var(--primary);
    border: 2px solid var(--primary);
  }

  .accountsTopBar a.enquire-trigger:hover {
    background:none;
    border-color:var(--primary);
    color:var(--primary);
    opacity:1;
  }

}