@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("/src/fonts/Roboto.woff2") format("woff2"); }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("/src/fonts/Roboto.woff2") format("woff2"); }
#cloudpos-numeric-keyboard {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 364px;
  background: white;
  border: solid thin;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.4s ease;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75); }
  @media (max-width: 900px) {
    #cloudpos-numeric-keyboard {
      display: none !important; } }
  #cloudpos-numeric-keyboard.cloudpos-numeric-hidden {
    opacity: 0;
    pointer-events: none; }

#cloudpos-numeric-keyboard-input {
  font-size: 2em;
  width: 100%;
  box-sizing: border-box;
  background: white;
  border: none;
  border-bottom: solid thin;
  color: black;
  padding: 8px; }

#cloudpos-numeric-keyboard-buttons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between; }
  #cloudpos-numeric-keyboard-buttons .cloudpos-numeric-keyboard-button {
    padding: 8px;
    font-size: 2em;
    width: 30%;
    text-align: center;
    box-sizing: border-box;
    margin-top: 8px; }

#cloudpos-numeric-keyboard-button-done {
  width: 100% !important;
  background: #0097A7;
  color: white; }

input, select {
  font-size: 1.5em;
  width: 100%;
  box-sizing: border-box; }

#sale-search {
  position: relative; }
  #sale-search input {
    font-size: 1em;
    width: 100%;
    padding: 0.5em;
    box-sizing: border-box; }
  #sale-search i {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    cursor: pointer;
    /*
    &.fa-search {
        right: $large-padding * 2.5;
    }
    */ }
    #sale-search i.fa-camera {
      right: 40px; }

.autocomplete-suggestions {
  max-height: 50vh !important; }
  .autocomplete-suggestions.stop-autocomplete .autocomplete-group {
    display: none !important; }
  .autocomplete-suggestions.stop-autocomplete .autocomplete-suggestion {
    display: none !important; }
  .autocomplete-suggestions .autocomplete-suggestion {
    position: relative; }
    .autocomplete-suggestions .autocomplete-suggestion .suggestion-price {
      position: absolute;
      top: 0;
      right: 8px;
      line-height: 30px; }
    .autocomplete-suggestions .autocomplete-suggestion .suggestion-no-stock {
      color: #777; }
  .autocomplete-suggestions .autocomplete-no-suggestion {
    padding: 8px; }
    .autocomplete-suggestions .autocomplete-no-suggestion a {
      text-decoration: underline;
      color: #555; }
      .autocomplete-suggestions .autocomplete-no-suggestion a:hover {
        color: #777; }

#sale-recommended {
  display: none;
  position: relative;
  z-index: -1; }
  @media (min-width: 900px) {
    #sale-recommended {
      display: block;
      width: 100%;
      height: 10vh;
      margin-top: 8px;
      box-sizing: border-box;
      border: solid thin;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap; }
      #sale-recommended::-webkit-scrollbar {
        display: none; }
      #sale-recommended .recommended {
        border-right: solid thin;
        display: inline-block;
        height: 100%;
        padding: 8px;
        box-sizing: border-box;
        position: relative;
        text-align: center; }
        #sale-recommended .recommended:last-child {
          border-right: none; }
        #sale-recommended .recommended .recommended-inner {
          display: flex;
          justify-content: center;
          flex-direction: column;
          height: 100%; }
        #sale-recommended .recommended .name {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
      #sale-recommended .product .price {
        display: block; } }

