body
{
   overflow-x: visible;
}

#combo-steps-container .combo-step
{
   left: -2px;
   height: 95px;
}

.combo-step::before, 
.combo-step::after
{
   position: absolute;
   content: '';
   left: 0px;
   height: 50%;
   width: 100%;
   border-top: 2px solid;
   border-bottom: 2px solid;
   border-left: 3px solid; /* thicker border as skew makes them look thin */
   border-right: 3px solid;
   background-image: linear-gradient(90deg, rgba(239,239,239,1) 0%, rgba(221,221,221,1) 50%, rgba(205,205,205,1) 100%);
   opacity: 0.25;
   z-index: -1;
}

.combo-step:before
{
   transform: skew(45deg);
   top: 0px;
   border-bottom: none;
   transform-origin: top left;
}

.combo-step:after
{
   transform: skew(-45deg);
   bottom: 0px;
   border-top: none;
   transform-origin: bottom left;
}

.combo-step div 
{
   padding-left: 55px;
}

.combo-step.active:before,
.combo-step.active:after
{
   background: rgba(0, 0, 0, 0.6);
}

.large-combo-font
{
   font-size: 20px;
}

.combo-finished-image
{
   width: 35px;
}

.combo-category .card-header
{
   padding-bottom: 1px;
}

.item-selected-image
{
   right: 0;
   bottom: 0;
}

@media screen and (max-width: 767px)
{
   .category-items
   {
      height: 60vh;
      overflow-y: scroll;
   }
}
@media screen and (min-width: 1024px)
{
   #combo-steps-container
   {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1050;
      background-color: white;
   }
}