[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak {
            display: none !important;
        }

        .allBackground {
            background-color: #f8f8f8;
        }

        .navbar-fixed-top {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1030;
            min-height: 45px;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            padding-left: 5%;
        }

        .well {
            cursor:pointer;
        }

        .card-block {
            padding-left: 3px;
            padding-right: 3px;
        }

        .navbar-main-img {
            /*padding-left:5px;
            padding-top:3px;
            padding-bottom:3px;*/
            height:55px;
            width:55px;
        }

        .navbar-name{
            margin-left:10px;
            font-size:xx-large;
        }

        /* Split the screen in half */
        .split {
          height: 100%;
          position: fixed;
          z-index: 1;
          top: 45px;
          overflow-x: hidden;
          margin-top: 15px;
        }

        /* Control the left side */
        .left {
          left: 0;
          width: 75%;
          transition: 0.4s;
          padding-bottom: 100px;
        }

        /* Control the right side */
        .right {
          right: 0;
          width: 25%;
          transition: 0.3s;
          padding-bottom: 350px;
        }


        /* Cart toggle vertical offset — narrow viewports drop it slightly */
        .kart-position        { top: 6px;  }
        .kart-position-mobile { top: 26px; }
        @media (max-width: 767px) {
            .kart-position { top: 26px; }
        }



        /* GENERAL LAYOUT AND BACKGROUND */
        .default-md-content {
            overflow: hidden;
            display: inline;
            background-color: none;
        }

        .row {
            margin-left:auto;
            margin-right:auto;
            margin-top: 15px;
        }

        .row-slim {
            margin-top: 5px;
            padding-bottom: 2px;
            border: 0;
            border-bottom: 1px solid #eee;
        }

        /* Product Widget */
        .productWidget {
            border-top: initial;
            padding: 10px;
            text-align: initial;
            background: #eaeaea;
                 /*#B8B8B8;,  #CAE4DB*/

            -webkit-border-radius: 3px;
            border-radius: 3px;
            box-shadow: 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
            min-width: 300px;
        }

        .text-right {
            text-align: right;
        }

        .text-left {
            text-align: left;
        }

        .center-header {
            margin: auto;
            width: 50%;
            margin-bottom: 15px;
            margin-top: 20px;
            text-align: center;
        }

        .subheader {
            margin-top: 10px;
            margin-bottom: 10px;
            padding-top: 5px;
            font-size: 18px;
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
        }

        .error-text {
            color:red;
        }


        #kartToggle {
            position: fixed;
            right: 0;
            top: 6.5%;
            width: 5em;
            /*margin: -2.5em 0 0 0;*/
            z-index: 3;
            /*background: hsla(80, 90%, 40%, 0.7);*/
            /*color: #204d74;*/
            font-weight: bold;
            font-size: larger;
            text-align: left;
            /*border: solid hsla(80, 90%, 40%, 0.5);*/
            border-right: none;
            padding: 0.5em 0.5em 0.5em 1.5em;
            /*box-shadow: 0 1px 3px black;*/
            /*border-radius: 3em 0.5em 0.5em 3em;*/
            cursor:pointer;
        }

        a {
            -webkit-transition: .25s all;
            transition: .25s all;
        }

        .card {
            padding-bottom:10px;
            margin-top:15px;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
            -webkit-transition: .25s box-shadow;
            transition: .25s box-shadow;
            border-radius: 0.3em;
        }

        .card:focus, .card:hover {
            box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
        }

        .card-inverse .card-img-overlay {
            background-color: rgba(51, 51, 51, 0.85);
            border-color: rgba(51, 51, 51, 0.85);
        }

        .card-img-top {
            width: 100%;
            object-fit: cover;
            height: auto;
        }

        .col--{
            text-align:center;
            margin-left:auto;
            margin-right:auto;
        }

        .StripeElement {
          background-color: white;
          height: 40px;
          padding: 10px 12px;
          border-radius: 4px;
          border: 1px solid transparent;
          box-shadow: 0 1px 3px 0 #e6ebf1;
          -webkit-transition: box-shadow 150ms ease;
          transition: box-shadow 150ms ease;
          width: 100%;
        }

        .StripeElement--focus {
          box-shadow: 0 1px 3px 0 #cfd7df;
        }

        .StripeElement--invalid {
          border-color:red;
        }

        .StripeElement--webkit-autofill {
          background-color: #fefde5 !important;
        }

        /* --- Product grid: flexbox so cards in a row stretch to equal height
           and a new row starts cleanly after wrapping. Bootstrap 3's float-based
           columns otherwise snag on taller siblings, leaving large gaps. --- */
        .products-grid {
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 25px;
        }
        .products-grid > [class*="col-"] {
            display: flex;            /* let the .card inside stretch */
        }
        .products-grid > [class*="col-"] > .card {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex: 1;                  /* card fills the column's full height */
        }
        .products-grid .card-footer {
            margin-top: auto;         /* "lo quiero" button pinned to bottom */
        }

        /* --- Category chip-search bar (md-chips + md-autocomplete inside
           #CategorySearch). md-chips already left-aligns the chips and
           flows the input after them; we just give the container a sane
           width, centre it, and pad it away from the rows above/below. --- */
        #CategorySearch {
            max-width: 600px;
            margin: 10px auto;
            padding: 0 15px;
        }
        #CategorySearch md-chips,
        #CategorySearch .md-chips {
            width: 100%;
        }