#sale-keys {
  border: solid thin;
  width: 100%;
  padding: 8px;
  font-size: 1em;
  box-sizing: border-box;
  margin-top: 8px;
  text-align: center;
  background: skyblue;
  position: relative;
  display: none; }
  #sale-keys span {
    cursor: pointer; }
  #sale-keys #sale-keys-inner {
    display: none; }
  #sale-keys #sale-keyboard {
    display: none; }
  #sale-keys p.default-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: calc(1vw + 1vh);
    margin: auto;
    height: 50px;
    line-height: 50px; }
  #sale-keys #sale-keys-inner:not(.no-keys) p.default-message {
    display: none; }
  @media (min-width: 900px) {
    #sale-keys {
      height: 80vh;
      border: solid thin;
      background: transparent;
      padding: 0;
      display: flex;
      flex-direction: column; }
      #sale-keys span {
        background: skyblue;
        border: solid thin;
        display: block;
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        cursor: auto; }
      #sale-keys #sale-key-top {
        position: absolute;
        width: 100%;
        height: 5vh;
        cursor: pointer;
        background: #0097A7;
        text-align: center;
        z-index: 0;
        top: -5vh;
        transition: top 0.4s ease-out;
        font-size: 1.5em;
        color: white;
        line-height: 5vh;
        border: solid thin;
        border-color: black;
        box-sizing: border-box;
        overflow: hidden;
        opacity: 1; }
        #sale-keys #sale-key-top.hidden {
          z-index: -1;
          opacity: 0;
          top: 0; }
      #sale-keys #sale-keys-inner {
        display: block;
        height: 100%;
        width: 100%;
        max-height: 100%;
        max-width: 100%;
        position: relative;
        background: url("/imgs/general/backgrounds/concrete_seamless.png");
        z-index: 1; }
        #sale-keys #sale-keys-inner .sale-key-sizer {
          width: 10%;
          height: 10%; }
        #sale-keys #sale-keys-inner .sale-key {
          box-sizing: border-box;
          border: solid 1px;
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;
          background: attr(data-background);
          cursor: pointer;
          z-index: 0;
          border-color: black;
          pointer-events: auto;
          transition: color 0.7s ease;
          -webkit-user-select: none;
          user-select: none; }
          #sale-keys #sale-keys-inner .sale-key::after {
            transition: height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 1; }
          #sale-keys #sale-keys-inner .sale-key:hover::after {
            height: 100%; }
          #sale-keys #sale-keys-inner .sale-key:hover.has-image p {
            transform: translateY(0); }
          #sale-keys #sale-keys-inner .sale-key:hover.key-color-null::after, #sale-keys #sale-keys-inner .sale-key:hover.key-color-::after {
            height: 0; }
          #sale-keys #sale-keys-inner .sale-key:hover.key-color-null.has-image p, #sale-keys #sale-keys-inner .sale-key:hover.key-color-.has-image p {
            transform: translateY(500%); } }
        @media (min-width: 900px) and (min-height: 1000px) {
          #sale-keys #sale-keys-inner .sale-key:hover.key-color-null.has-image p, #sale-keys #sale-keys-inner .sale-key:hover.key-color-.has-image p {
            transform: translateY(700%); } }
  @media (min-width: 900px) {
          #sale-keys #sale-keys-inner .sale-key.key-disabled {
            cursor: not-allowed;
            filter: brightness(50%);
                    /*
                    background: #ddd;
                    color: black;

                    .key-image {
                        visibility: hidden;
                    }

                    p {
                        display: none;
                    }

                    &.has-image {
                        p {
                            transform: translateY(0);
                        }
                    }

                    &::after {
                        height: 0px;
                    }
                    */ }
          #sale-keys #sale-keys-inner .sale-key.selected {
            z-index: 3; }
          #sale-keys #sale-keys-inner .sale-key.in-folder {
            transform: scale(0, 0); }
          #sale-keys #sale-keys-inner .sale-key .key-image {
            position: absolute;
            max-height: 100%; }
          #sale-keys #sale-keys-inner .sale-key.key-image-fill .key-image {
            width: 100%;
            height: 100%; }
            #sale-keys #sale-keys-inner .sale-key.key-image-fill .key-image img {
              width: 100%;
              min-height: 100%; }
          #sale-keys #sale-keys-inner .sale-key.key-image-constrain-width .key-image {
            width: 100%;
            height: 100%; }
            #sale-keys #sale-keys-inner .sale-key.key-image-constrain-width .key-image img {
              max-width: 100%;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
              height: auto; }
          #sale-keys #sale-keys-inner .sale-key.key-image-constrain-height .key-image {
            width: 100%;
            height: 100%; }
            #sale-keys #sale-keys-inner .sale-key.key-image-constrain-height .key-image img {
              max-height: 100%;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
              width: auto; }
          #sale-keys #sale-keys-inner .sale-key.has-image {
            overflow: hidden; }
            #sale-keys #sale-keys-inner .sale-key.has-image p {
              transform: translateY(500%);
              transition: transform 1s ease; }
          #sale-keys #sale-keys-inner .sale-key p {
            z-index: 2; }
        #sale-keys #sale-keys-inner .sale-key-folder {
          height: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 1;
          pointer-events: none; }
        #sale-keys #sale-keys-inner .key-width-1 {
          width: 10%; }
        #sale-keys #sale-keys-inner .key-height-1 {
          height: 10%; }
        #sale-keys #sale-keys-inner .key-y-0 {
          top: 0%; }
        #sale-keys #sale-keys-inner .key-x-0 {
          left: 0%; }
        #sale-keys #sale-keys-inner .key-width-2 {
          width: 20%; }
        #sale-keys #sale-keys-inner .key-height-2 {
          height: 20%; }
        #sale-keys #sale-keys-inner .key-y-1 {
          top: 10%; }
        #sale-keys #sale-keys-inner .key-x-1 {
          left: 10%; }
        #sale-keys #sale-keys-inner .key-width-3 {
          width: 30%; }
        #sale-keys #sale-keys-inner .key-height-3 {
          height: 30%; }
        #sale-keys #sale-keys-inner .key-y-2 {
          top: 20%; }
        #sale-keys #sale-keys-inner .key-x-2 {
          left: 20%; }
        #sale-keys #sale-keys-inner .key-width-4 {
          width: 40%; }
        #sale-keys #sale-keys-inner .key-height-4 {
          height: 40%; }
        #sale-keys #sale-keys-inner .key-y-3 {
          top: 30%; }
        #sale-keys #sale-keys-inner .key-x-3 {
          left: 30%; }
        #sale-keys #sale-keys-inner .key-width-5 {
          width: 50%; }
        #sale-keys #sale-keys-inner .key-height-5 {
          height: 50%; }
        #sale-keys #sale-keys-inner .key-y-4 {
          top: 40%; }
        #sale-keys #sale-keys-inner .key-x-4 {
          left: 40%; }
        #sale-keys #sale-keys-inner .key-width-6 {
          width: 60%; }
        #sale-keys #sale-keys-inner .key-height-6 {
          height: 60%; }
        #sale-keys #sale-keys-inner .key-y-5 {
          top: 50%; }
        #sale-keys #sale-keys-inner .key-x-5 {
          left: 50%; }
        #sale-keys #sale-keys-inner .key-width-7 {
          width: 70%; }
        #sale-keys #sale-keys-inner .key-height-7 {
          height: 70%; }
        #sale-keys #sale-keys-inner .key-y-6 {
          top: 60%; }
        #sale-keys #sale-keys-inner .key-x-6 {
          left: 60%; }
        #sale-keys #sale-keys-inner .key-width-8 {
          width: 80%; }
        #sale-keys #sale-keys-inner .key-height-8 {
          height: 80%; }
        #sale-keys #sale-keys-inner .key-y-7 {
          top: 70%; }
        #sale-keys #sale-keys-inner .key-x-7 {
          left: 70%; }
        #sale-keys #sale-keys-inner .key-width-9 {
          width: 90%; }
        #sale-keys #sale-keys-inner .key-height-9 {
          height: 90%; }
        #sale-keys #sale-keys-inner .key-y-8 {
          top: 80%; }
        #sale-keys #sale-keys-inner .key-x-8 {
          left: 80%; }
        #sale-keys #sale-keys-inner .key-width-10 {
          width: 100%; }
        #sale-keys #sale-keys-inner .key-height-10 {
          height: 100%; }
        #sale-keys #sale-keys-inner .key-y-9 {
          top: 90%; }
        #sale-keys #sale-keys-inner .key-x-9 {
          left: 90%; }
        #sale-keys #sale-keys-inner .key-color-black::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: black;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-black {
          background: black; }
        #sale-keys #sale-keys-inner .key-textcolor-black {
          color: black; }
        #sale-keys #sale-keys-inner .key-texthovercolor-black:hover {
          color: black; }
        #sale-keys #sale-keys-inner .key-bordercolor-black {
          border-color: black; }
        #sale-keys #sale-keys-inner .key-color-blue::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: blue;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-blue {
          background: blue; }
        #sale-keys #sale-keys-inner .key-textcolor-blue {
          color: blue; }
        #sale-keys #sale-keys-inner .key-texthovercolor-blue:hover {
          color: blue; }
        #sale-keys #sale-keys-inner .key-bordercolor-blue {
          border-color: blue; }
        #sale-keys #sale-keys-inner .key-color-brown::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: brown;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-brown {
          background: brown; }
        #sale-keys #sale-keys-inner .key-textcolor-brown {
          color: brown; }
        #sale-keys #sale-keys-inner .key-texthovercolor-brown:hover {
          color: brown; }
        #sale-keys #sale-keys-inner .key-bordercolor-brown {
          border-color: brown; }
        #sale-keys #sale-keys-inner .key-color-cyan::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: cyan;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-cyan {
          background: cyan; }
        #sale-keys #sale-keys-inner .key-textcolor-cyan {
          color: cyan; }
        #sale-keys #sale-keys-inner .key-texthovercolor-cyan:hover {
          color: cyan; }
        #sale-keys #sale-keys-inner .key-bordercolor-cyan {
          border-color: cyan; }
        #sale-keys #sale-keys-inner .key-color-gray::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: gray;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-gray {
          background: gray; }
        #sale-keys #sale-keys-inner .key-textcolor-gray {
          color: gray; }
        #sale-keys #sale-keys-inner .key-texthovercolor-gray:hover {
          color: gray; }
        #sale-keys #sale-keys-inner .key-bordercolor-gray {
          border-color: gray; }
        #sale-keys #sale-keys-inner .key-color-green::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: green;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-green {
          background: green; }
        #sale-keys #sale-keys-inner .key-textcolor-green {
          color: green; }
        #sale-keys #sale-keys-inner .key-texthovercolor-green:hover {
          color: green; }
        #sale-keys #sale-keys-inner .key-bordercolor-green {
          border-color: green; }
        #sale-keys #sale-keys-inner .key-color-ivory::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: ivory;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-ivory {
          background: ivory; }
        #sale-keys #sale-keys-inner .key-textcolor-ivory {
          color: ivory; }
        #sale-keys #sale-keys-inner .key-texthovercolor-ivory:hover {
          color: ivory; }
        #sale-keys #sale-keys-inner .key-bordercolor-ivory {
          border-color: ivory; }
        #sale-keys #sale-keys-inner .key-color-khaki::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: khaki;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-khaki {
          background: khaki; }
        #sale-keys #sale-keys-inner .key-textcolor-khaki {
          color: khaki; }
        #sale-keys #sale-keys-inner .key-texthovercolor-khaki:hover {
          color: khaki; }
        #sale-keys #sale-keys-inner .key-bordercolor-khaki {
          border-color: khaki; }
        #sale-keys #sale-keys-inner .key-color-navy::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: navy;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-navy {
          background: navy; }
        #sale-keys #sale-keys-inner .key-textcolor-navy {
          color: navy; }
        #sale-keys #sale-keys-inner .key-texthovercolor-navy:hover {
          color: navy; }
        #sale-keys #sale-keys-inner .key-bordercolor-navy {
          border-color: navy; }
        #sale-keys #sale-keys-inner .key-color-orange::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: orange;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-orange {
          background: orange; }
        #sale-keys #sale-keys-inner .key-textcolor-orange {
          color: orange; }
        #sale-keys #sale-keys-inner .key-texthovercolor-orange:hover {
          color: orange; }
        #sale-keys #sale-keys-inner .key-bordercolor-orange {
          border-color: orange; }
        #sale-keys #sale-keys-inner .key-color-pink::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: pink;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-pink {
          background: pink; }
        #sale-keys #sale-keys-inner .key-textcolor-pink {
          color: pink; }
        #sale-keys #sale-keys-inner .key-texthovercolor-pink:hover {
          color: pink; }
        #sale-keys #sale-keys-inner .key-bordercolor-pink {
          border-color: pink; }
        #sale-keys #sale-keys-inner .key-color-purple::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: purple;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-purple {
          background: purple; }
        #sale-keys #sale-keys-inner .key-textcolor-purple {
          color: purple; }
        #sale-keys #sale-keys-inner .key-texthovercolor-purple:hover {
          color: purple; }
        #sale-keys #sale-keys-inner .key-bordercolor-purple {
          border-color: purple; }
        #sale-keys #sale-keys-inner .key-color-red::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: red;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-red {
          background: red; }
        #sale-keys #sale-keys-inner .key-textcolor-red {
          color: red; }
        #sale-keys #sale-keys-inner .key-texthovercolor-red:hover {
          color: red; }
        #sale-keys #sale-keys-inner .key-bordercolor-red {
          border-color: red; }
        #sale-keys #sale-keys-inner .key-color-teal::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: teal;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-teal {
          background: teal; }
        #sale-keys #sale-keys-inner .key-textcolor-teal {
          color: teal; }
        #sale-keys #sale-keys-inner .key-texthovercolor-teal:hover {
          color: teal; }
        #sale-keys #sale-keys-inner .key-bordercolor-teal {
          border-color: teal; }
        #sale-keys #sale-keys-inner .key-color-violet::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: violet;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-violet {
          background: violet; }
        #sale-keys #sale-keys-inner .key-textcolor-violet {
          color: violet; }
        #sale-keys #sale-keys-inner .key-texthovercolor-violet:hover {
          color: violet; }
        #sale-keys #sale-keys-inner .key-bordercolor-violet {
          border-color: violet; }
        #sale-keys #sale-keys-inner .key-color-white::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: white;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
        #sale-keys #sale-keys-inner .key-background-white {
          background: white; }
        #sale-keys #sale-keys-inner .key-textcolor-white {
          color: white; }
        #sale-keys #sale-keys-inner .key-texthovercolor-white:hover {
          color: white; }
        #sale-keys #sale-keys-inner .key-bordercolor-white {
          border-color: white; }
        #sale-keys #sale-keys-inner .key-color-yellow::after {
          content: " ";
          width: 100%;
          height: 10px;
          background: yellow;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0; }
          
        #sale-keys #sale-keys-inner .key-background-FCDEAB {
          background: #FCDEAB; }
        #sale-keys #sale-keys-inner .key-background-E2F5D1 {
          background: #E2F5D1; }
        #sale-keys #sale-keys-inner .key-background-CEE5FC {
          background: #CEE5FC; }
        #sale-keys #sale-keys-inner .key-background-8D1238 {
          background: #8D1238; }
        #sale-keys #sale-keys-inner .key-background-F3DB90 {
          background: #F3DB90; }
        #sale-keys #sale-keys-inner .key-background-DFB46E {
          background: #DFB46E; }
        #sale-keys #sale-keys-inner .key-background-EEA0C2 {
          background: #EEA0C2; }
        #sale-keys #sale-keys-inner .key-background-53A0BB {
          background: #53A0BB; }
        #sale-keys #sale-keys-inner .key-background-EE795E {
          background: #EE795E; }
        #sale-keys #sale-keys-inner .key-background-F7C062 {
          background: #F7C062; }
        #sale-keys #sale-keys-inner .key-background-80BA85 {
          background: #80BA85; }
          
        #sale-keys #sale-keys-inner .key-background-yellow {
          background: yellow; }
        #sale-keys #sale-keys-inner .key-textcolor-yellow {
          color: yellow; }
        #sale-keys #sale-keys-inner .key-texthovercolor-yellow:hover {
          color: yellow; }
        #sale-keys #sale-keys-inner .key-bordercolor-yellow {
          border-color: yellow; }
        #sale-keys #sale-keys-inner .key-bordercolor-none {
          border: none; }
      #sale-keys .background {
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: -1;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: black;
        transition: opacity 1s ease; }
      #sale-keys.keyboard .background {
        opacity: 0.7;
        z-index: 4; }
      #sale-keys #sale-keyboard {
        bottom: -100%;
        transition: bottom 1s ease;
        z-index: 5;
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        height: 40%; }
        #sale-keys #sale-keyboard.displayed {
          bottom: 0; }
        #sale-keys #sale-keyboard .key-height-1 {
          height: 16%; }
        #sale-keys #sale-keyboard .key-y-0 {
          top: 0%; }
        #sale-keys #sale-keyboard .key-height-2 {
          height: 32%; }
        #sale-keys #sale-keyboard .key-y-1 {
          top: 16%; }
        #sale-keys #sale-keyboard .key-height-3 {
          height: 48%; }
        #sale-keys #sale-keyboard .key-y-2 {
          top: 32%; }
        #sale-keys #sale-keyboard .key-height-4 {
          height: 64%; }
        #sale-keys #sale-keyboard .key-y-3 {
          top: 48%; }
        #sale-keys #sale-keyboard .key-height-5 {
          height: 80%; }
        #sale-keys #sale-keyboard .key-y-4 {
          top: 64%; }
        #sale-keys #sale-keyboard .key-height-6 {
          height: 96%; }
        #sale-keys #sale-keyboard .key-y-5 {
          top: 80%; }
        #sale-keys #sale-keyboard .key-height-7 {
          height: 112%; }
        #sale-keys #sale-keyboard .key-y-6 {
          top: 96%; }
        #sale-keys #sale-keyboard .key-height-8 {
          height: 128%; }
        #sale-keys #sale-keyboard .key-y-7 {
          top: 112%; }
        #sale-keys #sale-keyboard .key-height-9 {
          height: 144%; }
        #sale-keys #sale-keyboard .key-y-8 {
          top: 128%; }
        #sale-keys #sale-keyboard .key-height-10 {
          height: 160%; }
        #sale-keys #sale-keyboard .key-y-9 {
          top: 144%; } }
  @media (min-height: 800px) {
    #sale-keys {
      height: 85vh; } }

