:root
{
     --bs-spot-border: 1px solid;
}
     

/* seat chart */

     .seatmap-outer-wrapper {
          width: 100%;
          height: 100%;
          overflow: hidden; /* Prevent scrollbars on zoom */
          position: relative;
          touch-action: none;
          transform-origin: center center; /* Needed for smooth zooming */
          display: flex;
          flex-direction: column;
     }


     .seat-map {
          width: max-content;
          height: max-content;
          touch-action: none;
          cursor: grab;
          width: 100%;
     }




/* stage */

     .seating-stage {
         position: absolute;
         top: -1px;
         left: 50%;
         transform: translateX(-50%);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: 2.7rem;
         z-index: 999;
     }


     .stage-outside
     {
          transform: translateY( 0 ) translateX( -50% );
          bottom: 6px;
     }

     .stage-inside
     {
          transform: translateY( 0 ) translateX( -50% );
          top: 7px;
     }


/* charts */

     div.seatCharts-row {
          display: flex;
         height: fit-content;
         padding: 0;
         margin: 0;
     }
     
     div.seatCharts-seat
     {
          margin: 0;
          width: 2.75rem;
     }

     div.seatCharts-space
     {
          margin: 0;
          width: auto;
     }

     div.seatCharts-seat, div.seatCharts-space {
          flex: 1 0 0%;
          align-self: center !important;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          text-align: center;
          display: flex; /* Centers content inside */
          z-index: +1;
          transition: all 0.3s !important;
          height: 2.75rem;
     }
     
     div.seatCharts-cell {
         text-align: center;
         font-size: 1rem;
         line-height: unset;
     }
     
     div.seatCharts-space {
          background-color: transparent;
          pointer-events: none;
     }

     div.seatCharts-seat {
          color: var(--bs-primary);
          position: relative;
          font-weight: bold;
     }

     div.seatCharts-seat.available {
          background: rgba(0,0,0,.05);
     }

     div.seatCharts-seat.unavailable {
          opacity: .2;
     }

     div.seatCharts-seat.stage {
          pointer-events: none;
          opacity: .0;
          cursor: not-allowed;
     }

     div.seatCharts-seat.selected, div.seatCharts-seat.focused {
          color: #fff;
     }

     div.seatCharts-seat.available, div.seatCharts-seat.unavailable, div.seatCharts-seat.vip, div.seatCharts-seat.selected, div.seatCharts-seat.focused {
          background: transparent;
     }

     .seatCharts-row:not(:first-child) div.seatCharts-seat.available, .seatCharts-row:not(:first-child) div.seatCharts-seat.unavailable, .seatCharts-row:not(:first-child) div.seatCharts-seat.vip, .seatCharts-row:not(:first-child) div.seatCharts-seat.selected, .seatCharts-row:not(:first-child) div.seatCharts-seat.focused {
          /*z-index: 50;*/
     }

     div.seatCharts-seat::before, 
     div.seatCharts-seat.available::before, 
     div.seatCharts-seat.unavailable::before, 
     div.seatCharts-seat.selected::before {
          height: 2.75rem;
          width: 2.75rem;
          min-height: 2.75rem;
          min-width: 2.75rem;
          content: "";
          position: absolute;
          z-index: -1;
          border-radius: 50%;
     }

     div.seatCharts-seat.available::before {
          background: rgba(255,255,255,.5);
          border: var(--bs-spot-border) var( --bs-primary );
     }
       
     div.seatCharts-seat.selected::before {
          background: var(--bs-primary);
          border: var(--bs-spot-border) var(--bs-primary);
     }

     div.seatCharts-seat.focused::before {
          background: var(--bs-primary);
     }
     
     div.seatCharts-seat.unavailable::before
     {}
     

     div.seatCharts-seat.text-primary::before 
     {
          border: var(--bs-spot-border) var(--bs-primary) !important;
          background: rgba(255,255,255,.5);
     }
     
     div.seatCharts-seat.text-primary.selected::before 
     {
          border: var(--bs-spot-border) var(--bs-primary) !important;
          background: rgba(var(--bs-primary),1) !important;
     }
     

     /* info */
     
          div.seatCharts-seat.spot-info
          {
               color: var(--bs-info);
          }

          div.seatCharts-seat.spot-info.focused
          {
               color: #fff;
          }
          
          div.seatCharts-seat.spot-info::before
          {
               border: var(--bs-spot-border) rgb( var(--bs-info-rgb), 1) !important;
               background: rgba(255,255,255,.5);
          }

          div.seatCharts-seat.spot-info.selected::before, div.seatCharts-seat.spot-info.focused::before
          {
               border: var(--bs-spot-border) rgb( var(--bs-info-rgb), 1) !important;
               background: rgba(var(--bs-info-rgb), 1);
          }



     /* success */

          div.seatCharts-seat.spot-success
          {
               color: var(--bs-success);
          }

          div.seatCharts-seat.spot-success.focused
          {
               color: #fff;
          }
          
          div.seatCharts-seat.spot-success::before
          {
               border: var(--bs-spot-border) rgb( var(--bs-success-rgb), 1) !important;
               background: rgba(255,255,255,.5);
          }

          div.seatCharts-seat.spot-success.selected::before, div.seatCharts-seat.spot-success.focused::before
          {
               border: var(--bs-spot-border) rgb( var(--bs-success-rgb), 1) !important;
               background: rgba(var(--bs-success-rgb), 1);
          }


     /* warning */

          div.seatCharts-seat.spot-warning
          {
               color: var(--bs-warning);
          }

          div.seatCharts-seat.spot-warning.focused
          {
               color: #fff;
          }
          
          div.seatCharts-seat.spot-warning::before
          {
               border: var(--bs-spot-border) rgb( var(--bs-warning-rgb), 1) !important;
               background: rgba(255,255,255,.5);
          }

          div.seatCharts-seat.spot-warning.selected::before, div.seatCharts-seat.spot-warning.focused::before
          {
               border: var(--bs-spot-border) rgb( var(--bs-warning-rgb), 1) !important;
               background: rgba(var(--bs-warning-rgb), 1);
          }


     
     /* danger */

          div.seatCharts-seat.spot-danger
          {
               color: var(--bs-danger);
          }

          div.seatCharts-seat.spot-danger.focused
          {
               color: #fff;
          }
          
          div.seatCharts-seat.spot-danger::before
          {
               border: var(--bs-spot-border) rgb( var(--bs-danger-rgb), 1) !important;
               background: rgba(255,255,255,.5);
          }

          div.seatCharts-seat.spot-danger.selected::before, div.seatCharts-seat.spot-danger.focused::before
          {
               border: var(--bs-spot-border) rgb( var(--bs-danger-rgb), 1) !important;
               background: rgba(var(--bs-danger-rgb), 1);
          }

     
     /* muted */

          div.seatCharts-seat.muted::before {
               border: var(--bs-spot-border) rgba( var(--bs-dark-rgb),.03) !important;
               background: rgba(255,255,255,.5);
          }

          div.seatCharts-seat.muted.focused::before {
               border: transparent !important;
               background: rgba( var(--bs-dark-rgb),.03);
          }


     /* transparent */

          div.seatCharts-seat.transparent::before {
               border: transparent !important;
               background: transparent !important;
          }

          div.seatCharts-seat.transparent.focused::before {
               border: transparent !important;
               background: transparent !important;
          }

