/*background color for body and banner*/
.coral, .ladbrokes {
  min-height: 100vh;
}

.coral {
  background-color: rgb(242, 245, 250);
}

.narrow {
  max-width: 35em;
  text-align: center;
  margin: auto;
}

.narrow ul {
  text-align: left;
}

.coral .banner {
  background-color: rgb(56, 78, 174);
  color: white;
  position: sticky;
  top: 0;
}

.ladbrokes .banner {
  background-color: rgb(203, 26, 33);
  color: white;
  position: sticky;
  top: 0;
}

.coral .logo {
  background-image: url("/logos/Coral.svg");
}

.ladbrokes .logo {
  background-image: url("/logos/Ladbrokes.svg");
}

.ladbrokescoral .logo {
  background-image: url("/logos/LadbrokesCoralGroup.svg");
  width: 15em;
}

/*btns plus, minus, banner actions*/
.coral ul.mainNav li a:hover:after {
  background: rgb(56, 78, 174);
}

.coral ul.mainNav li a.navOn:after {
  background: rgb(56, 78, 174);
}

.ladbrokescoral ul.mainNav li a:hover:after, .ladbrokes ul.mainNav li a:hover:after {
  background: rgb(203, 26, 33);
}

.ladbrokescoral ul.mainNav li a.navOn:after, .ladbrokes ul.mainNav li a.navOn:after {
  background: rgb(203, 26, 33);
}

/*.coral .notice, .ladbrokes .notice {
  color: #fa9222
}*/
.coral a.notice, .ladbrokes a.notice {
  color: rgb(203, 26, 33);
}

.coral .fastTrack, .coral .notice {
  /*background-color: rgb(56,78,174);*/
  font-weight: normal;
}

.ladbrokes .fastTrack, .ladbrokes .notice {
  /*background-color: rgb(203,26,33);*/
  font-weight: normal;
}

.ladbrokescoral .btn {
  color: rgb(7, 13, 40);
  border-color: rgb(228, 229, 228);
  background: white;
  font-weight: bold;
}

.coral .btn {
  color: rgb(56, 78, 174);
  border-color: rgb(56, 78, 174);
  background: white;
  font-weight: bold;
}

.coral .btnOn {
  color: white;
  border-color: rgb(56, 78, 174);
  background: rgb(56, 78, 174);
  font-weight: bold;
}

.coral .icnHelpDesk::after {
  background-image: url(/svg/HelpDeskBlue.svg);
}

.ladbrokes .icnHelpDesk::after {
  background-image: url(/svg/HelpDeskRed.svg);
}

.coral .inptQty {
  /* border-color: rgb(56,78,174);*/
}

.ladbrokes .btn {
  color: rgb(203, 26, 33);
  border-color: rgb(203, 26, 33);
  background: white;
  font-weight: bold;
}

.ladbrokes .btnOn {
  color: white;
  border-color: rgb(7, 13, 40);
  background: rgb(7, 13, 40);
  font-weight: bold;
}

.ladbrokes .inptQty {
  /*border-color: rgb(203,26,33);*/
}

/*inputs specifically search
.coral input, .coral select {
  color: rgb(56,78,174);
}*/
/*  .ladbrokes input[type="text"], .ladbrokes select {
  color: rgb(203,26,33);
  }

.ladbrokescoral input[type="text"], .ladbrokescoral select {
  color: rgb(63,68,84);
}*/
.coral input.inptSearch {
  background: rgb(233, 237, 247);
  border-color: rgb(56, 78, 174);
}

.ladbrokes input.inptSearch {
  background: rgb(251, 232, 231);
  border-color: rgb(203, 26, 33);
}

.coral .fill {
  fill: rgb(56, 78, 174);
}

.ladbrokes .fill {
  fill: rgb(203, 26, 33);
}

.coral input::placeholder {
  color: rgb(56, 78, 174);
}

.ladbrokes input::placeholder {
  color: rgb(203, 26, 33);
}

.coral .category, .coral .quickBasketHead {
  color: rgb(56, 78, 174);
}

.ladbrokes .category, .ladbrokes .quickBasketHead {
  color: rgb(203, 26, 33);
}

.validation-summary-errors {
  display: inline-flex;
  color: #e30613;
}
.validation-summary-errors ul {
  margin: auto 0;
  padding: 0;
}
.validation-summary-errors li {
  list-style: none;
  margin: auto 0;
  padding: 0;
}

.loader {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1em;
  padding: 0.25em;
  -webkit-animation: pulse 3s infinite linear;
  animation: pulse 2s infinite linear;
  overflow: hidden;
  /*  background-color: black;
    border: 4px solid pink;*/
  z-index: 100;
}

/*.loader:after {
    content: '';
    background: #ffffff;
    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,1));
    background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,1));
    background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,1));
    background: -ms-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,1));
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,1));
    width: 25em;
    height: 0.5em;
    display: block;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    filter: blur(0.01em);
}*/
.loader:after {
  content: "";
  background: rgb(8, 170, 12);
  background: -moz-linear-gradient(right, rgba(8, 170, 12, 0), rgba(8, 170, 12, 0.3), rgb(8, 170, 12));
  background: -webkit-linear-gradient(right, rgba(8, 170, 12, 0), rgba(8, 170, 12, 0.3), rgb(8, 170, 12));
  background: -o-linear-gradient(right, rgba(8, 170, 12, 0), rgba(8, 170, 12, 0.3), rgb(8, 170, 12));
  background: -ms-linear-gradient(right, rgba(8, 170, 12, 0), rgba(8, 170, 12, 0.3), rgb(8, 170, 12));
  background: linear-gradient(to right, rgba(8, 170, 12, 0), rgba(8, 170, 12, 0.3), rgb(8, 170, 12));
  width: 25em;
  height: 0.5em;
  display: block;
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  filter: blur(0.01em);
}

.local > .loader {
  position: relative;
  width: 100%;
  height: 1em;
  padding: 0.25em;
  -webkit-animation: pulse 3s infinite linear;
  animation: pulse 2s infinite linear;
  overflow: hidden;
}

.local > .loader:after {
  background: rgb(56, 78, 174);
  background: -moz-linear-gradient(right, rgba(56, 78, 174, 0), rgba(56, 78, 174, 0.3), rgb(56, 78, 174));
  background: -webkit-linear-gradient(right, rgba(56, 78, 174, 0), rgba(56, 78, 174, 0.3), rgb(56, 78, 174));
  background: -o-linear-gradient(right, rgba(56, 78, 174, 0), rgba(56, 78, 174, 0.3), rgb(56, 78, 174));
  background: -ms-linear-gradient(right, rgba(56, 78, 174, 0), rgba(56, 78, 174, 0.3), rgb(56, 78, 174));
  background: linear-gradient(to right, rgba(56, 78, 174, 0), rgba(56, 78, 174, 0.3), rgb(56, 78, 174));
  filter: blur(0.01em);
}