#sale-tabs {
  position: fixed;
  height: 85vh;
  top: 10vh;
  bottom: 5vh;
  left: 0;
  margin: auto;
  z-index: 2;
  display: none; }
  @media (min-width: 900px) {
    #sale-tabs {
      display: block; } }
  #sale-tabs .sale-tab {
    border: solid thin;
    box-sizing: border-box;
    height: 85vh;
    background: white;
    position: absolute;
    transition: left 1s cubic-bezier(0.68, -0.4, 0.265, 1.2);
    z-index: 3;
    font-size: 1.2em;
    padding-left: 100px;
    width: calc(100vw - 100px);
    left: calc(-100vw + 100px); }
    #sale-tabs .sale-tab.display {
      left: -100px; }
    @media (min-width: 1150px) {
      #sale-tabs .sale-tab {
        width: calc(100vw - 200px);
        left: calc(-100vw + 200px); } }
    @media (min-width: 1250px) {
      #sale-tabs .sale-tab {
        width: calc(100vw - 300px);
        left: calc(-100vw + 300px); } }
    @media (min-width: 1400px) {
      #sale-tabs .sale-tab {
        width: calc(100vw - 450px);
        left: calc(-100vw + 450px); } }
    @media (min-width: 1650px) {
      #sale-tabs .sale-tab {
        width: calc(100vw - 500px);
        left: calc(-100vw + 500px); } }
    #sale-tabs .sale-tab .label {
      position: absolute;
      transform: rotate(90deg);
      padding: 8px;
      box-sizing: border-box;
      border: solid thin;
      border-radius: 10px 10px 0 0;
      border-bottom: 0;
      background: white;
      cursor: pointer;
      font-size: 1em;
      transition: background 0.2s ease; }
    #sale-tabs .sale-tab:hover:not(.display) .label {
      background: #eee; }
    #sale-tabs .sale-tab.disabled .label {
      cursor: not-allowed;
      background: #ccc !important; }
    #sale-tabs .sale-tab .actions {
      border: none;
      padding: 8px;
      margin-left: 50px; }
      #sale-tabs .sale-tab .actions .action {
        cursor: pointer;
        display: inline-block;
        margin-right: 16px; }
        #sale-tabs .sale-tab .actions .action i {
          margin-right: 4px; }
    #sale-tabs .sale-tab .main {
      margin-left: 50px;
      margin-right: 20px;
      height: 70vh;
      overflow: auto; }
  #sale-tabs #current-sales .label {
    right: -100px;
    top: 70px; }
  #sale-tabs #current-sales #held-sales {
    width: 100%;
    border: solid thin;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; }
    #sale-tabs #current-sales #held-sales .sale-head, #sale-tabs #current-sales #held-sales .sale {
      display: flex;
      justify-content: center; }
      #sale-tabs #current-sales #held-sales .sale-head div, #sale-tabs #current-sales #held-sales .sale div {
        padding: 16px 0; }
      #sale-tabs #current-sales #held-sales .sale-head .delete, #sale-tabs #current-sales #held-sales .sale .delete {
        width: 7.5%; }
      #sale-tabs #current-sales #held-sales .sale-head .timestamp, #sale-tabs #current-sales #held-sales .sale .timestamp {
        width: 25%; }
      #sale-tabs #current-sales #held-sales .sale-head .register, #sale-tabs #current-sales #held-sales .sale .register {
        width: 15%; }
      #sale-tabs #current-sales #held-sales .sale-head .user, #sale-tabs #current-sales #held-sales .sale .user {
        width: 15%; }
      #sale-tabs #current-sales #held-sales .sale-head .customer, #sale-tabs #current-sales #held-sales .sale .customer {
        width: 20%; }
      #sale-tabs #current-sales #held-sales .sale-head .total, #sale-tabs #current-sales #held-sales .sale .total {
        width: 15%; }
      #sale-tabs #current-sales #held-sales .sale-head .more, #sale-tabs #current-sales #held-sales .sale .more {
        width: 7.5%; }
    #sale-tabs #current-sales #held-sales.with-note .sale-head .delete, #sale-tabs #current-sales #held-sales.with-note .sale .delete {
      width: 5%; }
    #sale-tabs #current-sales #held-sales.with-note .sale-head .timestamp, #sale-tabs #current-sales #held-sales.with-note .sale .timestamp {
      width: 20%; }
    #sale-tabs #current-sales #held-sales.with-note .sale-head .register, #sale-tabs #current-sales #held-sales.with-note .sale .register {
      width: 15%; }
    #sale-tabs #current-sales #held-sales.with-note .sale-head .user, #sale-tabs #current-sales #held-sales.with-note .sale .user {
      width: 15%; }
    #sale-tabs #current-sales #held-sales.with-note .sale-head .customer, #sale-tabs #current-sales #held-sales.with-note .sale .customer {
      width: 20%; }
    #sale-tabs #current-sales #held-sales.with-note .sale-head .note, #sale-tabs #current-sales #held-sales.with-note .sale .note {
      width: 15%; }
    #sale-tabs #current-sales #held-sales.with-note .sale-head .total, #sale-tabs #current-sales #held-sales.with-note .sale .total {
      width: 10%; }
    #sale-tabs #current-sales #held-sales.with-note .sale-head .more, #sale-tabs #current-sales #held-sales.with-note .sale .more {
      width: 5%; }
  #sale-tabs #current-sales .sale-head {
    font-weight: bold;
    text-align: center;
    border-bottom: solid thin; }
    #sale-tabs #current-sales .sale-head div {
      border-right: solid thin; }
      #sale-tabs #current-sales .sale-head div:last-child {
        border: none; }
  #sale-tabs #current-sales .sale {
    cursor: pointer;
    text-align: center;
    border-bottom: solid thin;
    position: relative; }
    #sale-tabs #current-sales .sale div {
      border-right: solid thin; }
    #sale-tabs #current-sales .sale .more {
      border: none; }
      #sale-tabs #current-sales .sale .more i {
        transition: transform 0.5s ease; }
    #sale-tabs #current-sales .sale:last-child {
      border-bottom: none; }
    #sale-tabs #current-sales .sale.show-details .more i {
      transform: rotateZ(-180deg); }
    #sale-tabs #current-sales .sale.not-highlighted {
      background: #ddd;
      color: #aaa; }
      #sale-tabs #current-sales .sale.not-highlighted + .sale-data {
        background: #ccc;
        color: #aaa; }
    #sale-tabs #current-sales .sale:hover::after {
      content: 'Click to load this sale';
      position: absolute;
      top: 120%;
      z-index: 3;
      background: white;
      padding: 8px;
      border: solid thin;
      box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.75); }
  #sale-tabs #current-sales.add-to-sale .sale:hover::after {
    content: 'Click to add to this sale'; }
  #sale-tabs #current-sales .sale-data {
    box-sizing: border-box;
    overflow: hidden; }
    #sale-tabs #current-sales .sale-data.hidden {
      height: 0;
      pointer-events: auto;
      cursor: pointer; }
    #sale-tabs #current-sales .sale-data .products {
      padding: 8px; }
    #sale-tabs #current-sales .sale-data .product {
      display: flex; }
      #sale-tabs #current-sales .sale-data .product div {
        display: inline-block;
        text-align: center; }
      #sale-tabs #current-sales .sale-data .product .quantity {
        width: 10%; }
      #sale-tabs #current-sales .sale-data .product .type {
        width: 20%; }
      #sale-tabs #current-sales .sale-data .product .name {
        width: 40%;
        text-align: left; }
      #sale-tabs #current-sales .sale-data .product .user {
        width: 30%; }
    #sale-tabs #current-sales .sale-data + .sale {
      border-top: solid thin; }
  #sale-tabs #table-map .label {
    top: 200px;
    right: -59px; }