/* legend */

     .seatCharts-legendItem .seatCharts-seat
     {
          background: transparent;
     }

     .seatCharts-legendItem .seatCharts-seat::before
     {
             height: 1.5rem;
              width: 1.5rem;
              min-height: 1.5rem;
              min-width: 1.5rem;
              content: "";
              position: absolute;
              z-index: -1;
              border-radius: 50%;
              margin-left: .5rem;
              margin-top: .6rem;
     }

     .seatCharts-legendItem .seatCharts-legendDescription 
     {
          text-align: left !important;
          margin-left: 1rem;
     }




     /* Tablets and smaller (max-width: 768px) */

          @media (max-width: 768px) {

              div.seatCharts-seat::before, div.seatCharts-seat.available::before, div.seatCharts-seat.unavailable::before, div.seatCharts-seat.selected::before {
                    height: 2.75rem,
                    width: 2.75rem,
                    min-height: 2.75rem,
                    min-width: 2.75rem
              }

          }

          /* Mobile devices (max-width: 480px) */
          @media (max-width: 480px) {
              div.seatCharts-seat::before, div.seatCharts-seat.available::before, div.seatCharts-seat.unavailable::before, div.seatCharts-seat.selected::before {
                    height: 2.75rem,
                    width: 2.75rem,
                    min-height: 2.75rem,
                    min-width: 2.75rem
              }
          }

          /* Small mobile screens (max-width: 360px) */
          @media (max-width: 360px) {
              div.seatCharts-seat, div.seatCharts-space {
                  width: 2.75rem,
                  height: 2.75rem
              }
          }



/* noUi */

     .noUi-handle {
          width: 1px !important;
          border: 5px solid transparent !important;
          background: transparent !important;
     }

/* type sizes for the shared spot markup
   tickets.site.js and tickets.seat.charts.js render the same html into the admin panel
   (Modernize) and the public site (Bootstrap/Porto). Both frameworks define fs-1..fs-8
   with different values and in opposite directions, so that markup cannot use them and
   look right in both. These are explicit and framework independent, and this sheet is
   loaded by the panel and by the site. */

.tf-fs-tiny { font-size: .75rem !important; }
.tf-fs-xs   { font-size: .75rem !important; }
.tf-fs-sm   { font-size: .875rem !important; }
.tf-fs-base { font-size: 1rem !important; }
.tf-fs-md   { font-size: 1.125rem !important; }
.tf-fs-lg   { font-size: 2rem !important; }
.tf-fs-xl   { font-size: 2.5rem !important; }