@-webkit-keyframes pulse {
  0% {
    padding-left: -25em;
  }
  100% {
    padding-left: 100%;
  }
}
@keyframes pulse {
  0% {
    padding-left: -25em;
  }
  100% {
    padding-left: 100%;
  }
}
.spinner {
  color: white;
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.spinner:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

.spinner:after {
  background: #0dc5c1;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v16-latin-regular.eot"); /* IE9 Compat Modes */
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v16-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v16-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v16-latin-regular.woff") format("woff"), url("../fonts/roboto-v16-latin-regular.ttf") format("truetype"), url("../fonts/roboto-v16-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-v16-latin-700.eot"); /* IE9 Compat Modes */
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v16-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v16-latin-700.woff2") format("woff2"), url("../fonts/roboto-v16-latin-700.woff") format("woff"), url("../fonts/roboto-v16-latin-700.ttf") format("truetype"), url("../fonts/roboto-v16-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
}
body {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 100vh;
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  color: rgb(7, 13, 40);
  background-color: rgb(247, 247, 247);
}

a:hover {
  cursor: pointer;
}

.choose {
  height: 100vh;
}

h1 {
  font-size: 1.5em;
  font-weight: normal;
}

h2 {
  font-size: 1.25em;
  font-weight: normal;
  /*margin-left: 0.3125em;
  margin-right: 0.3125em;*/
}

p {
  /*margin: 1em 0.3125em;*/
  margin: 1em 1em;
  line-height: 1.25em;
}

div {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: rgb(7, 13, 40);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p a {
  text-decoration: underline;
}

p a:hover {
  text-decoration: none;
}

/* Begin layout */
.row:after {
  content: "";
  display: block;
  clear: both;
}

.row {
  width: 100%;
  clear: both;
  position: relative;
}

.right {
  float: right;
  display: inline-flex;
  gap: 0.5em;
  margin-right: 0.25em;
  align-items: center;
}

.clrBoth {
  display: block;
  clear: both;
}

.right:after {
  content: "";
  display: block;
  clear: both;
}

.content {
  padding: 0 1em 2em 1em;
  overflow: auto;
}

.orderDates {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}

.orderDates li {
  float: left;
  background-color: rgb(228, 229, 228);
  padding: 1em;
  margin: 0.5em 1em 0.5em 0;
  min-width: 12em;
  text-align: center;
}

.orderDates li:nth-child(4n+1) {
  clear: both;
}

.alCenter {
  text-align: center;
}

.oneCol {
  text-align: center;
}

/*.twoCol{width:50%; display:inline-block; vertical-align:middle;}*/
.col60 {
  width: 60%;
  display: inline-block;
  vertical-align: middle;
}

.col40 {
  width: 40%;
  display: inline-block;
  vertical-align: middle;
}

.fiveCol {
  width: calc(20% - 0.625em); /**/
  margin: 0.625em 0.3125em;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
}

.fourCol {
  width: calc(25% - 0.625em); /**/
  margin: 0.625em 0.3125em;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
}

.twoCol {
  width: calc(50% - 0.625em);
  margin: 0.625em 0.3125em;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
}

.oneFith {
  width: 20%;
  position: sticky;
  top: 0px;
}

.fourFiths {
  width: 80%;
}

.oneFith, .fourFiths {
  display: inline-block;
  vertical-align: top;
}

/* Begin navigation */
.navigation > ul {
  margin: 0;
  padding: 0;
  background-color: white;
  display: inline-block;
  width: 100%;
  white-space: nowrap;
}

.navigation > ul li {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.navigation > ul li a {
  display: inline-block;
  text-align: center;
  margin: 0 0.45em;
  line-height: 3.25em;
}

.navigation > ul li a:hover {
  text-decoration: none;
}

.navigation > ul li a.navOn {
  font-weight: bold;
}

.navigation > ul li a:after {
  content: "";
  float: left;
  background: transparent;
  width: 100%;
  height: 0.25em;
  -moz-transition: background 0.25s;
  -o-transition: background 0.25s;
  -webkit-transition: background 0.25s;
  transition: background 0.25s;
}

.navMore {
  background-image: url("/svg/Down.svg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 0.75em auto;
  padding-right: 1em;
}

/* Layout */
.banner {
  width: 100%;
  height: 3.75em;
  line-height: 3.75em;
  padding: 0 0 0 1em;
  /* position: sticky;
   top: 0;*/
  z-index: 11;
  /*color: white;*/
}

.navigation {
  width: 100%;
  height: 3.75em;
  line-height: 3.75em;
  padding: 0 1em 0 0;
  background-color: white;
}

.logo {
  width: 9.375em;
  display: inline-block;
  height: 3.5em;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.lcgroup {
  max-width: 22em;
  width: 100%;
  display: inline-block;
  height: 6.5em;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/logos/LadbrokesCoralGroup.svg");
  margin-top: 4em;
}

.user {
  display: inline-flex;
  flex-direction: row;
  vertical-align: middle;
  flex-wrap: wrap;
  line-height: 1.5em;
  justify-content: flex-end;
}

.ladbrokescoral .user a {
  color: rgb(61, 67, 83);
}

.user a {
  color: white;
  text-decoration: underline;
  padding: 0 0.5em;
  transition: background-color linear 0.3s;
  border-radius: 3em;
}

.user a:hover {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.75);
}

.btnLadbrokes, .btnCoral {
  border-radius: 0.25em;
  border: 10px double transparent;
  -moz-transition: border ease-in-out 0.2s;
  -o-transition: border ease-in-out 0.2s;
  -webkit-transition: border ease-in-out 0.2s;
  transition: border ease-in-out 0.2s;
  width: 12.5em;
  margin: 2em;
  background-size: contain;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
}

.btnLadbrokes:after, .btnCoral:after {
  content: "";
  margin-top: 33%;
  display: inline-block;
}

.btnLadbrokes { /*background-image: url('logos/LadbrokesCol.svg');*/
  background-color: rgb(203, 26, 33);
}

.btnCoral { /*background-image: url('logos/CoralCol.svg');*/
  background-color: rgb(56, 78, 174);
}

.btnDflts, .btnCartCheckout, .btnHome, .btnBack, .btn {
  line-height: 2.5em;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}

.btnDisabled {
  opacity: 0.15;
}

.btnWide {
  border-radius: 0.25em;
  width: 11em;
  height: 2.5em;
  display: inline-block;
}

.btnMedium {
  border-radius: 0.25em;
  padding: 0 0.5em;
  height: 2.5em;
  display: inline-block;
}

.btnSmall {
  border-radius: 0.25em;
  min-width: 4.5em;
  padding: 0 0.5em;
  height: 2.5em;
  display: inline-block;
}

.btnRemove {
  border-radius: 0.25em;
  background-image: url("/svg/CloseBlk.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin: 0 0 0 0.5em;
  vertical-align: middle;
}

.btnOrders {
  font-weight: bold;
}

.btnPlusMinus {
  border-radius: 0.25em;
  width: 4.25em;
  height: 1.875em;
  line-height: 1.875em;
  display: inline-block;
  vertical-align: top;
}

.btnBack {
  border-radius: 0.25em;
  background-color: rgb(252, 208, 52);
  background-image: url("/svg/Back.svg");
  background-size: auto 50%;
  background-position: center center;
  background-repeat: no-repeat;
  color: white;
  width: 2.5em;
  height: 2.5em;
  display: inline-block;
  margin: 0;
}

.btnHome {
  border-radius: 0.25em;
  background-color: rgb(8, 170, 12);
  background-image: url("/svg/Home.svg");
  background-size: auto 50%;
  background-position: center center;
  background-repeat: no-repeat;
  color: white;
  width: 2.5em;
  height: 2.5em;
  display: inline-block;
  margin: 0;
}

.btnCartCheckout {
  border-radius: 0.25em;
  background-color: rgb(8, 170, 12);
  background-image: url("/svg/basket.svg");
  background-size: auto 40%;
  background-position: center right 0.5em;
  background-repeat: no-repeat;
  color: white;
  gap: 0.25em;
  display: flex;
  align-items: center;
}

.btnCartCheckout:before {
  content: "";
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center center;
  width: 2em;
  height: 2em;
  border-radius: 5em;
  border-radius: 5em;
}

.ladbrokes .btnCartCheckout:before {
  background-image: url("/svg/basketRed.svg");
}

.coral .btnCartCheckout:before {
  background-image: url("/svg/basketBlue.svg");
}

.btnPlaceOrder {
  border-radius: 0.25em;
  background-color: rgb(8, 170, 12);
  height: 2em;
  line-height: 2em;
  display: inline-block;
  color: white;
  text-align: center;
  width: 10em;
  margin: 0.35em;
}

.alright {
  text-align: right;
}

.btnGrey {
  border-radius: 0.25em;
  background-color: rgb(228, 229, 228);
  height: 2em;
  line-height: 2em;
  display: inline-block;
  color: rgb(61, 67, 83);
  text-align: center;
  width: 10em;
  /*    float: right;*/
  margin: 0.35em;
}

.btnRefresh {
  border-radius: 0.25em;
  background-color: rgb(228, 229, 228);
  height: 2.5em;
  line-height: 2.5em;
  display: inline-block;
  color: rgb(61, 67, 83);
  text-align: center;
  width: 10em;
  /*float: right;*/
  margin: 0;
  background-image: url(/svg/refresh.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
}

.btnGreySmall {
  border-radius: 0.25em;
  background-color: rgb(228, 229, 228);
  height: 2em;
  line-height: 2em;
  display: inline-block;
  color: rgb(61, 67, 83);
  text-align: center;
  width: 4em;
  float: right;
  margin: 0.35em;
}

/*.fastTrack {
    background-color: $clrOrange;
}*/
.btnAddToBasket {
  border-radius: 0.25em;
  background-color: rgb(8, 170, 12);
  height: 2em;
  line-height: 2em;
  display: block;
  color: white;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  max-width: 35em;
  margin: auto;
}

.btnCouponGreen {
  background-color: rgb(8, 170, 12) !important;
  color: white !important;
}

.btnAdminPlusMinus {
  border-radius: 0.25em;
  height: 3em;
  width: 3em;
  line-height: 3em;
  display: inline-block;
  color: white;
  background-color: rgb(228, 229, 228);
  vertical-align: middle;
  text-align: center;
  /* font-size: 1em; */
  font-weight: bold;
  margin: 0.25em auto;
  padding: 0.25em;
}
.btnAdminPlusMinus svg {
  height: 1em;
  padding-top: 0.75em;
  vertical-align: top;
}

a.lnk {
  text-decoration: underline;
  font-weight: bold;
  white-space: nowrap;
}

.lnkRemove {
  text-decoration: underline;
  font-weight: normal;
  color: rgb(148, 148, 148);
  font-size: 0.85em;
}

.dvBsktActions > div {
  margin: 2em 0 1em 0;
}
.dvBsktActions > a {
  margin-top: 1em;
}

.checker {
  /*font-size:1.25em;
  */
} /**/
.lnkRed, .lnkBlue {
  color: rgb(227, 6, 19);
  height: 2em;
  line-height: 2em;
  display: block;
  text-align: center;
  font-size: 1em;
  max-width: 35em;
  margin: 0.25em auto;
}

.lnkBlue {
  color: rgb(56, 78, 174);
  text-decoration: underline;
}

.lnkOrder {
  background-image: url("/svg/Order.svg");
  background-repeat: no-repeat;
  background-size: auto 75%;
  background-position: -1em center;
  padding-left: 1em;
  display: block;
}

a.lnkWide {
  display: flex;
  padding: 0 0.5em;
  transition: background-color ease-in-out 0.3s;
  flex-wrap: wrap;
}
a.lnkWide span {
  margin-left: auto;
  padding-left: 1em;
  color: rgb(148, 148, 148);
  font-size: 0.8em;
}

a.lnkWide:hover {
  background-color: rgb(228, 229, 228);
  text-decoration: none;
}

/*.lnkOrder::after{content: "";
  float: left;

  background-repeat:no-repeat; background-size:50% auto; background-position:center left
  background: $clrGrey;
  width: 100%;
  height: .25em;
  -moz-transition: background .25s;
  -o-transition: background .25s;
  -webkit-transition: background .25s;
  transition: background .25s;}*/
.btnAddToBasket:disabled, .btnGreen:disabled {
  background-color: rgb(189, 189, 189);
}

input[type=checkbox] {
  height: 1.85em;
  width: 1.85em;
  vertical-align: middle;
}

input[type=button]:disabled, input[type=submit]:disabled {
  background-color: rgb(228, 229, 228) !important;
  color: rgb(255, 255, 255) !important;
}

input[type=text]:disabled {
  background-color: rgb(247, 247, 247);
}

input[type=text]:disabled {
  border: 2px solid rgb(247, 247, 247) !important;
}

.btnView {
  border-radius: 0.25em;
  width: 4.25em;
  background-color: rgb(8, 170, 12);
  background-image: url("/svg/Eyeball.svg");
  background-size: auto 40%;
  background-position: center center;
  height: 2em;
  line-height: 2em;
  display: block;
}

.fiterReports .btnAction {
  margin: 0 0.5em;
}

.btnAction, .btnCalendar, .btnMonth, .btnCsv, .btnGo, .btnInline {
  border-radius: 0.25em;
  min-width: 4.25em;
  padding: 0 0.5em;
  background-color: rgb(228, 229, 228);
  background-size: auto 40%;
  background-position: center center;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
  margin: 0.25em 0;
}

.btnGreen {
  border-radius: 0.25em;
  background-color: rgb(8, 170, 12) !important;
  height: 2.5em;
  line-height: 2.5em;
  display: inline-block;
  color: white;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  max-width: 35em;
  min-width: 4.25em;
  margin: 0.25em auto;
  padding: 0 0.5em;
}

.btnRed {
  border-radius: 0.25em;
  background-color: rgb(227, 6, 19);
  height: 2.5em;
  line-height: 2.5em;
  /**/
  display: inline-block;
  vertical-align: middle;
  color: white;
  text-align: center;
  font-size: 1em;
  max-width: 40em;
  font-weight: bold;
  margin: 0.25em auto;
  padding: 0 0.5em;
}

.btnOrange {
  border-radius: 0.25em;
  background-color: rgb(250, 146, 34);
  height: 2.5em;
  line-height: 2.5em;
  display: block;
  color: white;
  text-align: center;
  font-size: 1em;
  max-width: 35em;
  font-weight: bold;
  margin: 0.25em auto;
}

/*.btnOn {
  background-color: $clrBlue;
}*/
.btnInline:after {
  content: "";
  float: left;
  background: transparent;
  width: 100%;
  height: 0.25em;
  margin-top: -0.25em;
  -moz-transition: background 0.25s;
  -o-transition: background 0.25s;
  -webkit-transition: background 0.25s;
  transition: background 0.25s;
}

.btnOn:after {
  background: rgb(203, 26, 33);
}

.btnInline {
  width: unset;
  padding: 0 1em;
  min-width: 5em;
  background-color: rgb(228, 229, 228);
}

.btnMonth {
  width: 8.25em;
}

.btnCsv {
  width: 8.25em;
  /*float: right; */
  background-image: url("/svg/Down.svg");
  background-position: right 0.5em center;
  padding-right: 1em;
  background-repeat: no-repeat;
  background-size: auto 20%;
}

.btnGo {
  width: 2.5em;
}

.ladbrokes input.inptSearch, .coral input.inptSearch, .ladbrokescoral input.inptSearch, .ladbrokescoral input.inptDate {
  width: 17em;
  display: inline-block;
  border: 2px solid;
  border-radius: 0.25em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 3em;
  vertical-align: middle;
  font-size: 0.825em;
  background-image: url("/svg/Search.svg");
  background-repeat: no-repeat;
  background-size: auto 60%;
  background-position: center right 0.75em;
}

.ladbrokescoral input.inptSearch {
  /*margin: 0.85em 0;*/
}

.ladbrokescoral input.inptDate {
  /*background-image: none;
  width: 12em;
  display: inline-block;*/
  background-image: none;
  width: 8em;
  height: 2.25em;
  font-size: 1.1em;
  text-align: center;
  display: inline-block;
  font-weight: normal;
}

.datepickerInline {
  display: inline-block;
  vertical-align: middle;
}
.datepickerInline span {
  display: inline-block;
  line-height: 2.5em;
  padding: 0 0.15em 0 0.5em;
}

.btnAddNew {
  width: 5em;
  display: inline-block;
  background-color: rgb(8, 170, 12);
  border-radius: 0.25em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 2.5em;
  vertical-align: middle;
  /*font-size: 0.825em;*/
  margin: 0 0.85em;
  line-height: 2.5em;
  text-align: center;
  color: #fff;
}

.uniForm, .shopForm {
  display: inline-block;
  margin: auto;
}

.formInpt {
  /*display: block;
  margin: 0.5em auto;
  clear: both;*/
  display: flex;
  margin: auto auto;
  clear: both;
  flex-direction: row;
  margin: 0.25em auto;
  width: 100%;
  align-content: center;
}

.formInpt span {
  display: inline-block;
  min-width: 8.5em;
  /*font-size: 0.85em;*/
}

.formInpt span.clrBoth {
  display: block;
  min-width: 8.5em;
  /*font-size: 0.85em;*/
  text-align: right;
}

.error {
  color: rgb(219, 60, 54);
  /* margin: 1em 0;
   font-size: 0.85em;*/
}

select.error {
  color: rgb(61, 67, 83);
}

.cms .error {
  color: white;
  z-index: 100;
  margin: 0; /**/
  /*font-size: .85em;*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgb(219, 60, 54);
  /*min-height: 4em;*/
  height: 0em;
  line-height: 4em;
  text-align: center;
  opacity: 0;
  -moz-animation-name: animFadeOut;
  -o-animation-name: animFadeOut;
  -webkit-animation-name: animFadeOut;
  animation-name: animFadeOut;
  -moz-animation-duration: 8s;
  -o-animation-duration: 8s;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.local > .errorfxd, .local > .successfxd, .local > .notyet {
  color: white;
  margin: 0; /**/
  /*font-size: .85em;*/
  position: relative;
  width: 100%;
  padding: 1.5em 0.5em;
  /*line-height: 4em;*/
  text-align: center;
  display: block;
  opacity: 1;
}

.notyet {
  background-color: rgb(148, 148, 148);
}

.successfxd {
  background-color: rgb(8, 170, 12);
}

.errorfxd {
  background-color: rgb(219, 60, 54);
}

.success {
  color: rgb(8, 170, 12);
  margin: 1em 0;
  /*font-size: 0.85em;*/
}

.cms .success {
  color: white;
  z-index: 200;
  margin: 0; /**/
  /*font-size: .85em;*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgb(8, 170, 12);
  /*min-height: 4em;*/
  height: 0em;
  line-height: 4em;
  text-align: center;
  opacity: 0;
  -moz-animation-name: animFadeOut;
  -o-animation-name: animFadeOut;
  -webkit-animation-name: animFadeOut;
  animation-name: animFadeOut;
  -moz-animation-duration: 8s;
  -o-animation-duration: 8s;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.formInpt em.error {
  font-size: 0.85em;
  text-align: left;
  color: rgb(219, 60, 54);
  min-height: 2.5em;
  display: block;
}

.coral input[type=text].ng-valid, .coral input[type=number].ng-valid, .ladbrokes input[type=text].ng-valid, .ladbrokes input[type=number].ng-valid {
  border-color: rgb(8, 170, 12);
  font-weight: normal;
}

input[type=text]::placeholder, textarea::placeholder, input[type=number]::placeholder {
  color: rgb(168, 169, 171);
  font-weight: normal;
}

.coral input[type=text].ng-invalid, .coral input[type=number].ng-invalid {
  /*border-color: $clrError;*/
  border: 2px solid rgb(219, 60, 54);
}

.coral input.ng-pristine {
  border: 2px solid rgb(56, 78, 174);
}

.ladbrokescoral input[type=text].ng-valid, input[type=number].ng-valid, textarea.ng-valid, select.ng-valid, .ladbrokes input.ng-valid.ng-dirty, input[type=text].ng-valid.ng-dirty {
  border: 2px solid rgb(8, 170, 12);
}

.ladbrokescoral input[type=text].ng-invalid, input[type=number].ng-invalid, textarea.ng-invalid, select.ng-invalid, .ladbrokes input.ng-invalid, input[type=text].ng-invalid {
  border: 2px solid rgb(219, 60, 54);
}

/*.formInpt*/
input[type=text].inptDisabled { /* this is the stock on the admin tool*/
  border: none;
  background-color: white;
  padding: 0;
  width: auto;
}

input[type=radio].ng-invalid:after {
  content: "";
  border-bottom: 1px solid rgb(219, 60, 54);
  position: absolute;
}

/*.ladbrokes input.ng-pristine {
  border: 2px solid $clrBlackGroup;
}*/
.badgeName {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 5;
}

.badgeImage {
  position: relative;
}

.badgeImage .image {
  position: absolute;
  top: 0;
  left: 0;
}

.opacity {
  opacity: 0.25;
}

.badgeImage .setHeight {
  margin-top: 35%;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
}

/*.formInpt*/
input[type=text], input[type=number], select, textarea {
  width: 20em;
  display: inline-block;
  border: 2px solid rgb(61, 67, 83);
  border-radius: 0.25em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*  height: 3em;
  vertical-align: middle;*/
  /*font-size: 0.825em;*/
  /*  font-size: 1em;
  font-size: 1em;*/
  height: 3em;
  margin: 0.1em;
  font-family: "Roboto", sans-serif;
  color: rgb(7, 13, 40);
  font-weight: normal;
}

/*.formInpt*/
input[type=number] {
  line-height: 3em;
  padding: 0 0 0 1em;
}

/*.formInpt*/
input[type=text].inptSmall {
  width: 5em;
}

/*.formInpt*/
option {
  height: 3em;
}

/*.formInpt*/
textarea {
  height: auto;
}

.inptNameBadge {
  display: inline-block;
  border: 2px solid;
  border-radius: 0.25em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 3em;
  vertical-align: middle;
  font-size: 0.825em;
  margin: 0.25em 0 1em 0;
}

/*.formInpt*/
select {
  /* margin-left: -4px;*/
}

/*.btnSearch {
    width: 3.5em;
    height: 2.475em;
    display: inline-block;
    border: 2px solid;
    border-left: 2px none;
    @include border-radius-right();
    vertical-align: middle;
}*/
.btnSearch svg {
  height: 1.25em;
  padding-top: 0.5em;
}

a.btnView {
  background-image: url("/svg/Eyeball.svg");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  margin: auto;
  background-color: rgb(8, 170, 12);
  vertical-align: middle;
  border-radius: 0.25em;
  height: 2.5em;
  width: 4.5em;
}

input, textarea {
  padding: 0 0.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

textarea {
  padding: 0.25em;
  min-height: 8em;
}

input[type=button] {
  border: 0;
  display: block;
  width: 100%;
  cursor: pointer;
  max-width: 15em;
}

input[type=submit] {
  border: 0;
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  max-width: 15em;
}

input[type=submit].btnPlaceOrder {
  border-radius: 0.25em;
  background-color: rgb(8, 170, 12);
  height: 2.5em;
  line-height: 2.5em;
  display: inline-block;
  color: white;
  text-align: center;
  width: 12em;
  margin: 0.35em;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
}

.fastTrackDisabled, input[type=submit].fastTrackDisabled {
  background-color: rgb(189, 189, 189);
  color: white;
  cursor: pointer;
}

.ladbrokes input[type=submit], .coral input[type=submit], .ladbrokes input[type=button], .coral input[type=button] {
  color: white;
  cursor: pointer;
}

/*ladbrokescoarlgroup buttons*/
input[type=submit].btnLgSubmit {
  width: 414px;
  height: 62px;
  display: block;
  border: 2px solid rgb(227, 6, 19);
  border-radius: 0.25em;
  vertical-align: middle;
  background: rgb(251, 245, 245);
  z-index: 100;
  font-size: 16px;
  line-height: 62px;
  vertical-align: middle;
  font-weight: bold;
  text-align: left;
  padding-left: 1em;
  font-size: 18px;
  color: rgb(61, 67, 83);
  background-image: url("/svg/Arrow.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center right;
  margin: 1em 0;
  cursor: pointer;
}

input[type=submit].btnLgSubmit:disabled {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.5;
}

.btnHelpDesk, .btnList {
  max-width: 20em;
  border-radius: 0.25em;
  height: 42px;
  display: block;
  /*border-top: 1px solid $clrGrey;
    border-bottom: 1px solid $clrGrey;*/
  vertical-align: middle;
  background: rgb(227, 6, 19);
  z-index: 100;
  font-size: 14px;
  line-height: 42px;
  vertical-align: middle;
  font-weight: normal;
  text-align: left;
  padding-left: 1em;
  font-size: 16px;
  color: white;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center right;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.btnList {
  width: 100%;
  background-image: url("/svg/ArrowWhite.svg");
  margin: 0em auto 0.1em auto;
  text-overflow: ellipsis;
  padding-right: 1.5em;
}

.btnHelpDesk {
  width: auto;
  padding: 0 0.5em;
  margin: 0em auto;
  display: inline-flex;
}

.btnHelpDesk::after {
  content: "";
  background-image: url(/svg/HelpDesk.svg);
  background-size: contain;
  background-position: center;
  width: 2em;
  margin-left: 0.5em;
  background-repeat: no-repeat;
  /* height: 100%; */
  display: flex;
}

.icnHelpDesk::after {
  content: "";
  background-image: url(/svg/HelpDesk.svg);
  background-size: contain;
  background-position: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.5em;
  background-repeat: no-repeat;
  /* height: 100%; */
  vertical-align: middle;
  display: inline-flex;
}

.icnFastTrack::before {
  content: "";
  background-image: url(/svg/ExpressShipping.svg);
  background-size: contain;
  background-position: center;
  width: 2em;
  height: 2em;
  background-repeat: no-repeat;
  /* height: 100%; */
  display: inline-flex;
  vertical-align: middle;
}

.latestShops {
  display: flex;
  flex-direction: column;
}

.blue {
  background: rgb(56, 78, 174);
  color: white;
  width: 200px;
  height: 42px;
  display: block;
  border-radius: 0.25em;
  vertical-align: middle;
  z-index: 100;
  margin: 1em auto;
  font-size: 16px;
  line-height: 42px;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  display: block;
}

.btnLg {
  max-width: 20em;
  width: 100%;
  letter-spacing: 0.1em;
  display: block;
  /*border: 2px solid $clrRedGroup;*/
  background-color: rgb(227, 6, 19);
  border-radius: 0.25em;
  vertical-align: middle;
  /*background: rgb(251,245,245);*/
  margin: 1em auto 0 auto;
  line-height: 3em;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  /*background-image: url('/svg/Arrow.svg');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center right;*/
  display: inline-block;
}

.btnLg svg {
  height: 100%;
  float: right;
  border-left: 2px solid rgb(227, 6, 19);
}

.btnLg svg .fill {
  fill: rgb(227, 6, 19);
}

.none {
  fill: none;
}

/* autocomplete*/
.inptSearchLg {
  max-width: 20em;
  width: 100%;
  display: inline-block;
  border: 2px solid rgb(61, 67, 83); /*  */
  border-radius: 0.25em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 3em;
  font-size: 1em;
  vertical-align: middle;
  background: rgb(251, 245, 245);
  padding-right: 3em;
  background-image: url("/svg/SearchAutoComplete.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center right;
  color: rgb(61, 67, 83);
}

.inptLg {
  max-width: 20em;
  width: 100%;
  display: inline-block;
  border: 2px solid rgb(227, 6, 19);
  border-radius: 0.25em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 4em;
  vertical-align: middle;
  background: rgb(251, 245, 245);
  font-size: 16px;
  color: rgb(61, 67, 83);
  margin: 1em 0;
}

.btnSearchLg {
  width: 78px;
  height: 4em;
  display: inline-block;
  border: 2px solid rgb(227, 6, 19);
  border-left: 2px none;
  border-bottom-right-radius: 0.25em;
  border-top-right-radius: 0.25em;
  vertical-align: middle;
  float: right;
  background: rgb(251, 245, 245);
  z-index: 100;
  font-size: 18px;
  color: rgb(61, 67, 83);
}

.btnSearchLg svg {
  height: 1.5em;
  padding-top: 1.1em;
}

.btnSearchLg svg .fill {
  fill: rgb(227, 6, 19);
}

.autocompleteWrap {
  display: inline-block;
  /*width: 414px;*/
}

.ngui-auto-complete-wrapper {
  display: inline-block;
  /*width: 20em;
  padding: 0 0 1em 0;*/
}

.ngui-auto-complete {
  /*width: 500px !important;*/
  width: 20em;
  position: absolute;
  z-index: 0;
  /*@include shadow();*/
  border-radius: 0.25em;
  /*left: 10px !important;
      top: 10px !important;*/
}

ngui-auto-complete .ngui-auto-complete > ul {
  border: 2px solid rgb(148, 148, 148);
  border-radius: 0.25em;
  background: rgb(251, 245, 245);
  width: 20em;
  text-align: left;
  overflow: hidden;
  display: block;
}

ngui-auto-complete .ngui-auto-complete > ul > li {
  color: rgb(63, 68, 84);
  height: 3em;
  line-height: 3em;
  border-top: 1px solid rgb(228, 229, 228);
  margin-top: -1px;
  padding: 0 0.25em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

ngui-auto-complete .ngui-auto-complete > ul li:hover {
  background-color: rgb(251, 245, 245);
  background: rgb(251, 245, 245);
  text-decoration: underline;
}

ngui-auto-complete .ngui-auto-complete > ul li.selected {
  background-color: rgb(251, 245, 245);
  background: rgb(251, 245, 245);
}

.admnFrm .ngui-auto-complete-wrapper {
  width: 20em;
  z-index: 10;
  padding: 0;
  margin: auto;
  display: inline-block;
}
.admnFrm .ngui-auto-complete {
  /*width: 500px !important;*/
  width: 20em;
  position: absolute;
  z-index: 0;
  /*left: 10px !important;
    top: 10px !important;*/
}
.admnFrm ngui-auto-complete .ngui-auto-complete > ul {
  border: none;
  background: rgb(228, 229, 228);
  width: auto;
  text-align: left;
  overflow: hidden;
  border: 1px solid rgb(148, 148, 148);
}
.admnFrm ngui-auto-complete .ngui-auto-complete > ul > li {
  color: Black;
  line-height: 3em;
  height: 3em;
  border-top: none;
  padding-left: 1em;
  white-space: nowrap;
}
.admnFrm ngui-auto-complete .ngui-auto-complete > ul li:hover {
  background-color: rgb(56, 78, 174);
  background: rgb(56, 78, 174);
  color: rgba(255, 255, 255, 0.75);
}
.admnFrm ngui-auto-complete .ngui-auto-complete > ul li.selected {
  background-color: rgb(228, 229, 228);
  background: rgb(228, 229, 228);
}

/*Categorys*/
.category {
  display: block;
  clear: both;
  text-align: center;
  border: 1px solid rgb(228, 229, 228);
  vertical-align: top;
  font-weight: bold;
  text-transform: uppercase;
}

.category div:nth-child(2n) {
  line-height: 3.75em;
}

.category span {
  line-height: 1.25em;
  display: inline-block;
  vertical-align: middle;
}

/* Product*/
.product, .badges {
  display: block;
  clear: both;
  padding: 0 0.5em 0.5em 0.5em;
  /*min-height: 340px;*/
  text-align: center;
  /*border: 1px solid $clrGrey;*/
  vertical-align: top;
  background-color: white;
  position: relative;
  min-width: 17em;
}

.image {
  border: 1px solid white;
  display: block;
  background-image: url(/svg/NoImage.svg);
  background-size: contain; /*auto 90%*/
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  margin: 0em auto;
  background-color: white;
}

.basket .image {
  border: none;
  background-color: unset;
}

.uploadPending {
  background-image: url(/svg/ImagePending.svg);
}

.product .image {
  margin: 1em auto;
}

.image .setHeight {
  margin-top: 85%;
  display: inline-block;
  vertical-align: middle;
}

.badges .image .setHeight {
  margin-top: 35%;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
}

a.title {
  line-height: 13px;
  min-height: 39px;
  /*text-transform: lowercase; */
}

.prdText {
  /*text-transform: lowercase;*/
  /*  display: block;*/
  position: relative;
  min-height: 7em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.prdTextShort {
  /*text-transform: lowercase;*/
  display: block;
  position: relative;
  height: 4.5em;
}

.prdTextTop {
  /* position: absolute;
   top: 0;*/
  min-height: 5em;
  width: 100%;
}

.prdTextBtm {
  /* position: absolute;
   bottom: 0;*/
  width: 100%;
}

/*.product{text-transform: lowercase;}*/
.title {
  /*margin-top: 0.5em;
  text-transform: lowercase;*/
  top: 0;
  display: block;
}

.description {
  display: block;
}

.titleNameBadge {
  line-height: 3.75em;
}

.prdBtm {
  height: 5em;
  margin: 0.438em 0;
  display: block;
  text-align: center;
}

.packCode {
  font-size: 0.8em;
  color: rgb(148, 148, 148);
  width: 100%;
  text-align: center;
}
.packCode > .notice {
  font-size: 1em;
  min-height: unset;
  line-height: unset;
}

.greyTxt {
  color: rgb(148, 148, 148);
  font-size: 0.85em;
}

.orangeTxt {
  color: rgb(250, 146, 34);
  /*  font-size: 0.85em;*/
}

.redTxt {
  color: rgb(227, 6, 19);
}

.code {
  color: rgb(148, 148, 148);
  display: inline-block;
  /*text-align: left;*/
  /*padding:0 0.25em;*/
}

.pack {
  color: rgba(7, 13, 40, 0.7);
  display: inline-block;
  /*text-align: right;*/
  padding: 0 0.25em;
}

.gross {
  /*font-size: 1.3em;*/
  font-weight: bold;
  /*line-height:3em;*/
}

.net {
  font-size: 0.85em;
  color: rgb(148, 148, 148);
  display: none;
}

.btnsBsktQty {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.btnsBasket {
  display: flex;
  clear: both;
  margin: 0.5em 0;
  height: 2em;
  justify-content: center;
}
.btnsBasket > div {
  display: flex;
  width: 50%;
  justify-content: center;
}
.btnsBasket > div input [type=button] {
  width: unset;
}
.btnsBasket > div:first-child {
  width: 50%;
}
.btnsBasket > div:first-child > * {
  width: 2rem;
}
.btnsBasket > div:last-child {
  width: 60%;
}

.budgetExempt {
  height: 2.5rem;
  font-size: 0.8em;
  color: rgb(148, 148, 148);
  width: 100%;
  text-transform: uppercase;
  text-align: center;
}

a.btnPlus, a.btnMinus {
  border-radius: 0.25em;
  width: 28%;
  display: inline-block;
  border: 2px solid;
  height: 2em;
}

a.btnPlus svg, a.btnMinus svg {
  height: 1em;
  padding-top: 0.35em;
  vertical-align: top;
}

a.btnPlusv2, a.btnMinusv2 {
  /* width: 33.333%; */
  display: inline-block;
  background-color: rgb(228, 229, 228);
  /*height: 1.8em;
  width: 1.8em;*/
  width: 1.35em;
  height: 1.35em;
  /*line-height: 1.8em;*/
  margin: 0 0.1em;
  box-sizing: border-box;
  border-radius: 0.15em;
  color: rgb(61, 67, 83);
  text-decoration: none;
  font-size: 1.5em;
  text-align: center;
  font-weight: bold;
}

.inptQty, .inptQtyResend {
  background-color: white;
  height: 1.6em !important;
  text-align: center;
  margin: 0 0.1em;
  border: 2px solid; /* */
  border-radius: 0.25em;
  font-size: 1.25em;
  vertical-align: top;
  padding: 0;
  max-width: 3em;
}

/*.formInpt*/
input[type=text].inptCouponQty {
  width: 4rem;
  height: 2rem;
}

/*.formInpt*/
input[type=text].inptCouponManager {
  width: 10rem;
  height: 2rem;
}

.couponNotice {
  background-color: rgb(203, 26, 33);
  display: inline;
  color: white;
  padding: 0.25em 0.5em;
}

.couponBigMatch {
  background-color: rgb(61, 67, 83);
  display: inline;
  color: white;
  padding: 0.25em 0.5em;
}

.inptQtyResend {
  width: 2em;
}

div.PendingWarning {
  background-color: rgb(250, 146, 34);
  border-radius: 0.25em;
  min-height: 2.5em;
  display: inline-block;
  width: 100%;
  padding: 0 1em;
  line-height: 1em;
  color: white;
  text-align: center;
}

.PendingWarning a {
  color: white;
  display: inline-block;
  vertical-align: middle;
}

div.warning {
  background-color: rgb(250, 146, 34);
  min-height: 2.5em;
  display: inline-block;
  width: calc(100% - 2em);
  position: absolute;
  top: calc(50% - 1.25em);
  left: 1em;
  line-height: 1em;
  color: white;
}

span.notice {
  color: rgb(203, 26, 33);
}

div.notice {
  color: white;
  background-color: rgb(168, 169, 171);
  position: absolute;
  font-size: 0.85em;
  min-height: 2.5em;
  text-transform: uppercase;
  background-color: none;
  min-height: 2.5em;
  display: inline-block;
  width: calc(100% - 2em);
  line-height: 2.5em;
  top: 1em;
  left: 1em;
}

.messageBox {
  background-color: rgb(247, 247, 247);
  padding: 0.5em;
  margin: 0.5em;
}

div.PendingWarning:after, div.warning:after, div.notice:after {
  content: "";
  margin-top: 2.5em;
  display: inline-block;
  vertical-align: middle;
}

div.warning > span, div.notice > span {
  display: inline-block;
  vertical-align: middle;
  width: 90%;
}

div.reason {
  position: absolute;
  /*height: 65%;*/
  display: block;
  width: calc(100% - 1em);
  text-align: center;
}
div.reason span.notice {
  vertical-align: middle;
  background-color: white;
  padding: 1em;
  width: calc(100% - 2em);
  color: rgb(61, 67, 83);
  font-size: 0.85em;
  min-height: 2.5em;
  text-transform: uppercase; /**/
  min-height: 2.5em;
  display: inline-block;
  box-shadow: 0px 0px 3px rgba(7, 13, 40, 0.3);
}

div.reason:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

a.notice {
  color: rgb(250, 146, 34);
  font-size: 0.85em;
  min-height: 2.5em;
  text-transform: uppercase;
  background-color: none;
  min-height: 2.5em;
  line-height: 2.5em;
  width: calc(100% - 2em);
  /*position: absolute;
  top: calc(50% - 1.25em);
  top: -16em;
  left: 1em;
      line-height: 2.5em;*/
}

.noticelt {
  color: rgb(148, 148, 148);
  line-height: 2em;
  font-size: 0.85em;
}
.noticelt > span {
  white-space: nowrap;
}

.basketItemNotices {
  color: rgb(148, 148, 148);
}
.basketItemNotices > span:first-of-type::before {
  content: "*";
}
.basketItemNotices > span::after {
  content: "*";
}

/*div.notice > span > a {
    color: $clrOrange;
}*/
/*div.notice > span > a.icnBasket {
    background-image: url('/svg/basketOrange.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: auto 85%;
    padding-right: 1.25em;
}*/
/*Pop ups*/
.popUpWrapper {
  display: none;
}

.popUpWrapper, .popUpWrapperProduct, .popUpWrapperHelpDesk, .popUpWrapperNg {
  -moz-transition: display linear 1s;
  -o-transition: display linear 1s;
  -webkit-transition: display linear 1s;
  transition: display linear 1s;
  background-color: rgba(7, 13, 40, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  text-align: center;
  overflow: auto;
}

.popUpWrapperHelpDesk, .popUpWrapperNg {
  display: flex;
  line-height: 1em;
}

.popUpWrapper:after, .popUpWrapperProduct:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.popUpProduct {
  text-align: left;
  padding: 20px;
  background-color: white;
  width: 768px;
  margin: auto;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.25em;
}

/*this is the uniform popup*/
.popUp {
  position: sticky;
  text-align: left;
  padding: 20px;
  background-color: white; /*width:608px;*/
  margin: auto;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.25em;
  min-width: 450px;
  color: rgb(61, 67, 83);
  /* p {
     max-width: 30em;
   }*/
}

/*this is the reports order popup*/
.popUpOrder {
  min-width: 850px;
}

.popUpNarrow {
  width: 450px;
}

.popUpWide {
  width: 850px;
}

.popUpOrder p {
  max-width: none;
}

.popUp h1 {
  margin: 0;
  padding: 0;
  text-align: center;
}

a.close {
  float: right;
  background-image: url("/svg/CloseBlk.svg");
  background-position: center right;
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.titleWarning {
  background-color: white;
  color: rgb(227, 6, 19);
  padding: 0.5em;
  display: inline-block;
  width: 100%;
}

.popUpProductBasketAdded > div > div {
  text-align: center;
  padding-bottom: 1.75em;
}

.popUpProductBasketAdded .setHeight {
  margin-top: 50%;
}

.titleWarning > div:after {
  content: "";
  vertical-align: middle;
  margin-top: 10%;
  display: inline-block;
  width: 1px;
}

.titleWarning > div > div {
  vertical-align: middle;
  width: 90%;
  display: inline-block;
  text-align: center;
}

.BasketAdded {
  margin-top: -1px;
  /*border-top: 1px solid $clrGrey;*/
  padding: 0.5em;
  background-color: white;
}

.BasketAdded .title {
  font-size: 0.85em;
}

.popUpProductBasketAdded {
  position: fixed;
  text-align: right;
  top: 4em;
  margin-left: calc(50% - 15em);
  max-width: 30em;
  width: 100%;
  padding: 0;
  z-index: 100;
  /*overflow: hidden;
  -moz-animation: animFadeOut 0s ease-in 5s forwards;
    -webkit-animation: animFadeOut 0s ease-in 5s forwards;
    -o-animation: animFadeOut 0s ease-in 5s forwards;
    animation: animFadeOut 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;*/
}
.popUpProductBasketAdded > div {
  -moz-box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  -webkit-box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
  transition: opacity 2s linear;
  border-radius: 0.25em;
  margin-bottom: 0.5em;
}
.popUpProductBasketAdded > div > div {
  text-align: center;
}

@keyframes animFadeOut {
  0%, 100% {
    opacity: 0;
    height: 0em;
  }
  9%, 99% {
    opacity: 0;
    height: 0em;
  }
  10%, 70% {
    opacity: 1;
    height: 4em;
  }
}
@-webkit-keyframes animFadeOut {
  0%, 100% {
    opacity: 0;
    height: 0em;
  }
  1%, 99% {
    opacity: 0;
    height: 0em;
  }
  10%, 70% {
    opacity: 1;
    height: 4em;
  }
}
/* Orders */
.order {
  display: block;
  line-height: 3.5em;
}

.order:nth-child(1) {
  text-transform: uppercase;
  background-color: none;
  font-weight: bold;
}

/*.order:nth-child(even) {
    background-color: $clrYellow;
}*/
/*.order:nth-child(odd) {
    background-color: white;
}*/
.order > div {
  display: inline-block;
  width: 16%;
  text-align: left;
  padding: 0 10px;
}

.order > div:last-child {
  text-align: right;
  float: right;
}

/*.order div:nth-child(1){padding-left:30px;}

.order div.orderdetails{display:none;width:100%;}

.order div.orderdetails:after{display:block; clear:both; }*/
/* animation */
.skeleton {
  background-color: white;
  /*border: 1px solid #e4e5e4;*/
}

.skeleton:after {
  content: "";
  margin-top: 100%;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
}

.anim {
  text-align: center;
  padding: 0px 0;
  margin: auto;
  position: relative;
  z-index: 100;
  display: block;
  width: 100%;
  height: 1.5em;
}

.anim div {
  width: 1.5em;
  height: 1em;
  line-height: 1em;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.anim div div {
  border-radius: 3em;
  -moz-animation-name: loading, background;
  -o-animation-name: loading, background;
  -webkit-animation-name: loading, background;
  animation-name: loading, background;
  -moz-animation-timing-function: cubic-bezier(0.3, 0.65, 0.87, 0.36);
  -o-animation-timing-function: cubic-bezier(0.3, 0.65, 0.87, 0.36);
  -webkit-animation-timing-function: cubic-bezier(0.3, 0.65, 0.87, 0.36);
  animation-timing-function: cubic-bezier(0.3, 0.65, 0.87, 0.36);
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.anim div:nth-child(1) div {
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.anim div:nth-child(2) div {
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.anim div:nth-child(3) div {
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

/*.anim div:nth-child(4) div{animation-delay:0.3s;}
.anim div:nth-child(5) div{animation-delay:0.4s;}*/
@-moz-keyframes loading {
  0% {
    width: 0px;
    height: 0px;
  }
  25% {
    width: 1em;
    height: 1em;
  }
  50% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 0px;
    height: 0px;
  }
}
@-webkit-keyframes loading {
  0% {
    width: 0px;
    height: 0px;
  }
  25% {
    width: 1em;
    height: 1em;
  }
  50% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 0px;
    height: 0px;
  }
}
@keyframes loading {
  0% {
    width: 0px;
    height: 0px;
  }
  25% {
    width: 1em;
    height: 1em;
  }
  50% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 0px;
    height: 0px;
  }
}
.spinner {
  width: 140px;
  height: 140px;
  margin: auto;
  -moz-animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
  -o-animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
  -webkit-animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
  animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
  /*@include border-radius(140px);*/
}

.spinnerwrapper {
  text-align: center;
}

@keyframes rotate {
  0% {
    -moz-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -ms-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -o-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -moz-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    -ms-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    -o-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    -moz-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    -o-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}
@keyframes background {
  0% {
    background-color: rgb(203, 26, 33);
  }
  25% {
    background-color: white;
  }
  50% {
    background-color: rgb(56, 78, 174);
  }
}
/*form input errors*/
select {
  /* width: calc(100% - 0.876em);*/
  background-color: white;
  /* height: 2em;*/
  /*margin: 0.25em 0.438em;
  margin: 0em 1em 0 0em;*/
  border: 2px solid rgb(228, 229, 228);
  /*font-size: 1em;*/
  vertical-align: top;
  border-radius: 0.25em;
  max-width: 100%;
}

select * { /* This, miraculously, styles the '<option class="red"></option>' elements. */
  /* background-color: $clrGrey;*/
}

select.error {
  /*border: 2px solid $clrError;
  margin: 0.25em 0.438em;
  font-size: 1em;*/
}

ul {
  /*list-style: none;*/
  margin: 0 auto;
  /* padding: 0;*/
  display: inline-flex;
  /*list-style-position: inside;*/
}

li {
  /*margin: 0 0 0 1em;
  padding: 0;*/
  display: list-item;
  text-align: left;
} /**/
ul.horizontal {
  width: 20em;
  display: inline-block; /**/
  vertical-align: middle;
}

ul.horizontal li {
  display: inline-block;
  min-width: 2em;
  height: 2em;
  margin: 0 0 0.25em 0;
}

ul.horizontal li label {
  /*display: block;
  height: 2em;
  line-height: 2em;
  width: 2em;
  text-align: center;*/
  cursor: pointer;
}

ul.horizontaltype li {
  display: inline-block;
  height: 2em;
  margin: 0 0 0.25em 0;
}

ul.horizontaltype label {
  display: inline-block;
  height: 2em;
  margin: 0 0 0.25em 0;
}

/*.chkBx {
  display: none;
}

.checker::before {
  content: '';
  background-image: url('/svg/TickBlk.svg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 1em;
  width: 1em;
  padding: 0.5em;
  color: $clrGrey;
  opacity: 0.1;
}

.chkBx:checked + .checker::before {
  content: '';
  color: $clrBlackGroup;
  opacity:1;
}

ul.horizontal li .checker::before {
  content: '';
  opacity: 0.1;
}

ul.horizontal li .chkBx:checked + .checker::before {
  content: '';
  opacity: 0.1;
}*/
/*table*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

table, tr, td, tbody, thead {
  padding: 0;
  margin: 0;
}

td.selected {
  font-weight: bold;
  color: rgb(8, 170, 12);
}

.step1 {
  padding: 0 1em 1em 1em;
  background-color: white;
  border-radius: 0.5em;
  display: table;
  margin: 1em auto;
}

.basket td, .quickBasket td {
  padding: 0 0.35em;
}

.admn td {
  /*background-color:$clrGrey;*/
}

.brkDbl > td {
  border-top: 4px double rgb(148, 148, 148);
}

.autoitmstitle {
  line-height: 3.5em;
  /*text-transform: uppercase;
  font-weight: bold;*/
  white-space: nowrap;
  color: white;
  background-color: rgb(168, 169, 171);
  /*border-top: 0.5em double $clrGreyLight;*/
}

a.underline {
  text-decoration: underline;
  transition: text-decoration ease-in 0.5s;
  font-weight: bold;
}

a.underline:hover {
  text-decoration: none;
}

.basket tbody, .quickBasket tbody, .basket tfoot, .quickBasket tfoot {
  background-color: white;
}

.quickBasket tbody {
  display: block;
}

.basket tbody tr {
  border-top: 1px solid rgb(228, 229, 228); /**/
}

.adminTbl > tbody > tr.odd > td {
  background-color: rgb(189, 189, 189);
}

a.badge:hover, a.badgered:hover, a.badgegrey:hover {
  text-decoration: underline;
  background-color: rgba(56, 78, 174, 0.5);
  color: white;
}

a.badge, a.badgered, a.badgegrey {
  border-radius: 1em;
  transition: background-color linear 0.3s;
}

.badge, .badgered, .badgegrey, .badgeorange {
  color: white;
  padding: 0.25em calc(0.75em - 1px) 0.25em 0.75em;
  margin: 0.25em 0.5em;
  font-weight: normal;
  /*  font-size: 0.9em;*/
}

.badge {
  background-color: rgb(148, 148, 148);
  letter-spacing: 1px;
}

.badgered {
  background-color: rgb(227, 6, 19);
  display: inline-block;
}

.badgegrey {
  background-color: rgb(228, 229, 228);
  color: rgb(148, 148, 148);
  display: inline-block;
}

.badgeorange {
  background-color: rgb(250, 146, 34);
  color: white;
  display: inline-block;
}

table {
  border-collapse: collapse;
}

.basket td, .orders td {
  /*max-width: 1em
  border-bottom: 1px solid $clrGreyTxt;*/
}

.brkDbl {
  border-top: 4px double rgb(228, 229, 228);
}

.brkDotted {
  border-top: 1px dashed rgb(228, 229, 228);
}

.brkSolid {
  border-top: 1px solid rgb(168, 169, 171);
}

.orders td.brdrNone {
  border-bottom: none;
}

.autoitms td {
  /*border-bottom: 1px solid white;*/
}

/*.basket tbody*/
tr.warningTr {
  border-top: none;
}

.basket tbody tr:first-child, .quickBasket tbody tr:first-child {
  /*border-top: none;*/
}

.basket, .quickBasket {
  background-color: white;
}

.quickBasket {
  border: 1px solid rgb(228, 229, 228);
  display: inline-block;
  margin: 0.625em 0.3125em;
  font-size: 0.85em;
}

.ladbrokes .quickBasket input {
  color: rgb(148, 148, 148);
}

.coral .quickBasket input {
  color: rgb(148, 148, 148);
}

.quickBasket .inptQty {
  width: 3em;
  vertical-align: middle;
  margin: 0;
}

td.lineheight {
  line-height: 3.5em; /**/
  white-space: nowrap;
}

td.algnCenter {
  text-align: center; /**/
}

td.algnLeft, .orders td.algnLeft {
  text-align: left; /**/
}

.even {
  background-color: rgb(228, 229, 228);
}

td.padding {
  padding: 0 0.43em;
}

thead {
  height: 3.5em;
  text-transform: uppercase;
  /*font-weight: bold;*/
  font-size: 0.8em;
  white-space: nowrap;
  background-color: white;
}

.quickBasket thead {
  line-height: 2.5em;
  text-transform: uppercase;
  font-weight: bold;
}

.basket {
  margin: 1em 0;
}

.basket .colImage {
  width: 10em;
}

.quickBasket .colImage {
  width: 5em;
}

.inline {
  display: inline-block !important;
  vertical-align: middle;
  width: unset !important;
}

.fiterReports {
  width: 100%;
}

.fiterReports h1 {
  display: inline-block;
}

.fiterReports input {
  float: right;
  vertical-align: middle;
}

.ladbrokescoral .fiterReports input.inptSearch {
  margin: 0 0.25em;
}

.quickBasket .colImage img {
  margin: 0.625em 0;
}

.colCode {
  font-size: 0.85em;
  color: rgb(148, 148, 148);
}

.colRemove {
  width: 2em;
}

.colAddress {
  width: 8em;
}

.colMoney {
  min-width: 8em;
  width: 4em;
  text-align: right;
}

.colStrike {
  text-decoration: line-through;
}

.colSelect {
  text-align: center;
  width: 2em;
}

.orders td.colQty, .basket td.colQty, .adminTbl td.colQty {
  text-align: center;
  width: 8em;
  white-space: nowrap;
}

hr {
  border: 2px solid rgb(228, 229, 228);
  margin: 1em;
}

.alRight, td.alRight, .basket td.alRight {
  text-align: right;
}

tfoot td {
  vertical-align: top;
  min-height: 3em;
}

tfoot tr:nth-child(1):after {
  content: "";
  margin-top: 3em;
  display: inline-block;
}

td:last-child {
  padding-right: 1em;
}

td.warning {
  background-color: rgb(250, 146, 34);
  color: white;
  text-align: center;
  padding: 0.25em;
  height: 2.5em;
}

.shoppingHeader {
  display: flex;
  justify-content: space-between;
}

.GentleNotice {
  line-height: 1em;
  margin: 1em 0;
  background-color: rgb(250, 146, 34);
  padding: 0.75em 0 !important;
  text-align: center;
  min-height: 2.5em;
  color: white;
  text-transform: none;
  font-weight: normal;
}
.GentleNotice a {
  color: white;
}

.GentleNotice.success {
  background-color: rgb(8, 170, 12);
}

.GentleNotice.error {
  background-color: rgb(227, 6, 19);
}

td.notice {
  color: white;
  text-align: center;
  background-color: rgb(228, 229, 228);
  padding: 0.25em;
  height: 2.5em;
}

tr.warningTr > td {
  background-color: rgb(227, 6, 19);
  min-height: 2.5em;
  /* display: inline-block; 
  width: 100%;*/
  padding: 0.5em 0;
  line-height: 1em;
  color: white;
  text-align: center;
  text-transform: initial;
  font-weight: normal;
  white-space: normal;
}

/* Order history */
/* Address list */
/*.orders > tbody > tr:nth-child(4n+1) > td {
    background-color: $clrYellow;
}*/
.fxdWdth {
  width: 12em;
}

/*.orders > tbody > tr > td {
  border-bottom: 1px solid $clrGrey;
 vertical-align: middle;
}*/
.orders td, .basket td {
  text-align: center;
  /*border:1px solid hotpink;*/
}

/*  .ordBtnWraper {
    width: calc(100% - 2.75em);
    display: inline-block;
    vertical-align: middle;
  }*/
.break {
  /*white-space: pre-wrap;*/
  clear: both;
  display: block;
}

.breakInline {
  /*white-space: pre-wrap;*/
  clear: both;
  display: inline-block;
}

/*.odd {
    background-color: $clrYellow;
}*/
.orderHeader {
  padding: 1em;
  vertical-align: top;
}

/**ADMIN*/
.lbl {
  width: 7.5em;
  display: inline-block;
}

/*.adminTbl  > tbody > tr > td{border-bottom:1px solid $clrGrey; padding:0 1em; white-space:nowrap;}*/
.altern8 > tbody > tr:nth-child(even) > td {
  /*  border-bottom: 1px solid $clrGrey;
    background-color:$clrGrey;*/
}

.altern8 > tbody > tr > td {
  background-color: white;
  padding: 0 0.25em;
}

.trRowBreak > td {
  border-bottom: 2px solid rgb(148, 148, 148);
}

.adminTbl > tbody > tr {
  border-bottom: 1px solid rgb(228, 229, 228);
}

.adminTbl > tbody > tr > td {
  padding: 0 0.25em;
  background-color: white;
}

.adminTbl > thead > tr > td {
  padding: 0 1em;
  position: sticky;
  z-index: 1;
  top: 0;
  /* background-color: rgb(247,247,247);*/
  background-color: rgb(228, 229, 228);
}

.popUp > .adminTbl > thead > tr > td { /*sticjky override for the piop up table*/
  position: relative;
}

.adminTbl > tbody > tr > td.colImage {
  width: 3em;
}

.adminTbl {
  border-bottom: 0.25em solid rgb(247, 247, 247);
}

.my-monthpicker {
  display: inline-block;
  float: left;
}

a.status {
  border-radius: 2em;
  height: 1.85em;
  width: 1.85em;
  display: inline-block;
  color: white;
  line-height: 1.85em;
}

a.pause:after, a.pause:before {
  content: "";
  width: 0.25em;
  height: calc(100% - 1em);
  margin: 0.5em 0.1em;
  /* line-height: 2em; */
  background-color: white;
  display: inline-block;
  vertical-align: middle;
}

span.status {
  height: 1.85em;
  width: 1.85em;
  display: inline-block;
  vertical-align: middle;
}

a.green, span.green {
  background-color: rgb(8, 170, 12);
}

a.orange, span.orange {
  background-color: rgb(250, 146, 34);
}

a.red, span.red {
  background-color: rgb(203, 26, 33);
}

td.red {
  color: rgb(228, 229, 228);
}

/*.formInpt*/
.pagination span {
  min-width: unset;
}

.pagination {
  /* float: right; */
  margin: auto;
  display: block;
  text-align: center;
  /*font-size:0.85em;*/
}
.pagination .ngx-pagination li, .pagination .ngx-pagination li a {
  border-radius: 0.25em;
  line-height: 1.5em;
}
.pagination .ngx-pagination {
  padding: 0;
}
.pagination .ngx-pagination .current {
  background-color: rgb(56, 78, 174);
}
.pagination .ngx-pagination a:hover, .pagination .ngx-pagination button:hover {
  background-color: rgb(228, 229, 228);
}
.pagination .ngx-pagination .pagination-previous a::before, .pagination .ngx-pagination .pagination-previous.disabled::before {
  content: " ";
  margin: 0;
}
.pagination .ngx-pagination .pagination-next a::after, .pagination .ngx-pagination .pagination-next.disabled::after {
  content: " ";
  margin: 0;
}

.mvcForm {
  max-width: 20em;
  margin: auto;
}
.mvcForm a {
  text-decoration: underline;
}
.mvcForm input {
  max-width: 20em;
  width: 100%;
  display: inline-block;
  border: 2px solid rgb(227, 6, 19);
  border-radius: 0.25em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 4em;
  /*vertical-align: middle;*/
  background: rgb(251, 245, 245);
  color: rgb(61, 67, 83);
  margin: 1em 0;
  font-weight: normal;
}
.mvcForm .btnLg {
  max-width: 20em;
  width: 100%;
  display: block;
  letter-spacing: 0.1em;
  border-radius: 0.25em;
  vertical-align: middle;
  background-color: rgb(227, 6, 19);
  z-index: 1;
  margin: 1em auto;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
  color: white;
  border: none;
  /*background-image: url('/svg/Arrow.svg');*/
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center right;
  display: inline-block;
}

.lst {
  border-top: 1px solid #e4e5e4;
  line-height: 3em;
}

.lstLeft {
  width: 19.1em;
}

.chartBar {
  display: inline-block;
  background-color: rgba(56, 78, 174, 0.5);
  height: 2em;
}

.concertinaLnk {
  display: block;
  background-color: rgb(228, 229, 228);
  padding: 0.85em;
  margin: 1px;
  cursor: pointer;
}

.concertinaLnk:hover, .concertinaLnk:active {
  font-weight: bold;
  text-decoration: none; /**/
}

.concertinaLnk:hover + .concertinaNote, .concertinaLnk:active + .concertinaNote {
  display: block;
}

/*a:hover + h1 {
  background-color: #444;
}*/
.concertinaNote {
  display: none;
  padding: 0.85em 0.85em 2.85em 0.85em;
  max-width: 1024px;
}

.concertinaNote:hover {
  display: block;
  cursor: pointer;
}

/*.show{display:block;}*/
/*file upload
.box {
  font-size: 1.25rem;
  background-color: #c8dadf;
  position: relative;
  padding: 100px 20px;
}
.box.has-advanced-upload {
  background-color: white;
  outline: 2px dashed black;
  outline-offset: -10px;
}

.box.has-advanced-upload .box__dragndrop {
  display: inline;
}*/
input[type=file] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

input[type=file] + label {
  font-size: 1em;
  /*color: black;*/
  background-color: rgb(228, 229, 228);
  display: inline-block;
  line-height: 2.5em;
  text-align: center !important;
  width: 100%;
  border-radius: 0.25em;
  margin: 0.25em 0;
  font-weight: bold;
  max-width: 16em;
}

input[type=file]:focus + label, input[type=file] + label:hover {
  background-color: rgb(56, 78, 174);
  color: white;
}

input[type=text]:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 10px rgb(148, 148, 148);
}

.chkBx {
  display: none;
}

.checker {
  background-color: rgb(228, 229, 228);
  border-radius: 0.25em;
  height: 2em;
  display: inline-flex;
  padding: 0.25em 1em 0.25em 0em;
  align-items: center;
  margin: 0.125em;
}

.checker::before, .btnCheckedFastTrack::before, .btnCheckedFastTrackOn::before {
  content: "";
  border-radius: 3em;
  background-image: url("/svg/TickBlk.svg");
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center center;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  /*  background-color:white;*/
  vertical-align: middle;
  opacity: 1;
  cursor: pointer;
  margin: 0 0.25em;
  font-size: 1em;
}

.chkBx:checked + .checker::before, .btnCheckedOn::before {
  content: "";
  background-image: url("/svg/TickBlk.svg?v=3");
  opacity: 1;
  /*background-color: white;*/
}

/**/
.btnCheckedFastTrackOn, .btnCheckedFastTrack, .btnCheckedOn, .btnChecked {
  font-weight: normal;
  width: 18em;
}

.btnCheckedFastTrackOn, .btnCheckedFastTrack {
  padding-left: 0;
}

.chkBx:checked + .checker, .btnCheckedFastTrackOn, .btnCheckedOn {
  background-color: rgb(8, 170, 12);
  color: rgb(255, 255, 255);
}

.icnFastTrack::before, .btnCheckedFastTrack::before {
  content: "";
  font-size: 1.5em; /**/
  background-image: url("/svg/ExpressShipping.svg?v=3");
}

.chkBx:checked + .icnFastTrack::before, .btnCheckedFastTrackOn:before {
  content: "";
  font-size: 1.5em; /* */
  background-image: url("/svg/ExpressShippingYes.svg?v=3");
}

.FastTrackOptions {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}

/*  .chkBx + .icnFastTrack::before {
    content: '';
    font-size: 1.5em;
    background-image: url('/svg/ExpressShipping.svg');
    opacity: 1;
    color: $clrGrey;
  }


  .chkBx:checked + .icnFastTrack::before {
    content: '';
    font-size: 1.5em;
    background-image: url('/svg/ExpressShippingYes.svg');
    opacity: 1;
    color: $clrGrey;
  }*/
/*.checker::before, .btnMinusv2, .btnPlusv2{
    transition:all ease-in-out 0.3s;
}

.checker:hover::before, .btnMinusv2:hover, .btnPlusv2:hover {
  box-shadow: 0em 0.05em 0.1em $clrGreyDk;
}*/
#filedrag {
  display: block;
  font-weight: bold;
  text-align: center;
  padding: 2em 0;
  margin: 1em 0;
  border: 2px dashed rgb(228, 229, 228);
  border-radius: 0.25em;
  cursor: default;
  background-size: Cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("/svg/Target.svg");
}

#filedrag.hover {
  border-color: rgb(56, 78, 174);
}

.slidecontainer {
  width: 20em;
  display: inline-block;
}

.slider {
  -webkit-appearance: none;
  width: 18em;
  height: 2em;
  background: rgb(228, 229, 228);
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  vertical-align: middle;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2em;
  height: 2em;
  background: rgb(56, 78, 174);
  cursor: pointer;
  border-radius: 0.25em;
}

.slider::-moz-range-thumb {
  width: 2em;
  height: 2em;
  background: rgb(228, 229, 228);
  cursor: pointer;
}

ul.breadcrumb li {
  list-style: none;
  display: inline-block;
}

ul.breadcrumb ul li:before {
  content: "";
  display: inline-block;
  position: relative;
  width: 0.5em;
  height: 0.5em;
  margin: auto 0.5em;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border: solid;
  border-width: 1px 1px 0 0;
  border-color: rgb(56, 78, 174);
}

ul.breadcrumb ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

ul.breadcrumb {
  display: inline-block;
  margin: 0 0 0 1em;
}

ul.breadcrumb li > a {
  color: rgb(56, 78, 174);
}

.bannerAdmin {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: rgba(7, 13, 40, 0.7);
}
.bannerAdmin > .user {
  margin-left: auto;
}
.bannerAdmin a {
  color: rgba(7, 13, 40, 0.7);
  text-decoration: underline;
  font-weight: bold;
}

.fiterReports {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0;
  /*background-color: $clrLtGrey;*/
  min-height: 3.5em;
  /*input.inptSearch {
      margin: 0;
      border: 1px solid $clrBlue;
      background-color: $clrWhite;
  }*/
}
.fiterReports > div {
  flex-direction: row;
}

/*.fiterReports h1 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1em 0.25em;
    line-height: normal;
     > div {
        flex-direction: row;
    }
}

.fiterReports input {
    float: right;
    vertical-align: middle;
}*/
.mkup {
  font-weight: bold;
  font-size: 2em;
}

.dataheader {
  display: flex;
  justify-content: space-between;
  padding: 1em 1em 0 1em;
  line-height: 3.5em;
  /*background-color: $clrWhite;*/
  overflow: auto;
  /*> div:before {
      content: '';
      margin-top: 100%;
      vertical-align: middle;
  }*/
  /*:last-child {
      text-align: right;
  }*/
}
.dataheader h1 {
  line-height: unset;
  margin: 0;
}
.dataheader > div {
  flex-direction: row;
}

.allocation {
  border-top: 1px solid rgb(228, 229, 228);
  /*color: $clrRedGroup;*/
  line-height: 2em;
  font-size: 1.25em;
}

.allowance {
  color: rgb(148, 148, 148);
}

/*.allocation {
  font-size: 2em;
  background-color: rgb(242,245,250);
  color: $clrGreyTxt;
  width: 2em;
  height: 2em;
  line-height: 2em;
  margin: 0;
  display: inline-block;
  @include border-radius-exact(2em);
  display: inline-block;
  vertical-align: middle;
  text-align: center
}

.allocation:before {
  content: 'X ';
  font-size: 0.5em;
  font-family: arial;
  position: relative;
  margin: 0 -0.5em 0 -0.75em;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  line-height: 2em;
  display: inline-block;
}*/
.popUpError {
  position: fixed;
  text-align: right;
  top: 5em;
  margin-left: calc(50% - 15em);
  max-width: 30em;
  width: 100%;
  background-color: white;
  -moz-box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  -webkit-box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
  transition: opacity 2s linear;
  border-radius: 0.25em;
  padding: 0;
  overflow: hidden;
}

.popUpError > div {
  text-align: center;
  background-color: rgb(227, 6, 19);
  padding: 1em;
  display: inline-block;
  width: 100%;
  color: white;
}
.popUpError > div a.close {
  background-image: url(/svg/CloseWht.svg);
}

.popUpError > div:after {
  content: "";
  vertical-align: top;
  margin-top: 10%;
  display: inline-block;
  width: 1px;
}

.popUpError > div > div {
  vertical-align: middle;
  width: 85%;
  display: inline-block;
}

a.regularItm {
  background-color: rgb(148, 148, 148);
  color: white;
  background-color: none;
  min-height: 3em;
  height: 3em;
  text-align: center;
  padding: 0 0.25em;
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 1.25em;
  text-decoration: none;
  transition: all ease-in 0.3s;
}

a.regularItm:hover {
  text-decoration: none;
  background-color: rgb(56, 78, 174);
}

/*  .regularItm:before {
  content: '';
  height: 100%;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
  border: 0px solid green;
}*/
.regularItm > div {
  vertical-align: middle;
  display: inline-block;
  width: calc(100% - 10px);
}

.skeleton {
  background: radial-gradient(circle, rgb(255, 255, 255), rgba(255, 255, 255, 0.25));
  /*border: 1px solid #e4e5e4;*/
}

.skeleton:after {
  content: "";
  margin-top: 100%;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
}

.column {
  flex-direction: column;
}

.flexContainer {
  display: flex;
  justify-content: center;
}
.flexContainer > div:first-child, .flexContainer > div:last-child > div {
  background-color: white;
  border-radius: 0.5em;
  padding: 1em;
  margin: 0.5em;
}

.nmbrOff, .nmbrOn {
  border-radius: 3em;
  min-width: 0em;
  width: 2em;
  height: 2em;
  background-color: rgb(228, 229, 228);
  text-align: center;
  line-height: 2em;
  color: white;
  font-weight: bold;
  font-size: 0.75em;
  display: inline-block;
  font-style: normal;
}

.nmbrOn {
  background-color: rgb(8, 170, 12);
}

.dspNone {
  visibility: hidden;
}

.myForm {
  gap: 0.5em;
  justify-content: center;
}
.myForm .flxRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* affects tabel in cs orders add  margin: 0.5em 0;
    margin: 0.5em 0;*/
}
.myForm .flxRow label {
  min-width: 8.5em;
  text-align: left;
}

.flxCol {
  display: flex;
  flex-direction: column;
}

.flxRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flxRowArnd {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flxRowBtwn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bsktDesc b {
  color: white;
  padding: 0.25em;
  margin-left: 0.25 em;
  font-size: 0.9em;
  background-color: rgb(203, 26, 33);
}

.buyingTips {
  line-height: 1em;
  color: rgb(61, 67, 83);
  margin: 0.5em 0;
  /* margin: 1em 0; */
  background-color: #fff;
  text-align: center;
  min-height: 2.5em;
  text-transform: none;
  font-weight: normal;
  /*background-image: linear-gradient(170deg,rgb(56 78 174 / 5%),rgb(37 48 56 / 5%),rgb(37 48 56 / 5%)),repeating-linear-gradient(127deg,rgb(37 48 56 / 5%) 0,rgb(37 48 56 / 0%) 1em,rgb(70 88 101 / 15%) 1em,rgb(70 88 101 / 15%) 2em);*/
  border: 2px dashed rgb(227, 6, 19);
  color: rgb(227, 6, 19);
}

.form-group {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  margin: 1em auto;
  padding: 0 1em;
}
.form-group label {
  line-height: 1.5em;
}

#popUpWrapperBadges > div {
  max-width: 22em;
}

#popUpWrapperBadges .btnAction, #popUpWrapperBadges .btnGreen, #popUpWrapperBadges .btnRed, #popUpWrapperBadges .btnOrange, #popUpWrapper .btnAction, #popUpWrapper .btnGreen, #popUpWrapper .btnRed, #popUpWrapper .btnOrange {
  max-width: 15em;
}

.badgeImage {
  object-fit: contain;
  width: 90%;
  border: 4px solid rgb(228, 229, 228);
  border-radius: 1.5em;
  margin: 1em 0 0 0;
}

.column {
  display: flex;
  flex-direction: column;
}

form.row {
  display: flex;
  flex-direction: row;
}

.w40 {
  width: 40%;
}

.filterNav {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  align-items: center;
}
.filterNav a {
  border: 2px solid;
}

.totals {
  width: 15em;
  margin: auto;
}
.totals > div {
  padding: 0.5em;
}
.totals div:last-child {
  border-top: 1px solid #6b6c6f;
  border-bottom: 1px solid #6b6c6f;
  font-weight: bold;
}

.smallTable {
  display: inline-block;
}
.smallTable td {
  padding: 0.5em;
  border: 3px solid rgb(228, 229, 228);
}

.uploadTable tr td {
  border-top: 2px solid rgb(168, 169, 171);
  padding: 1em 0.25em;
  text-align: left;
}

.uploadImagePreview {
  height: 15em;
  width: 20em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(168, 169, 171);
}

.badges {
  display: flex;
  flex-direction: column;
  justify-items: center;
}
.badges > * {
  margin: 0;
}
.badges > * label {
  font-weight: bold;
}

.activityTipGroup {
  position: relative;
}

.activityLogBtn {
  position: relative;
}

.activityLog, .activityLogInline {
  color: rgb(61, 67, 83);
  background-color: rgb(228, 229, 228);
  font-size: 1rem;
  border-radius: 0.25em;
  -moz-box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  -webkit-box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  box-shadow: 0 0.1em 0.25em 0.1em rgba(7, 13, 40, 0.3);
  padding: 0.75em;
  text-align: left;
}
.activityLog > div:not(:last-child), .activityLogInline > div:not(:last-child) {
  border-bottom: 1px solid white;
  margin-bottom: 0.25em;
  padding-bottom: 0.25em;
}

.activityLog {
  position: absolute;
  bottom: 1.5em;
  left: calc(50% - 12rem);
  z-index: 10;
  width: 24em;
}

.msg {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10000;
}
.msg > div {
  margin: 0;
}
.msg > div.error {
  background-color: rgb(203, 26, 33);
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.5em;
  height: 4em;
  display: flex;
  align-items: center;
  gap: 1em;
}
.msg > div.success {
  background-color: rgb(8, 170, 12);
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.5em;
  height: 4em;
  display: flex;
  align-items: center;
  gap: 1em;
}
.msg > div.warning {
  background-color: rgb(250, 146, 34);
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.5em;
  height: 4em;
  display: flex;
  align-items: center;
  gap: 1em;
}

.imageCol {
  width: 24em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formInpt {
  display: flex;
  flex-direction: column;
  clear: both;
}

.imageSteps {
  /*min-height: $imgUploadSize;*/
  width: 24em;
}

.stepBtns {
  gap: 1em;
  align-items: center;
  display: flex;
}
.stepBtns a {
  justify-content: space-around;
  width: 2em;
  height: 2em;
  display: flex;
  /* align-content: center; */
  align-items: center;
  border-radius: 3em;
  background-color: rgb(168, 169, 171);
}
.stepBtns a.stepOn {
  background-color: rgb(8, 170, 12);
  color: white;
}

.step {
  text-decoration: none;
}

.progressArea {
  /* padding: 0.5em;*/
  align-items: center;
  justify-content: left;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 24em;
}
.progressArea .progressBarWrapper {
  display: block;
  width: 100%;
  height: 1em;
  /*  background-color: $clrGrey1;*/
  position: relative;
  overflow: hidden;
  text-align: left;
  /* background-image: repeating-linear-gradient(-45deg,$clrGrey1 0, $clrGrey1 1em, $clrGrey3 1em, $clrGrey3 2em);*/
}
.progressArea .progressBarWrapper .progressBar {
  background-color: rgb(250, 146, 34);
  height: 2em;
  width: 0%;
  display: inline-block;
  position: relative;
}

#filedrag {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: default;
  width: 100%;
  font-weight: 300;
  color: rgb(255, 255, 255);
  margin: auto;
  transition: background-color linear 0.3s;
}

#filedrag:after {
  content: "Drop files or click here";
  text-align: center;
  background-color: rgb(56, 78, 174);
  line-height: 1em;
  display: inline-block;
  border-radius: 0.25em;
  padding: 0.5em;
} /**/
.imgPreviewWrap {
  flex-direction: column;
  flex-wrap: wrap;
}

.imgPreview, .imgUploaded {
  position: relative;
  display: inline-block;
  object-fit: contain;
}

.imgPreview {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  font-weight: 300;
  color: rgb(255, 255, 255);
  width: 24em;
  height: 24em;
  background-image: radial-gradient(circle, white 20%, rgb(250, 146, 34) 20%, rgb(250, 146, 34) 40%, white 40%, white 60%, rgb(250, 146, 34) 60%, rgb(250, 146, 34) 100%, white 100%);
  transition: background-color linear 0.3s;
}

.imgPreview > img {
  object-fit: contain;
  /*    width: 10em;
    height: 10em;*/
  width: 100%;
  height: 100%;
  opacity: 0.75;
}

.imgUploaded > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.imgPreview > div {
  z-index: 100;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.imageCol {
  width: 24em;
}

.btnImage {
  cursor: pointer;
  border: 2px solid rgb(168, 169, 171);
  border-radius: 0.25em;
}

.posWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.posWrapper > div.pos {
  width: 30em;
  background-color: rgb(255, 255, 255);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  /*  align-items: center;
  justify-content: space-between;*/
  padding: 0.5em;
}
.posWrapper > div.pos > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5em;
}
.posWrapper > div.pos > div h2 {
  margin-top: 0;
}
.posWrapper > div.pos > div .posBtns {
  display: flex;
  height: 3em;
  align-items: center;
}
.posWrapper > div.pos > div .posBtns input [type=button] {
  width: unset;
}
.posWrapper > div.pos > div .posBtns .inptQty {
  width: 3rem;
}
.posWrapper > div.pos > div .posBtns > * {
  width: 2rem;
}
.posWrapper > div.pos .active {
  background-color: rgb(8, 170, 12);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.posWrapper > div.pos .disabled {
  background-color: rgb(228, 229, 228);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tblContainer {
  overflow-x: auto;
  max-width: 100%;
}

.tblFixed {
  border-collapse: collapse;
  /*min-width: 800px;  Optional: widen to ensure scroll */
  width: auto;
}

.tblFixed th,
.tblFixed td {
  padding: 8px;
  border-left: 1px solid rgb(228, 229, 228);
  background-color: white;
  white-space: nowrap;
}

.colSticky {
  position: sticky;
  left: 0;
  background-color: #f7f7f7;
  z-index: 2;
}

/* Second sticky column (if needed) */
.colSticky:nth-child(2) {
  /*left: 100px;  Adjust based on column width */
  z-index: 3;
}

.asInput:focus {
  outline: none; /* Optional: removes default browser outline */
  border: 3px solid rgb(56, 78, 174); /* Adds a custom border */
  background-color: rgb(247, 247, 247); /* Optional: subtle background change */
  overflow: visible;
}

.orangeCell {
  background-color: rgb(250, 146, 34) !important;
}

.greyCell {
  background-color: rgb(228, 229, 228) !important;
}

.greyCell:after {
  content: "";
  border-top: 1px solid rgb(255, 255, 255);
  width: 100%;
  transform: rotate(45deg);
  display: flex;
}

.greyCell:before {
  content: "";
  border-top: 1px solid rgb(255, 255, 255);
  width: 100%;
  transform: rotate(-45deg);
  display: flex;
}

.wtnNotes {
  background-color: white;
  display: inline-flex;
  padding: 1em;
  border: 3px solid rgb(61, 67, 83);
  margin: 0;
  min-width: 29em;
  flex-direction: column;
}

.hlpDesk {
  display: flex;
  flex-direction: row;
  gap: 3em;
  margin: auto;
  max-width: 1024px;
}
.hlpDesk .hlpDeskTags {
  text-align: center;
  font-weight: bold;
  padding: 0.5em 1em;
  background-color: #C3B1FD;
  color: #070d28;
}
.hlpDesk .hlpDeskBrk {
  border-top: 5px solid rgb(228, 229, 228);
  margin: 1em 0;
}
.hlpDesk h2 {
  font-weight: bold;
  margin: 0.5em;
}
.hlpDesk p {
  margin: 1em;
}
.hlpDesk .hlpDeskNav {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin-top: 7em;
}
.hlpDesk .hlpDeskNav .btn {
  background-color: #070d28;
  width: 16em;
  color: #FFFFFF;
  text-align: left;
  padding: 0 1em;
  border-radius: 0.5em;
}
.hlpDesk .hlpDeskNav .hlpDskBtnC {
  background-color: rgb(56, 78, 174);
}
.hlpDesk .hlpDeskNav .hlpDskBtnNewCaseC {
  background-color: white;
  color: rgb(56, 78, 174);
  border: 3px solid rgb(56, 78, 174);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hlpDesk .hlpDeskNav .hlpDskBtnL {
  background-color: rgb(203, 26, 33);
}
.hlpDesk .hlpDeskNav .hlpDskBtnNewCaseL {
  background-color: white;
  color: rgb(203, 26, 33);
  border: 3px solid rgb(203, 26, 33);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hlpDesk .hlpDeskNav .hlpDeskKey {
  display: flex;
  flex-direction: column;
  /*.key {
            display: flex;
            flex-direction: row;
            gap: 0.1em;*/
  /*}*/
  /* .keyDescription.P1 {
            background-color: $hlpDskP1
        }

        .keyDescription.P2 {
            background-color: $hlpDskP2
        }

        .keyDescription.P3 {
            background-color: $hlpDskP3
        }*/
}
.hlpDesk .hlpDeskNav .hlpDeskKey .key {
  color: #FFFFFF;
  width: 3em;
  text-align: center;
  padding: 0em;
  height: 2em;
  line-height: 2em;
}
.hlpDesk .hlpDeskNav .hlpDeskKey .key.Allocated {
  background-color: #FFFFFF;
  color: #070d28;
  width: 6em;
}
.hlpDesk .hlpDeskNav .hlpDeskKey .key.P1 {
  background-color: #3C00FF;
}
.hlpDesk .hlpDeskNav .hlpDeskKey .key.P2 {
  background-color: #8C6AFF;
}
.hlpDesk .hlpDeskNav .hlpDeskKey .key.P3 {
  background-color: #C3B1FD;
}
.hlpDesk .hlpDeskNav .hlpDeskKey .keyDescription {
  background-color: rgb(228, 229, 228);
  max-width: 16em;
  padding: 0.5em;
  margin: 0.25em 0;
}
.hlpDesk .hlpDeskNav .hlpDeskKey .keyDescription p {
  margin: 0.5em;
}
.hlpDesk .hlpDeskTickets {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  max-width: 45em;
}
.hlpDesk .hlpDeskTickets .hlpDeskHeader {
  margin: 0 1em;
}
.hlpDesk .hlpDeskTickets .hlpDeskHeader p {
  margin-left: 0;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases {
  display: flex;
  flex-direction: column;
  max-width: 60em;
  gap: 0.5em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .lnkExpand {
  font-weight: bold;
  text-decoration: underline;
  text-align: right;
  cursor: pointer;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase {
  border: 8px solid rgb(228, 229, 228);
  border-radius: 1.75em;
  background-color: #FFFFFF;
  padding: 1em 1.5em;
  display: flex;
  gap: 1em;
  flex-direction: column;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .btn {
  background-color: #C3B1FD;
  width: 16em;
  color: #FFFFFF;
  text-align: center;
  padding: 0 1em;
  border-radius: 0.25em;
  margin: auto;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskCaseDetails {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskCaseDetails label {
  font-size: 0.8em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskCaseDetails > div {
  display: flex;
  flex-direction: column;
  line-height: 1.5em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskCaseDetails .priority {
  color: #070d28;
  width: 3em;
  text-align: center;
  padding: 0em;
  height: 2em;
  line-height: 2em;
  background-color: rgb(228, 229, 228);
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskCaseDetails .priority.P1 {
  background-color: #3C00FF;
  color: #FFFFFF;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskCaseDetails .priority.P2 {
  background-color: #8C6AFF;
  color: #FFFFFF;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskCaseDetails .priority.P3 {
  background-color: #C3B1FD;
  color: #FFFFFF;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskNotes {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskNotes label {
  border-bottom: 2px dotted #b9c5fb;
  display: block;
  padding: 0 0 0.25em 0;
  margin: 0 0 0.25em 0;
  min-height: 0em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskEnquiry {
  background-color: rgb(228, 229, 228);
  border-radius: 1em;
  padding: 1.25em 1em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskResponse {
  background-color: rgb(228, 229, 228);
  border-radius: 1em;
  padding: 1.25em 1em;
  position: relative;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskCaseUpdate {
  background-color: #ebf1ff;
  border-radius: 1em;
  padding: 1.25em 1em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .trnctd {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskResponse.closed {
  margin-left: 5em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskEnquiry.closed {
  margin-right: 5em;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskResponse.P1 {
  background-color: #3C00FF;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskResponse.P2 {
  background-color: #8C6AFF;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase .hlpDskResponse.P3 {
  background-color: #C3B1FD;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase.P1 {
  border-color: #3C00FF;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase.P2 {
  border-color: #8C6AFF;
}
.hlpDesk .hlpDeskTickets .hlpDeskCases .hlpDeskCase.P3 {
  border-color: #C3B1FD;
}

/*$bp-xlarge: 120em; // 1920px
$bp-xxlarge: 160em; // 2560px*/
/**/
@media (min-width: 1024px) {
  .twoCol {
    width: calc(50% - 2em);
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .twoCol {
    width: calc(50% - 2em);
  }
}
@media (max-width: 512px) {
  .twoCol {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .fiveCol {
    width: calc(20% - 0.625em);
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .fiveCol {
    width: calc(25% - 0.625em);
  }
}
@media (max-width: 512px) {
  .fiveCol {
    width: calc(100% - 0.625em);
  }
}

@media (min-width: 1024px) {
  .isNotMbl {
    display: flex;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .isNotMbl {
    display: flex;
  }
}
@media (max-width: 512px) {
  .isNotMbl {
    display: none;
  }
}

@media (min-width: 1024px) {
  .isMbl {
    display: none;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .isMbl {
    display: none;
  }
}
@media (max-width: 512px) {
  .isMbl {
    display: inline-flex;
  }
}

@media (max-width: 512px) {
  .burger {
    display: none;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .burger {
    display: none;
  }
}
@media (min-width: 1024px) {
  .burger {
    display: none;
  }
}

.burger {
  height: 4.5em;
  width: 4.5em;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1.25em 1em;
  cursor: pointer;
}
.burger span {
  content: "";
  background-color: rgb(255, 255, 255);
  height: 4px;
  display: block;
  margin: auto 5px;
  border-radius: 5em;
}

@media (min-width: 1024px) {
  .btnWide {
    min-width: 11em;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .btnWide {
    min-width: 11em;
  }
}
@media (max-width: 512px) {
  .btnWide {
    min-width: 3em;
  }
}

@media (min-width: 1024px) {
  .tblWrapper {
    width: 100%;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .tblWrapper {
    width: 100%;
  }
}
@media (max-width: 512px) {
  .tblWrapper {
    overflow-x: scroll;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .checkout > div {
    max-width: 24em;
    margin: 1em;
    width: 100%;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .checkout > div {
    max-width: 24em;
    margin: 1em;
    width: 100%;
  }
}
@media (max-width: 512px) {
  .checkout > div {
    margin: 1em 0;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .popUp {
    min-width: 450px;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .popUp {
    min-width: 450px;
  }
}
@media (max-width: 512px) {
  .popUp {
    max-width: 100%;
  }
}

div.alert {
  display: flex;
  align-items: center;
  padding: 0 1em;
  justify-content: center;
}
@media (min-width: 1024px) {
  .popUpProductBasketAdded, .popUpError {
    margin-left: calc(50% - 15em);
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  .popUpProductBasketAdded, .popUpError {
    margin-left: calc(50% - 15em);
  }
}
@media (max-width: 512px) {
  .popUpProductBasketAdded, .popUpError {
    margin-left: 1em;
  }
}

@media (max-width: 512px) {
  .footer, .checkout {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  ul.mainNav {
    display: flex;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  ul.mainNav {
    display: flex;
  }
}
@media (max-width: 512px) {
  ul.mainNav {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
@media (min-width: 1024px) {
  ul.mainNav > li:last-child {
    margin-left: auto;
  }
}

@media (max-width: 512px) {
  ul.shopNav :last-child {
    margin-right: 1em;
  }
}

.banner {
  display: flex;
  justify-content: space-between;
}

.bannerRight {
  display: flex;
  line-height: 2.5em;
  text-align: right;
  align-content: center;
  align-items: center;
  margin: 0 2em;
  /*    @media (min-width: 512px) {
        display: flex;
        line-height: 2.5em;
        text-align: right;
        align-content: center;
        align-items: center;
    }*/
  /*    @media (max-width: 512px) {
        display: none;
    }*/
}

@media (min-width: 512px) {
  .mblFooterWrap {
    display: none;
  }
}
@media (max-width: 512px) {
  .mblFooterWrap {
    /* background-color: $clrBlack;*/
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    z-index: 5;
  }
}

@media (max-width: 512px) {
  .dataheader {
    flex-direction: column;
  }
}

@media (max-width: 512px) {
  .fiterReports {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  ul.breadcrumb {
    display: flex;
  }
}
@media (min-width: 512px) and (max-width: 1024px) {
  ul.breadcrumb {
    display: flex;
  }
}
@media (max-width: 512px) {
  ul.breadcrumb {
    display: none;
  }
}

/*# sourceMappingURL=Styles.css.map */