#hold-sale, #add-to-held {
  color: #ccc;
  cursor: not-allowed !important; }
  #hold-sale.enabled, #add-to-held.enabled {
    color: black;
    cursor: pointer !important; }

@keyframes shake {
  0% {
    transform: translate(2px, 1px) rotate(0deg); }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg); }
  20% {
    transform: translate(-3px, 0px) rotate(1deg); }
  30% {
    transform: translate(0px, 2px) rotate(0deg); }
  40% {
    transform: translate(1px, -1px) rotate(1deg); }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg); }
  60% {
    transform: translate(-3px, 1px) rotate(0deg); }
  70% {
    transform: translate(2px, 1px) rotate(-1deg); }
  80% {
    transform: translate(-1px, -1px) rotate(1deg); }
  90% {
    transform: translate(2px, 2px) rotate(0deg); }
  100% {
    transform: translate(1px, -2px) rotate(-1deg); } }
#add-to-held.select-sale {
  color: #0097A7;
  animation-name: shake;
  animation-duration: 0.8s;
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

#sale-receipt {
  border: solid thin;
  border-bottom: 0;
  min-height: 100%;
  margin-top: 8px;
  overflow: auto; }
  #sale-receipt .sale-row {
    border-bottom: solid thin;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 72px;
    transition: height 1s ease; }
    @media (min-width: 900px) {
      #sale-receipt .sale-row {
        height: 45px;
        padding: 0;
        text-align: left; } }
    #sale-receipt .sale-row .item-name {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      cursor: pointer;
      transition: line-height 1s ease;
      z-index: 1; }
      @media (min-width: 900px) {
        #sale-receipt .sale-row .item-name {
          line-height: 45px;
          width: 55%;
          margin-left: calc(5% + 40px + 8px); } }
      @media (min-width: 1200px) {
        #sale-receipt .sale-row .item-name {
          width: 60%; } }
    #sale-receipt .sale-row .item-details {
      display: inline-block;
      right: 8px;
      z-index: 1; }
      #sale-receipt .sale-row .item-details .item-quantity {
        display: inline-block;
        box-sizing: content-box;
        width: 20px;
        font-size: 1em;
        text-align: center;
        padding: 0.2em 0;
        width: 40px; }
        #sale-receipt .sale-row .item-details .item-quantity::-webkit-inner-spin-button, #sale-receipt .sale-row .item-details .item-quantity::-webkit-outer-spin-button {
          display: none; }
        @media (min-width: 900px) {
          #sale-receipt .sale-row .item-details .item-quantity {
            position: absolute;
            left: 5%;
            top: 0;
            bottom: 0;
            height: 20px;
            margin: auto; } }
      #sale-receipt .sale-row .item-details .item-total {
        display: inline-block; }
      #sale-receipt .sale-row .item-details .item-promotion {
        margin-left: 8px;
        display: inline-block;
        color: green; }
      #sale-receipt .sale-row .item-details .item-total, #sale-receipt .sale-row .item-details .item-price, #sale-receipt .sale-row .item-details .item-promotion {
        display: none; }
      #sale-receipt .sale-row .item-details .item-display-price {
        display: inline-block; }
        #sale-receipt .sale-row .item-details .item-display-price::before {
          content: " = "; }
        @media (min-width: 900px) {
          #sale-receipt .sale-row .item-details .item-display-price {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 9%;
            line-height: 45px; }
            #sale-receipt .sale-row .item-details .item-display-price::before {
              display: none; } }
      #sale-receipt .sale-row .item-details .item-delete {
        font-size: 1.3em;
        top: 0;
        bottom: 0;
        right: 4%;
        position: absolute;
        color: #777;
        cursor: pointer;
        height: 30px;
        margin: auto; }
    #sale-receipt .sale-row .item-additional {
      position: absolute;
      bottom: -32px;
      width: 100%;
      left: 0;
      right: 0;
      transition: bottom 1s ease; }
      #sale-receipt .sale-row .item-additional .item-case {
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0; }
        @media (min-width: 900px) {
          #sale-receipt .sale-row .item-additional .item-case {
            left: calc(5% + 40px + 8px);
            right: auto; } }
      #sale-receipt .sale-row .item-additional .item-price {
        display: inline-block;
        position: absolute;
        transition: bottom 1s ease;
        left: 0;
        right: 0;
        bottom: -40px; }
        @media (min-width: 900px) {
          #sale-receipt .sale-row .item-additional .item-price {
            right: 9%;
            left: auto; } }
      @media (min-width: 900px) {
        #sale-receipt .sale-row .item-additional {
          text-align: center; } }
    #sale-receipt .sale-row .item-package {
      width: 100%;
      height: 0;
      overflow: hidden; }
      #sale-receipt .sale-row .item-package .component {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-bottom: 16px; }
        @media (min-width: 700px) {
          #sale-receipt .sale-row .item-package .component {
            padding: 0 16px; } }
      #sale-receipt .sale-row .item-package .component-removed {
        color: #d32f2f;
        text-decoration: line-through; }
    #sale-receipt .sale-row .item-note {
      position: absolute;
      top: 110%;
      left: 0;
      right: 0;
      padding: 8px;
      box-sizing: border-box;
      width: 90%;
      margin: 0 auto;
      border: solid thin;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      white-space: pre;
      background: url("/imgs/general/backgrounds/concrete_seamless.png");
      transition: opacity 0.5s ease; }
      @media (min-width: 900px) {
        #sale-receipt .sale-row .item-note {
          width: 380px;
          right: 10px;
          left: auto; } }
      @media (min-width: 1200px) {
        #sale-receipt .sale-row .item-note {
          width: 480px; } }
    #sale-receipt .sale-row.negative .item-display-price {
      color: red; }
    #sale-receipt .sale-row.on-promotion .item-name {
      color: blue; }
    #sale-receipt .sale-row.pricelist .item-name, #sale-receipt .sale-row.pricelist .item-display-price {
      color: purple; }
    #sale-receipt .sale-row.selected::before {
      width: 100%;
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      background: #0097A7;
      opacity: 0.2;
      left: 0;
      z-index: -1; }
    #sale-receipt .sale-row.selected.package {
      height: auto !important; }
      #sale-receipt .sale-row.selected.package .item-package {
        height: auto; }
      #sale-receipt .sale-row.selected.package .item-delete, #sale-receipt .sale-row.selected.package .item-quantity {
        top: 20px;
        bottom: auto; }
      @media (min-width: 900px) {
        #sale-receipt .sale-row.selected.package .item-display-price {
          line-height: initial;
          top: 20px; } }
    #sale-receipt .sale-row.selected.individual-price, #sale-receipt .sale-row.selected.is-case {
      height: 100px; }
      @media (min-width: 900px) {
        #sale-receipt .sale-row.selected.individual-price, #sale-receipt .sale-row.selected.is-case {
          height: 68px; } }
      #sale-receipt .sale-row.selected.individual-price .item-additional, #sale-receipt .sale-row.selected.is-case .item-additional {
        bottom: 8px; }
    #sale-receipt .sale-row.selected.individual-price .item-price {
      bottom: 0; }
    #sale-receipt .sale-row.giftcard .item-name {
      line-height: 56px; }
      @media (min-width: 900px) {
        #sale-receipt .sale-row.giftcard .item-name {
          line-height: 45px; } }
    #sale-receipt .sale-row.giftcard .giftcard-individuals .giftcard {
      position: relative;
      width: 100%;
      margin: 0 auto;
      height: 30px; }
      #sale-receipt .sale-row.giftcard .giftcard-individuals .giftcard .code, #sale-receipt .sale-row.giftcard .giftcard-individuals .giftcard .amount, #sale-receipt .sale-row.giftcard .giftcard-individuals .giftcard .card-delete {
        position: absolute;
        line-height: 30px;
        top: 0;
        bottom: 0; }
      #sale-receipt .sale-row.giftcard .giftcard-individuals .giftcard .code {
        left: 8px; }
      #sale-receipt .sale-row.giftcard .giftcard-individuals .giftcard .amount {
        left: 0;
        right: 0;
        text-align: center; }
      #sale-receipt .sale-row.giftcard .giftcard-individuals .giftcard .card-delete {
        right: 8px;
        cursor: pointer;
        color: #777; }
      @media (min-width: 500px) {
        #sale-receipt .sale-row.giftcard .giftcard-individuals .giftcard {
          width: 80%; } }
    #sale-receipt .sale-row.giftcard.selected {
      height: auto; }
      #sale-receipt .sale-row.giftcard.selected .item-name {
        line-height: 20px; }
        @media (min-width: 900px) {
          #sale-receipt .sale-row.giftcard.selected .item-name {
            margin-top: 10px;
            line-height: 30px; } }
    #sale-receipt .sale-row.display-note .item-note {
      opacity: 1; }
    #sale-receipt .sale-row .item-profit {
      transition: bottom 1s ease;
      position: absolute;
      bottom: -100%;
      width: 100%;
      text-align: center;
      left: 0; }
      @media (min-width: 900px) {
        #sale-receipt .sale-row .item-profit {
          text-align: right;
          right: 9%;
          left: auto; } }
    #sale-receipt .sale-row.live-profit-display.selected {
      height: 90px; }
      #sale-receipt .sale-row.live-profit-display.selected .item-profit {
        bottom: 10px; }
      #sale-receipt .sale-row.live-profit-display.selected.is-case, #sale-receipt .sale-row.live-profit-display.selected.individual-price {
        height: 120px; }
        #sale-receipt .sale-row.live-profit-display.selected.is-case .item-profit, #sale-receipt .sale-row.live-profit-display.selected.individual-price .item-profit {
          bottom: 30px; }
      @media (min-width: 900px) {
        #sale-receipt .sale-row.live-profit-display.selected {
          height: 70px; }
          #sale-receipt .sale-row.live-profit-display.selected.is-case, #sale-receipt .sale-row.live-profit-display.selected.individual-price {
            height: 85px; } }
    #sale-receipt .sale-row.package .item-details {
      width: 100%; }
    @media (min-width: 900px) {
      #sale-receipt .sale-row.package .item-quantity, #sale-receipt .sale-row.package .item-delete {
        top: 8px;
        bottom: auto; } }
    @media (max-width: 900px) {
      #sale-receipt .sale-row.selected.individual-price.is-case .item-case {
        left: 9%;
        right: auto; }
      #sale-receipt .sale-row.selected.individual-price.is-case .item-price {
        right: 9%;
        left: auto; } }
    @media (min-width: 900px) {
      #sale-receipt .sale-row.selected.individual-price:not(.is-case):not(.live-profit-display) .item-name {
        line-height: 68px; } }
    #sale-receipt .sale-row.has-family::after {
      width: 10px;
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      background: blue;
      opacity: 1;
      left: 0; }
    #sale-receipt .sale-row.family-0::after {
      background: yellow; }
    #sale-receipt .sale-row.family-1::after {
      background: red; }
    #sale-receipt .sale-row.family-2::after {
      background: green; }
    #sale-receipt .sale-row.family-3::after {
      background: orange; }
    #sale-receipt .sale-row.family-4::after {
      background: pink; }
    #sale-receipt .sale-row.family-5::after {
      background: gold; }
    #sale-receipt .sale-row.family-6::after {
      background: purple; }
    #sale-receipt .sale-row.family-7::after {
      background: grey; }
    #sale-receipt .sale-row.family-8::after {
      background: white; }
    #sale-receipt .sale-row.family-9::after {
      background: violet; }
    #sale-receipt .sale-row.family-10::after {
      background: yellowgreen; }
    #sale-receipt .sale-row.family-11::after {
      background: cyan; }
    #sale-receipt .sale-row.family-12::after {
      background: brown; }
    #sale-receipt .sale-row.family-13::after {
      background: azure; }
    #sale-receipt .sale-row.family-14::after {
      background: darkgreen; }
    #sale-receipt .sale-row.discounted .item-display-price {
      color: chocolate; }
  #sale-receipt .discount-row {
    color: #f00; }
  @media (min-height: 400px) {
    #sale-receipt {
      max-height: calc(100vh - 300px); }
      #sale-receipt.has-customer {
        max-height: calc(100vh - 330px); }
      #sale-receipt.has-promotion {
        max-height: calc(100vh - 360px); }
      #sale-receipt.has-customer.has-promotion {
        max-height: calc(100vh - 390px); } }
  @media (min-width: 900px) {
    #sale-receipt {
      margin-top: 0;
      border: 0;
      max-height: calc(100vh - 200px); }
      #sale-receipt.has-customer {
        max-height: calc(100vh - 230px); }
      #sale-receipt.has-promotion {
        max-height: calc(100vh - 260px); }
      #sale-receipt.has-customer.has-promotion {
        max-height: calc(100vh - 290px); } }

#product-details {
  position: fixed;
  opacity: 0;
  z-index: -2;
  background: url("/imgs/general/backgrounds/lined_paper.png");
  top: 50px;
  box-sizing: border-box;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 1s ease, top 1s ease; }
  #product-details.displayed {
    opacity: 1;
    z-index: 2; }
  @media (min-width: 900px) {
    #product-details {
      position: absolute;
      right: -100%;
      bottom: 100%;
      height: 100%;
      left: 100%;
      top: 0;
      transition: right 1s ease, left 1s ease;
      z-index: 5;
      opacity: 1; }
      #product-details.displayed {
        right: 0;
        top: 0;
        left: 0; } }
  #product-details .product-name {
    width: 100%;
    border-bottom: solid thin;
    background: #0097A7;
    padding-left: calc(5% + 8px);
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    font-size: 1.5em;
    height: 50px;
    line-height: 50px; }
    #product-details .product-name span {
      margin-right: 8px; }
    @media (min-width: 900px) {
      #product-details .product-name {
        padding-left: 8px; } }
  #product-details .tab-data {
    position: absolute;
    left: 100%;
    top: 50px;
    bottom: 0;
    transition: left 0.4s ease;
    width: 90%;
    box-sizing: border-box;
    padding: 8px;
    height: calc(100% - (50px + 50px) - 3vw);
    overflow: auto; }
    #product-details .tab-data.tab-open {
      left: 5%; }
    @media (min-width: 900px) {
      #product-details .tab-data {
        width: 100%; }
        #product-details .tab-data.tab-open {
          left: 0; } }
  #product-details h3 {
    margin: 8px 0; }
  #product-details label {
    font-weight: bold;
    width: 100px;
    display: inline-block; }
  #product-details.in-cases .product-case-details {
    display: block !important; }
  #product-details.view-cost .product-case-details .right {
    display: block !important; }
  #product-details.view-cost .product-cost-amount, #product-details.view-cost .product-percentage {
    display: block !important; }
  #product-details .tab-general .product-group {
    display: none; }
    #product-details .tab-general .product-group.display {
      display: block; }
  #product-details .tab-general .product-case-details {
    margin: 8px 0;
    position: relative;
    height: 24px;
    line-height: 24px;
    display: none; }
    #product-details .tab-general .product-case-details .left, #product-details .tab-general .product-case-details .right {
      position: absolute;
      float: none;
      width: 50%; }
    #product-details .tab-general .product-case-details .right {
      left: 50%;
      text-align: left;
      color: #0097A7;
      display: none; }
  #product-details .tab-general .product-prices-header {
    overflow: hidden; }
    #product-details .tab-general .product-prices-header .right {
      text-align: left;
      width: 50%; }
      #product-details .tab-general .product-prices-header .right h3 {
        cursor: pointer; }
  #product-details .tab-general .product-price {
    width: 100%;
    font-size: 1.2em;
    line-height: 45px;
    margin-top: 8px;
    position: relative; }
    #product-details .tab-general .product-price .product-price-quantity {
      border: solid thin;
      display: inline-block;
      width: 70px;
      text-align: center;
      cursor: pointer; }
    #product-details .tab-general .product-price .product-price-amount {
      position: absolute;
      left: 100px;
      top: 0; }
    #product-details .tab-general .product-price .product-cost-amount {
      position: absolute;
      left: 50%;
      top: 0;
      color: #0097A7;
      display: none; }
    #product-details .tab-general .product-price .product-percentage {
      position: absolute;
      left: 70%;
      top: 0;
      color: #0097A7;
      display: none; }
  #product-details .tab-sales .no-sales {
    display: none; }
  #product-details .tab-sales table tr th:nth-child(2), #product-details .tab-sales table tr td:nth-child(2) {
    display: none; }
    @media (min-width: 800px) {
      #product-details .tab-sales table tr th:nth-child(2), #product-details .tab-sales table tr td:nth-child(2) {
        display: table-cell; } }
    @media (min-width: 900px) {
      #product-details .tab-sales table tr th:nth-child(2), #product-details .tab-sales table tr td:nth-child(2) {
        display: none; } }
    @media (min-width: 1200px) {
      #product-details .tab-sales table tr th:nth-child(2), #product-details .tab-sales table tr td:nth-child(2) {
        display: table-cell; } }
  #product-details .tab-sales.no-sales table {
    display: none; }
  #product-details .tab-sales.no-sales .no-sales {
    display: block; }
  #product-details .tab-purchases .no-history {
    display: none; }
  #product-details .tab-purchases.no-purchases table {
    display: none; }
  #product-details .tab-purchases.no-purchases .no-history {
    display: block; }
  #product-details .tab-barcodes .no-barcodes {
    display: none; }
  #product-details .tab-barcodes.no-barcodes table {
    display: none; }
  #product-details .tab-barcodes.no-barcodes .no-barcodes {
    display: block; }
  #product-details .tabs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border: 0;
    border-top: solid thin;
    text-align: center;
    font-size: 4vw;
    white-space: nowrap;
    display: flex;
    justify-content: center; }
    #product-details .tabs .tab {
      display: block; }
      #product-details .tabs .tab:first-child {
        border-left: solid thin; }
      #product-details .tabs .tab.selected {
        background: #0097A7;
        color: white; }
    @media (min-width: 900px) {
      #product-details .tabs {
        font-size: 1em; } }
    @media (min-width: 1200px) {
      #product-details .tabs {
        font-size: 1.3em; } }

#display-payment-breakdown {
  position: absolute;
  right: -100%;
  font-size: 4em;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 70px;
  line-height: 70px;
  cursor: pointer;
  transition: 0.5s right ease;
  display: none; }
  #display-payment-breakdown.display {
    right: -25px; }
  @media (min-width: 900px) {
    #display-payment-breakdown {
      display: block; } }

#payment-breakdown {
  position: absolute;
  width: 100%;
  border: none;
  right: -110%;
  bottom: 100%;
  top: 0;
  transition: right 1s ease;
  z-index: 6;
  opacity: 1;
  background: url("/imgs/general/backgrounds/lined_paper.png");
  box-sizing: border-box;
  height: calc(100vh - 196px);
  border-bottom: solid thin;
  display: none; }
  #payment-breakdown.display {
    right: 0; }
  #payment-breakdown .title {
    width: 100%;
    border-bottom: solid thin;
    background: #0097A7;
    padding: 8px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    font-size: 1.5em; }
    #payment-breakdown .title span {
      margin-left: 8px; }
  #payment-breakdown .payment {
    width: 100%;
    border-bottom: solid thin;
    height: 45px;
    font-size: 1.2em;
    position: relative;
    line-height: 45px; }
    #payment-breakdown .payment .amount {
      margin-left: 16px; }
    #payment-breakdown .payment .fa-times-circle {
      position: absolute;
      right: 16px;
      top: 0;
      bottom: 0;
      line-height: 45px;
      cursor: pointer; }
  @media (min-width: 900px) {
    #payment-breakdown {
      display: block; } }

#sale-details {
  position: fixed;
  bottom: -300px;
  border: solid thin;
  border-bottom: 0;
  width: 90%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8px;
  background: url("/imgs/general/backgrounds/lined_paper.png");
  transition: bottom 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    /*
    @media (min-width: 500px) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;;
    }

    @media (min-width: 900px) {
        border: 0;
        border-top: solid thin;
        display: block;
        width: 300px;
    }

    @media (min-width: 1200px) {
        width: 350px;
    }
    */ }
  #sale-details.has-products {
    bottom: 0; }
  #sale-details #sale-details-display {
    display: none; }
  @media (min-width: 900px) {
    #sale-details {
      position: absolute;
      border: 0;
      border-top: solid thin;
      width: 100%;
      left: 0;
      right: 0; } }
  @media (max-height: 400px) {
    #sale-details {
      bottom: -150% !important; } }

#sale-customer {
  text-align: center;
  position: relative; }
  #sale-customer p {
    cursor: pointer; }
  #sale-customer .customer-name {
    font-weight: bold; }
  #sale-customer .customer-remove {
    cursor: pointer;
    position: absolute;
    right: 8px;
    bottom: 0; }
    #sale-customer .customer-remove:hover {
      color: #333; }
  #sale-customer .customer-details {
    position: absolute;
    border: solid thin;
    padding: 8px;
    box-sizing: border-box;
    background: white;
    left: 8px;
    right: 8px;
    bottom: 50px;
    opacity: 0;
    transition: opacity 1s ease;
    transition-delay: 0.25s;
    pointer-events: none; }
    #sale-customer .customer-details span {
      display: block; }
    #sale-customer .customer-details::after, #sale-customer .customer-details::before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none; }
    #sale-customer .customer-details::after {
      border-color: rgba(255, 255, 255, 0);
      border-top-color: white;
      border-width: 10px;
      margin-left: -10px; }
    #sale-customer .customer-details::before {
      border-color: rgba(0, 0, 0, 0);
      border-top-color: black;
      border-width: 11px;
      margin-left: -11px; }
  #sale-customer.hover-show .customer-details {
    opacity: 1;
    pointer-events: auto;
    z-index: 1; }

#current-promotion {
  position: absolute;
  bottom: 110%;
  border: solid thin;
  left: -120%;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  transition: left 0.4s ease;
  color: blue;
  z-index: -1; }
  #current-promotion.display {
    left: 0; }
  #current-promotion.no-current {
    color: darkgrey; }
  #current-promotion.many-promotions {
    max-height: 65px;
    z-index: 1;
    overflow: hidden; }
    #current-promotion.many-promotions::after {
      content: '-- More --';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center; }
    #current-promotion.many-promotions .possible-promotion:nth-child(3) {
      visibility: hidden; }
    #current-promotion.many-promotions:hover {
      max-height: none;
      overflow: auto; }
      #current-promotion.many-promotions:hover::after {
        display: none; }
      #current-promotion.many-promotions:hover .possible-promotion:nth-child(3) {
        visibility: visible; }
  #current-promotion ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    #current-promotion ul .possible-promotion {
      color: darkgrey;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre; }
  @media (min-width: 900px) {
    #current-promotion {
      left: auto;
      right: -120%;
      width: 90%;
      margin: 0 auto;
      transition: right 1s ease; }
      #current-promotion.display {
        left: auto;
        right: 5%; } }

#sale-summary .sale-note {
  position: absolute;
  top: 0;
  right: 8px;
  font-size: 1.5em;
  z-index: 2; }
  #sale-summary .sale-note .icon {
    display: inline-block;
    text-align: center;
    width: 0;
    transition: width 1s ease;
    overflow: hidden;
    cursor: pointer; }
  #sale-summary .sale-note.display-internal .internal {
    width: 22px; }
  #sale-summary .sale-note.display-external .external {
    width: 22px; }
  #sale-summary .sale-note .note {
    width: 90%;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 170px;
    border: solid thin;
    box-sizing: border-box;
    padding: 8px;
    opacity: 0;
    white-space: pre;
    font-size: 1rem;
    transition: opacity 1s ease;
    background: url("/imgs/general/backgrounds/concrete_seamless.png");
    pointer-events: none; }
    @media (min-width: 900px) {
      #sale-summary .sale-note .note {
        width: 380px;
        right: 10px;
        left: auto; } }
    @media (min-width: 1200px) {
      #sale-summary .sale-note .note {
        width: 480px; } }
  #sale-summary .sale-note.display-note .note {
    opacity: 1;
    pointer-events: auto; }
#sale-summary .sale-summary-row span {
  display: inline-block; }
#sale-summary .sale-summary-row span:first-child {
  width: 80px; }
#sale-summary .sale-summary-quantity-row {
  margin-bottom: 8px; }
#sale-summary .sale-summary-total-row {
  position: absolute;
  right: -8px;
  bottom: 60px;
  font-weight: bold;
  text-align: center;
  width: 50%; }
  #sale-summary .sale-summary-total-row #sale-summary-total {
    font-size: 2em; }
#sale-summary .sale-summary-balance-row {
  display: none; }
#sale-summary.display-balance .sale-summary-total-row {
  bottom: 88px;
  font-weight: normal;
  font-size: 1.2em;
  text-align: right;
  right: 16px;
  width: auto; }
  #sale-summary.display-balance .sale-summary-total-row span {
    width: 100px;
    display: inline-block; }
  #sale-summary.display-balance .sale-summary-total-row p {
    display: inline-block;
    min-width: 100px; }
  #sale-summary.display-balance .sale-summary-total-row #sale-summary-total {
    font-size: 1em; }
#sale-summary.display-balance .sale-summary-balance-row {
  display: block;
  position: absolute;
  right: 16px;
  bottom: 60px;
  font-weight: bold;
  text-align: right;
  font-size: 1.5em; }
  #sale-summary.display-balance .sale-summary-balance-row span {
    width: 100px;
    display: inline-block; }
  #sale-summary.display-balance .sale-summary-balance-row p {
    display: inline-block;
    min-width: 100px; }

#sale-actions {
  margin-top: 8px;
  /*
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  */
  /*
  @media (min-width: 500px) {
      min-width: 200px;
  }
  */ }
  #sale-actions ul {
    padding: 0;
    margin: 0;
    /*
    width: 100%;
    height: 100%;
    */ }
    #sale-actions ul a {
      /*
      border: solid thin;
      margin-right: $small-padding;
      padding: $small-padding;
      display: inline-block;
      */ }

.sell-button {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
    /*
    width: 100%;
    height: 100%;
    margin-top: 0;

    background: transparent;
    border: none;
    */ }

@media (min-width: 900px) {
  #sale-left {
    width: calc(100% - 400px); } }
@media (min-width: 1200px) {
  #sale-left {
    width: calc(100% - 500px); } }

@media (min-width: 900px) {
  #sale-right {
    border-left: solid thin;
    width: 400px;
    position: fixed;
    right: 0;
    top: 50px;
    bottom: 0;
    transition: top 0.5s ease;
    background: url("/imgs/general/backgrounds/lined_paper.png"); } }
@media (min-width: 1200px) {
  #sale-right {
    width: 500px; } }
#sale-right.loggedout {
  top: 0; }

#register-select .outlet-registers .outlet {
  text-align: center; }
#register-select .outlet-registers .registers .register {
  padding: 8px;
  border: solid thin;
  margin-top: 8px; }
#register-select .outlet-registers:not(:first-child) {
  margin-top: 8px; }

#sale-complete {
  max-width: 800px;
  box-sizing: border-box;
  position: fixed;
  background: white;
  border-top: thick solid #0097A7;
  width: 90%;
  opacity: 0;
  z-index: 10;
  top: 30%;
  left: 0;
  right: 0;
  margin: auto; }
  #sale-complete h2 {
    text-align: center;
    padding: 8px; }
  #sale-complete .content {
    padding: 8px; }
  #sale-complete .loyalty {
    text-align: center; }
    #sale-complete .loyalty div {
      margin-bottom: 4px; }
    @media (min-width: 600px) {
      #sale-complete .loyalty {
        display: flex;
        width: 100%;
        flex-direction: row;
        padding: 8px;
        box-sizing: border-box;
        color: #555;
        justify-content: space-between; }
        #sale-complete .loyalty div {
          margin-bottom: 0; }
        #sale-complete .loyalty .title {
          width: 180px;
          display: inline-block; } }
  #sale-complete .total {
    text-align: center; }
    #sale-complete .total span {
      font-size: 1.5rem; }
  #sale-complete .payment .amount {
    text-align: center;
    margin: 8px 0;
    /*
    i {
        border: solid thin;
        border-right: 0;
        height: 30px;
        width: 30px;
        vertical-align: middle;
        box-sizing: border-box;
        font-size: 1.3em;
        line-height: 30px;
        color: #999;
        cursor: pointer;
    }
    */
    /*
    input {
        font-size: 0.8em;
        padding: 0.5em;
        box-sizing: border-box;
        height: 30px;
    }
    */ }
    #sale-complete .payment .amount i {
      font-size: 2em;
      border: solid 1px;
      cursor: pointer;
      vertical-align: middle;
      border-right: none;
      color: #999;
      height: 46px;
      width: 50px;
      line-height: 46px;
      display: inline-block;
      box-sizing: border-box; }
    #sale-complete .payment .amount .amount-wrapper {
      position: relative;
      display: inline-block;
      vertical-align: middle; }
      #sale-complete .payment .amount .amount-wrapper::before {
        content: '$';
        color: #999;
        font-size: 1.5rem;
        position: relative;
        margin-right: -24px; }
    #sale-complete .payment .amount input {
      font-size: 1.5rem;
      box-sizing: border-box;
      padding: 8px;
      padding-left: 24px;
      width: auto;
      max-width: 200px;
      border: solid 1px #999;
      height: 46px; }
    #sale-complete .payment .amount input[type=number]::-webkit-inner-spin-button,
    #sale-complete .payment .amount input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0; }
  #sale-complete .methods {
    text-align: center; }
    #sale-complete .methods .method {
      font-size: 2em;
      display: block;
      margin: 8px auto;
      background: #444;
      transition: background 0.4s ease; }
      #sale-complete .methods .method:hover {
        background: #0097A7; }
      #sale-complete .methods .method.disabled {
        background: #999; }
    @media (min-width: 600px) {
      #sale-complete .methods {
        text-align: left; }
        #sale-complete .methods .method {
          margin-right: 16px;
          display: inline-block; } }
  #sale-complete .account-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-top: solid 1px #ccc;
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    color: #555;
    margin-top: 8px; }
  #sale-complete .after {
    position: absolute;
    top: 0;
    margin: auto;
    left: 110%;
    transition: left 1s ease, opacity 1s ease, width 1s ease;
    box-sizing: border-box;
    z-index: 2;
    width: 200px;
    background: #fff;
    opacity: 1;
    overflow: hidden; }
    #sale-complete .after .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: space-between;
      padding: 0; }
    #sale-complete .after.hidden {
      left: 100%;
      opacity: 0;
      width: 0; }
    #sale-complete .after .row {
      display: table-row;
      width: 100%; }
    #sale-complete .after .cell {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;
      color: black;
      padding: 8px;
      width: 30%;
      font-size: 2.5em;
      box-sizing: border-box; }
      #sale-complete .after .cell.selected {
        background: #777; }
  #sale-complete.shown {
    animation: completesaleanimation 1000ms linear both;
    transform-origin: 50% 50%;
    animation-fill-mode: both;
    opacity: 1; }
  @media (min-width: 1200px) {
    #sale-complete.after-shown {
      left: -20%; } }
  @media (min-width: 700px) {
    #sale-complete.after-shown {
      max-width: 600px;
      left: -30%; } }
  @media (max-width: 900px) {
    #sale-complete {
      left: 0; }
      #sale-complete .fa-calculator {
        display: none !important; }
      #sale-complete .after {
        display: none !important; } }

/* Generated with Bounce.js. Edit at https://goo.gl/y3FSYm */
@keyframes completesaleanimation {
  0% {
    transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.4% {
    transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.7% {
    transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.81% {
    transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.41% {
    transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% {
    transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.61% {
    transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.11% {
    transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.52% {
    transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.72% {
    transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.32% {
    transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.32% {
    transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% {
    transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% {
    transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.93% {
    transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  35.54% {
    transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.74% {
    transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.04% {
    transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.44% {
    transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% {
    transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  59.86% {
    transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.26% {
    transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.28% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  85.49% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90.69% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }
#payment-stack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: url("/imgs/general/backgrounds/concrete_seamless.png");
  height: 100px;
  transition: top 1s ease;
  transition-delay: 1s;
  z-index: 10; }
  #payment-stack.hidden {
    top: -110px; }
  #payment-stack .payment {
    height: 100px;
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: solid thin;
    */
    display: inline-block;
    width: 150px;
    text-align: center;
    line-height: 50px;
    border-right: solid thin;
    position: relative; }
    #payment-stack .payment .method {
      display: block; }
    #payment-stack .payment .remove {
      font-size: 1.5em;
      position: absolute;
      top: 8px;
      right: 8px;
      cursor: pointer;
      height: 24px; }
      #payment-stack .payment .remove i {
        vertical-align: top; }

#potential-payment-stack {
  display: none; }
  @media (min-width: 900px) {
    #potential-payment-stack {
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      background: url("/imgs/general/backgrounds/concrete_seamless.png");
      width: 200px;
      transition: right 1s ease;
      z-index: 10; }
      #potential-payment-stack.hidden {
        right: -210px;
        z-index: 10;
        opacity: 1;
        transition: right 1s ease; }
      #potential-payment-stack .potential-payment {
        height: 14.28vh;
        border-bottom: solid thin;
        text-align: center;
        cursor: pointer;
        line-height: 14.28vh; } }

#sale-change {
  position: fixed;
  top: 110px;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 2em;
  display: none; }
  #sale-change.display {
    display: block; }
  #sale-change h2 {
    line-height: 0.8;
    font-weight: normal;
    font-size: 1.3em; }
  #sale-change .content {
    font-size: 1.7em;
    font-weight: bold; }
  @media (min-width: 900px) {
    #sale-change {
      top: 58px;
      width: 400px; } }
  @media (min-width: 1200px) {
    #sale-change {
      width: 500px; } }

#receipt-template {
  position: fixed;
  width: 300px;
  width: 8cm;
  right: 0;
  left: 0;
  top: calc(45vh - 38px);
  margin: auto;
  display: none;
  font-size: 2em; }
  #receipt-template select {
    width: 80%;
    text-align: center;
    text-align-last: center;
    font-size: 0.8em;
    border: none;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer; }
  #receipt-template div {
    cursor: pointer; }
  @media (max-height: 600px) {
    #receipt-template {
      display: none !important; } }
  @media (min-height: 600px) {
    #receipt-template {
      top: calc(40vh - 38px); } }
  @media (min-height: 700px) {
    #receipt-template {
      top: calc(33vh - 38px); } }
  @media (min-height: 800px) {
    #receipt-template {
      top: calc(30vh - 38px); } }
  @media (min-height: 900px) {
    #receipt-template {
      top: calc(24.5vh - 38px); } }
  @media (min-width: 900px) {
    #receipt-template {
      right: 50px;
      left: auto; } }
  @media (min-width: 1200px) {
    #receipt-template {
      right: 100px; } }
  @media (min-width: 900px) and (min-height: 800px) {
    #receipt-template {
      top: calc(24vh - 38px); } }
  @media (min-height: 950px) and (min-width: 900px) {
    #receipt-template {
      top: calc(20vh - 38px); } }
  #receipt-template.displayed {
    display: flex;
    justify-content: space-between; }

#previous-receipt {
  border: solid thin;
  height: 40vh;
  top: 30vh;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  width: 300px;
  width: 8cm;
  margin: auto;
  display: none;
  cursor: pointer;
  overflow: auto;
  font-size: 12px;
  background: white; }
  @media (max-height: 600px) {
    #previous-receipt {
      display: none !important; } }
  @media (min-width: 900px) {
    #previous-receipt {
      right: 50px;
      left: auto; } }
  @media (min-width: 1200px) {
    #previous-receipt {
      right: 100px; } }
  @media (min-height: 600px) {
    #previous-receipt {
      top: 30vh; } }
  @media (min-height: 700px) {
    #previous-receipt {
      height: 50vh;
      top: 18vh; } }
  @media (min-height: 800px) {
    #previous-receipt {
      height: 60vh;
      top: 20vh; } }
@media (min-width: 900px) and (min-height: 800px) {
  #previous-receipt {
    height: 65vh;
    top: 15vh; } }

  @media (min-height: 950px) {
    #previous-receipt {
      top: 10vh; } }
  #previous-receipt.displayed {
    display: block; }
  #previous-receipt::-webkit-scrollbar {
    width: 12px; }
  #previous-receipt::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); }
  #previous-receipt::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); }
  #previous-receipt p {
    margin: 1em 0;
    text-align: center; }
  #previous-receipt .section {
    margin: 8px 0;
    white-space: pre; }
    #previous-receipt .section p {
      text-align: inherit; }
  #previous-receipt .type-text {
    font-family: monospace;
    white-space: pre; }
  #previous-receipt .type-full {
    font-family: "Roboto", sans-serif;
    padding: 8px; }
  #previous-receipt .type-a4 {
    display: none; }
  #previous-receipt .a4-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center; }
  #previous-receipt img {
    width: 100%; }
  #previous-receipt table {
    width: 100%;
    border: 0;
    margin: 0;
    background: transparent; }
    #previous-receipt table thead {
      border-bottom: solid thin;
      border-top: solid thin; }
      #previous-receipt table thead th {
        background: transparent;
        color: black;
        text-transform: none;
        border: none;
        padding: 4px 0;
        text-align: left;
        font-weight: normal; }
        #previous-receipt table thead th:last-child {
          text-align: right; }
    #previous-receipt table tr:hover {
      background: transparent; }
    #previous-receipt table td {
      border: none;
      color: black;
      padding: 0; }
      #previous-receipt table td:last-child {
        text-align: right; }
      #previous-receipt table td:only-child {
        text-align: left; }
  #previous-receipt .product-note {
    white-space: pre; }
  #previous-receipt .spacer {
    height: 8px; }
  #previous-receipt .half-spacer {
    height: 4px; }
  #previous-receipt .bold {
    font-weight: bold; }
  #previous-receipt p {
    text-align: center; }
  #previous-receipt #receipt_barcode_parent {
    text-align: center; }
  #previous-receipt #receipt_barcode {
    width: auto; }
  #previous-receipt .bottom-line + tr td {
    border-top: solid thin; }
  #previous-receipt .total-line td {
    border-top: double; }
  #previous-receipt .receipt-summary {
    width: 60%;
    margin: 0 0 0 auto; }
    #previous-receipt .receipt-summary td {
      padding-left: 8px; }
  #previous-receipt #receipt-append {
    white-space: pre; }

#receipt-actions {
  position: fixed;
  top: 85vh;
  right: 0;
  left: 0;
  width: 100%;
  display: none;
  text-align: center; }
  @media (min-height: 800px) {
    #receipt-actions {
      top: 90vh; } }
  @media (min-width: 900px) {
    #receipt-actions {
      right: 50px;
      width: 300px;
      width: 8cm;
      left: auto; } }
  @media (min-width: 1200px) {
    #receipt-actions {
      right: 100px; } }
  #receipt-actions.displayed {
    display: block; }
  #receipt-actions .button {
    margin-right: 8px;
    margin-top: 4px; }

#receipt-enter-email {
  max-width: 510px; }
  #receipt-enter-email #receipt-email-address {
    font-size: 2em;
    box-sizing: border-box;
    vertical-align: middle; }

#sale-note textarea, #held-sale-note textarea {
  width: 100%;
  min-height: 200px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 100%; }

#sale-cashout {
  text-align: center; }
  #sale-cashout input {
    width: 100px;
    font-size: 1.2em; }
  #sale-cashout table {
    margin: 0 auto;
    font-size: 1.2em; }
    #sale-cashout table td:first-child {
      text-align: right; }
    #sale-cashout table td:last-child {
      text-align: left; }
  #sale-cashout .button {
    clear: both; }

#sale-display-products {
  max-width: 870px; }
  #sale-display-products .product-pagination {
    display: none; }
  #sale-display-products .display-type {
    position: absolute;
    left: 8px;
    top: 0;
    font-size: 1.7em;
    cursor: pointer;
    line-height: 50px; }
    #sale-display-products .display-type div {
      display: inline-block; }
  #sale-display-products .content {
    height: 80vh;
    max-height: 80vh;
    min-height: 80vh;
    overflow: auto;
    width: 100%;
    box-sizing: border-box; }
  #sale-display-products .page {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between; }
  #sale-display-products .product {
    width: 200px;
    border: solid thin;
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: 8px;
    margin-right: 8px;
    position: relative; }
    #sale-display-products .product .image {
      height: 100px;
      width: 200px;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;
      z-index: -1;
      justify-content: center;
      align-items: center; }
      #sale-display-products .product .image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; }
    #sale-display-products .product .name {
      height: 100px;
      width: 200px;
      background: #00000090;
      padding: 8px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white; }
  #sale-display-products.paginated .product-pagination {
    display: block;
    position: relative;
    bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 1.5em; }
    #sale-display-products.paginated .product-pagination div {
      cursor: pointer;
      user-select: none; }
  #sale-display-products.paginated .page-not-visible {
    display: none; }
  #sale-display-products.prevent-close .close {
    display: block; }
  @media (min-width: 900px) {
    #sale-display-products.supermarket-mode {
      left: 8px;
      right: 400px;
      transform: translate(0, -50%);
      width: calc(100vw - 400px - 16px);
      height: 90vh;
      top: calc(50% + 8px);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
      max-width: none; } }
  @media (min-width: 1200px) {
    #sale-display-products.supermarket-mode {
      right: 500px;
      width: calc(100vw - 500px - 16px); } }
  #sale-display-products.supermarket-mode .product-pagination {
    bottom: 0; }

#sale-associate-barcode-list .search input {
  border: 0;
  border-bottom: solid thin;
  background: transparent;
  font-size: 1em;
  width: 100%; }
#sale-associate-barcode-list .products {
  height: 70vh;
  overflow: auto; }
  #sale-associate-barcode-list .products .product {
    padding: 8px;
    border-bottom: solid thin;
    cursor: pointer; }
    #sale-associate-barcode-list .products .product.selected {
      background: #0097A7; }
    #sale-associate-barcode-list .products .product:hover {
      background: #ccc; }

#multiple-barcodes-products {
  margin: 0;
  padding: 0;
  list-style: none; }
  #multiple-barcodes-products li {
    border: solid thin;
    padding: 8px;
    cursor: pointer;
    margin-top: 4px; }
    #multiple-barcodes-products li:hover, #multiple-barcodes-products li:focus {
      color: #0097A7; }

#small-frame {
  max-width: 500px;
  max-height: 600px; }
  #small-frame iframe {
    border: none; }

#sale-login {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: top 0.5s ease, right 0.5s ease, opacity 0.5s ease;
  background: white;
  background: url("/imgs/general/backgrounds/login-background.png") no-repeat center center fixed;
  background-size: cover;
  opacity: 0;
  z-index: -10; }
  #sale-login.display {
    z-index: 4;
    opacity: 1; }
  #sale-login.small {
    right: 400px;
    transition: none; }
    @media (min-width: 1200px) {
      #sale-login.small {
        right: 500px; } }
  #sale-login.type-type #sale-login-container {
    height: 160px;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    max-width: 400px; }
  #sale-login.type-type.passworded #sale-login-container {
    height: 220px; }
  #sale-login.type-click {
    display: flex;
    justify-content: center;
    align-items: center; }
    #sale-login.type-click #sale-login-container {
      position: relative; }

#sale-login-container {
  margin: auto;
  width: 90%;
  background: url("/imgs/general/backgrounds/concrete_seamless.png");
  padding: 8px;
  box-sizing: border-box;
  border: solid thin; }
  #sale-login-container h2 {
    text-align: center; }
  #sale-login-container label {
    display: block; }
  #sale-login-container input {
    width: 100%;
    box-sizing: border-box;
    font-size: 2em; }
  #sale-login-container button {
    display: inline-block;
    width: 100%; }
  #sale-login-container .login-user {
    width: 150px;
    height: 150px;
    border: solid thin;
    margin-right: 8px;
    display: inline-block;
    text-align: center;
    margin-top: 8px;
    cursor: pointer;
    user-select: none; }
    #sale-login-container .login-user .image {
      height: 120px;
      width: 100%;
      padding: 8px;
      box-sizing: border-box; }
    #sale-login-container .login-user img {
      max-width: 100%;
      max-height: 100%; }
    #sale-login-container .login-user.selected {
      border-color: #0097A7;
      color: #0097A7; }

#sign-in-password {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 8px;
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease; }
  #sign-in-password.display {
    height: 120px; }

@keyframes logoColours {
  0% {
    color: black; }
  10% {
    color: #f44336; }
  20% {
    color: #9C27B0; }
  30% {
    color: #3F51B5; }
  40% {
    color: #03A9F4; }
  50% {
    color: #009688; }
  60% {
    color: #8BC34A; }
  70% {
    color: #FFEB3B; }
  80% {
    color: #FF9800; }
  90% {
    color: white; }
  100% {
    color: black; } }
#sign-in-cloudpos-logo {
  text-align: center;
  font-size: 2em;
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  animation-duration: 60s;
  animation-name: logoColours;
  animation-iteration-count: infinite; }

#sale-login-message {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
  width: 90%;
  max-width: 400px;
  border: solid thin;
  padding: 8px;
  opacity: 0;
  transition: opacity 1s ease, top 1s ease;
  margin: auto; }
  #sale-login-message i {
    margin-right: 8px; }
  #sale-login-message.display {
    top: 20%;
    opacity: 1; }
  #sale-login-message.error {
    background: #f2dede;
    border-color: #ebcccc;
    color: #a94442; }
  #sale-login-message.info {
    background-color: #fcf8e3;
    border-color: #faf2cc;
    color: #8a6d3b; }

.frame {
  height: 80vh;
  padding: 0;
  border: none; }
  .frame .content {
    padding: 0;
    width: 100%;
    height: 100%; }
    .frame .content iframe {
      width: 100%;
      height: 100%; }

#training-sales-mode, #current-price-set {
  position: fixed;
  top: 0;
  height: 50px;
  left: 100px;
  font-size: 3vw;
  z-index: 2;
  pointer-events: none;
  color: #0ee8ff;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 8px;
  box-sizing: border-box; }
  @media (min-width: 900px) {
    #training-sales-mode, #current-price-set {
      padding: 0;
      top: auto;
      bottom: 0;
      left: 0;
      right: 400px;
      font-size: 2.5em;
      background: rgba(0, 0, 0, 0.6);
      line-height: normal;
      height: auto; } }
  @media (min-width: 1200px) {
    #training-sales-mode, #current-price-set {
      right: 500px; } }

@media (min-width: 900px) {
  main {
    width: calc(100% - 100px);
    margin-left: 50px; } }

.live-profit {
  display: none; }

#camera-selector {
  text-align: center; }

#camera-selector-select {
  font-size: 2em;
  width: 50%; }

#camera-scanning {
  max-width: 90vw;
  max-height: calc(90vh + 40px); }
  #camera-scanning video {
    max-width: 90vw;
    max-height: 90vh; }

#safe-drop {
  text-align: center; }
  #safe-drop button {
    margin: 0; }
    #safe-drop button:first-child {
      margin-right: 8px; }

#safe-drop-amount {
  width: 100%;
  box-sizing: border-box; }

#assign-customer-input {
  width: 100%; }

.animated, .zoomOutRight, .bounceInRight {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }
.zoomOutRight {
  animation-name: zoomOutRight; }

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  to {
    -webkit-transform: none;
    transform: none; } }
.bounceInRight {
  animation-name: bounceInRight; }

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