.clear { clear:both; }

/* Seating map renders inline at the normal .container width — no breakout.
   Earlier we forced the map to 95vw to give Fabric canvases more zoom room,
   but that created a "modal overlay" feel on the main site because the map
   suddenly extended past the page wrapper while the header above stayed
   container-width. Reverted 2026-05-19.
   The min-height needed for Fabric's initial measurement is applied
   inline by JS (renderMap in IMSEventPage2025.js) and removed on the next
   animation frame, so the container can collapse to the actual canvas
   wrapper size — keeps the Load Seating Map button close to the map after
   Close Map (2026-05-20). */

/* The .ticket-panels-wrapper only needs to be a real layout box on
   desktop in modes 1/3, where it becomes a flex container for the
   side-by-side picker + map layout (see @media block above). In every
   other case — modes 0/2 (no side-by-side), or mobile in any mode —
   make the wrapper layout-invisible via display:contents so its
   children inherit the parent's layout context exactly like they did
   before the wrapper was added. Without this, modes 1/3 on mobile
   render the map blank on first show: the extra layout box makes
   container.clientHeight read 0 during the picker→map transition,
   which makes Fabric compute negative scaleY. (Original 2026-05-19
   wrapper change + 2026-05-20 mobile fix.) */
.ticket-panels-wrapper[data-ba-mode="0"],
.ticket-panels-wrapper[data-ba-mode="2"] {
    display: contents;
}
@media (max-width: 767px) {
    .ticket-panels-wrapper {
        display: contents;
    }
}

/* =============================================================================
   Side-by-side map + Best-Available picker layout (Mode 1 / Mode 3)
   2026-05-18
   -----------------------------------------------------------------------------
   .ticket-panels-wrapper has data-ba-mode attribute set from the CFML render:
     - "1" (Both, picker-first) and "3" (Both, Map-First): activate side-by-side
     - "0" (Map Only) and "2" (Auto-Select Only): wrapper has no visual effect
   Desktop ≥768px: flex row, map on the left, picker on the right, both visible.
   Mobile <768px: stacked — picker on top, map hidden until Choose-on-Map fires.
   ============================================================================= */
@media (min-width: 768px) {
    .ticket-panels-wrapper[data-ba-mode="1"],
    .ticket-panels-wrapper[data-ba-mode="3"] {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1rem;
    }
    /* Map area: left column, ~58% width. Override the 95vw breakout above —
       inside a flex parent we need the canvas constrained to its column. */
    .ticket-panels-wrapper[data-ba-mode="1"] #seatingMapArea,
    .ticket-panels-wrapper[data-ba-mode="3"] #seatingMapArea {
        flex: 0 0 calc(58% - 0.5rem);
        max-width: calc(58% - 0.5rem);
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: 0;
        order: 1;
    }
    .ticket-panels-wrapper[data-ba-mode="1"] #venueRegionsArea,
    .ticket-panels-wrapper[data-ba-mode="3"] #venueRegionsArea {
        flex: 0 0 calc(58% - 0.5rem);
        max-width: calc(58% - 0.5rem);
        order: 1;
        /* The inline align="left" attribute on the div left-justifies the
           inline <img> child; text-align overrides it for the side-by-side
           desktop layout so the venue map sits centered in its column. */
        text-align: center;
    }
    /* Collapse the legacy whitespace inside venueRegionsArea so the venue
       image sits right under the region-ticket header instead of floating
       150+px below it. The legacy picture_str (helpers/IMSTemplates.cfc)
       wraps the <img> with <br>s, an empty shoppingCartNoticeDiv, and a
       region-venue-prompt that whitelabels may hide — each <br> adds a
       text line of vertical space. Other downstream containers
       (#tabbedSeatingMapArea, #eventControlsDiv) start empty and only
       fill conditionally. Hiding them in side-by-side cleans up the
       layout without affecting non-side-by-side render paths. */
    .ticket-panels-wrapper[data-ba-mode="1"] #venueRegionsArea br,
    .ticket-panels-wrapper[data-ba-mode="3"] #venueRegionsArea br {
        display: none;
    }
    .ticket-panels-wrapper[data-ba-mode="1"] #venueRegionsArea #shoppingCartNoticeDiv:empty,
    .ticket-panels-wrapper[data-ba-mode="3"] #venueRegionsArea #shoppingCartNoticeDiv:empty,
    .ticket-panels-wrapper[data-ba-mode="1"] #venueRegionsArea #tabbedSeatingMapArea:empty,
    .ticket-panels-wrapper[data-ba-mode="3"] #venueRegionsArea #tabbedSeatingMapArea:empty,
    .ticket-panels-wrapper[data-ba-mode="1"] #venueRegionsArea #eventControlsDiv:empty,
    .ticket-panels-wrapper[data-ba-mode="3"] #venueRegionsArea #eventControlsDiv:empty {
        display: none;
    }
    /* Picker: right column, ~42% width. !important on display defeats the
       JS-set display:none from showBestAvailablePanel hide-logic — for
       side-by-side we want the picker always visible on desktop. */
    .ticket-panels-wrapper[data-ba-mode="1"] #bestAvailablePanel,
    .ticket-panels-wrapper[data-ba-mode="3"] #bestAvailablePanel {
        flex: 0 0 calc(42% - 0.5rem);
        max-width: calc(42% - 0.5rem);
        order: 2;
        display: block !important;
    }
    /* Empty map siblings claim a flex slot they don't visually fill. For
       region-map events seatingMapArea starts empty (populated when a region
       is clicked); for fabric-seat events venueRegionsArea may stay empty.
       Collapse whichever is empty so the populated one gets the full left
       column instead of being pushed to a wrapped row. */
    .ticket-panels-wrapper[data-ba-mode="1"] #seatingMapArea:empty,
    .ticket-panels-wrapper[data-ba-mode="3"] #seatingMapArea:empty,
    .ticket-panels-wrapper[data-ba-mode="1"] #venueRegionsArea:empty,
    .ticket-panels-wrapper[data-ba-mode="3"] #venueRegionsArea:empty {
        display: none;
    }
    /* Hide the legacy toggle buttons (Find Best Available / Choose on Map)
       on desktop in side-by-side modes — both panels are already visible. */
    .ticket-panels-wrapper[data-ba-mode="1"] ~ * #bestAvailableBtn,
    .ticket-panels-wrapper[data-ba-mode="3"] ~ * #bestAvailableBtn,
    body:has(.ticket-panels-wrapper[data-ba-mode="1"]) #bestAvailableBtn,
    body:has(.ticket-panels-wrapper[data-ba-mode="3"]) #bestAvailableBtn,
    body:has(.ticket-panels-wrapper[data-ba-mode="1"]) #chooseOnMapBtn,
    body:has(.ticket-panels-wrapper[data-ba-mode="3"]) #chooseOnMapBtn,
    body:has(.ticket-panels-wrapper[data-ba-mode="1"]) #baFormBackToMapBtn,
    body:has(.ticket-panels-wrapper[data-ba-mode="3"]) #baFormBackToMapBtn {
        display: none !important;
    }
    /* Exception: when the map area is empty (user clicked Close Map, or
       Mode 1 hasn't loaded a map yet), reveal the Choose-on-Map button in
       the picker form so the user has a way to load/reload the map. The
       button's onclick fires hideBestAvailablePanel(), which auto-loads
       the map when seatingMapArea is empty. */
    .ticket-panels-wrapper[data-ba-mode="1"]:has(#seatingMapArea:empty) #baFormBackToMapBtn,
    .ticket-panels-wrapper[data-ba-mode="3"]:has(#seatingMapArea:empty) #baFormBackToMapBtn {
        display: inline-block !important;
    }
    /* The picker card has its own max-width:600px and margin:auto — undo
       the centering so it fills its column width up to the cap. */
    .ticket-panels-wrapper[data-ba-mode="1"] #bestAvailablePanel > .card,
    .ticket-panels-wrapper[data-ba-mode="3"] #bestAvailablePanel > .card {
        max-width: 100% !important;
        margin: 0 !important;
    }
    /* When the buyer DRILLS from the region overview into a specific
       region's seat map, let the seat map claim the full width. Without
       this, the 58% cap leaves 42% of the row empty/black because three
       boxes (region image + seat map + picker) can't share one row, so
       the picker (order: 2) wraps below. The picker still shows
       underneath — it just doesn't share row 1.

       Gate on #venueRegionsArea ALSO being non-empty (i.e. a region
       overview is present and was drilled out of). Otherwise this fired
       on the INITIAL auto-load of events that have NO region overview
       image — where region 1's seat map loads straight into
       #seatingMapArea on first render (e.g. multi-region events without
       overview-map coords). Those have an empty #venueRegionsArea, so
       there are only two boxes (map + picker) that fit side-by-side at
       58/42; full-width wrongly stacked the picker below the map.
       (2026-06-13 — fixes the "Both, Auto-Select First" regression.) */
    .ticket-panels-wrapper[data-ba-mode="1"]:has(#venueRegionsArea:not(:empty)):has(#seatingMapArea:not(:empty)) #seatingMapArea,
    .ticket-panels-wrapper[data-ba-mode="3"]:has(#venueRegionsArea:not(:empty)):has(#seatingMapArea:not(:empty)) #seatingMapArea {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.yui-skin-sam .yui-navset .yui-nav, 
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */  
border:solid #ed1c23; /* color between tab list and content */  
border-width:0 0 0px;  
Xposition:relative;
zoom:1;
background-color:#FFFFFF;
}

.OverGraphics { cursor: pointer; cursor: hand;}

.yui-skin-sam .yui-navset .yui-content {  
  background:#FFFFFF; /* content background color */  
}

#yui-history-iframe {
  position:absolute;
  top:0; left:0;
  width:1px; height:1px;
  visibility:hidden;
}

#ajaxSeatingMapArea .yui-resize-handle-br {
    height: 11px;
    width: 11px;
    background-position: -20px -60px;
    background-color: transparent;
}

table.TixSelection {
	border-width: 1px;
}

table.EventData {
	border-width: 1px;
	border-spacing: ;
	border-style: none;
	border-color: gray;
	border-collapse: separate;
}
table.EventData th {
	border-width: 1px;
	padding: 5px;
	border-style: solid;
	border-color: gray;
	-moz-border-radius: ;
}
table.EventData td {
	border-width: 1px;
	padding: 5px;
	border-style: solid;
	border-color: gray;
	-moz-border-radius: ;
}
table.fbFriendsTable{
    font-family:Georgia;
	font-size:10px;
	border-width:0;
	border-collapse:collapse;
}

table.fbFriendsTable tbody{
    font-family:Georgia;
	font-size:10px;
	border-width:0;
	border-collapse:collapse;
}

table.fbFriendsTable tr{
    font-family:Georgia;
	font-size:10px;
	border-width:0;
	border-collapse:collapse;
}

table.fbFriendsTable td{
    font-family:Georgia;
	font-size:10px;
	border-width:0;
	border-collapse:collapse;
}

table.fbFriendsTable td a{
    font-size:8px;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;	
	font-weight: bold;
    color: #3b5998;	
}
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
.yui3-panel {
    outline: none;
	overflow: auto;
	background-color:#FFFFFF;
}
.yui3-panel-content .yui3-widget-hd {
    font-weight: bold;
}
.yui3-panel-content .yui3-widget-bd {
    padding: 15px;
}
.yui3-panel-content label {
    margin-right: 30px;
}
.yui3-panel-content fieldset {
    border: none;
    padding: 0;
}
.yui3-panel-content input[type='text'] {
    border: none;
    border: 1px solid #ccc;
    padding: 3px 7px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 100%;
    width: 200px;
}
/* Hide overlay markup while loading, if js is enabled */
.yui3-js-enabled .yui3-overlay-loading {
    top:-1000em;
    left:-1000em;
    position:absolute;
}

/* Overlay Look/Feel */
.yui3-overlay-content {
    padding:0px;
    border:1px solid #000;
    background-color:#aaa;
}
.yui3-overlay-content .yui3-widget-bd {
    padding:1px;
    border:1px solid #0000aa;
    background-color:#fff;
}

.yui3-overlay-content .yui3-widget-hd {
    padding:0px;
    border:0px solid #aa0000;
    background-color:#fff;
}

.yui3-overlay-content .yui3-widget-ft {
    padding:0px;
    border:0px solid #00aa00;
    background-color:#fff;
}

/* GoJS Printing*/

/* @media print specifies CSS rules that only apply when printing */
@media print {
  /* CSS reset to clear styles for printing */
  html, body, div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  /* Hide everything on the page */
  body * {
    display: none !important;
  }

  #content, #myImages, #myImages * {
    /* Only display the images we want printed */
    /* all of the image's parent divs
       leading up to the body must be un-hidden (displayed) too
    */
    display: block;
    /* CSS reset to clear the specific visible divs for printing */
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  /* We have line breaks in the DIV
     to separate the images in the browser,
     but do not want those line breaks when printing
  */
  #myImages br {
    display: none;
  }

  img {
    /* Only some browsers respect this rule: */
    page-break-inside: avoid;
    /* Almost all browsers respect this rule: */
    page-break-after:always;
  }
}

/* The @page rules specify additional printing directives that browsers may respect
   Here we suggest printing in landscape (instead of portrait) with a small margin.
   Browsers, however, are free to ignore or override these suggestions.
   See also:
    https://developer.mozilla.org/en-US/docs/CSS/@page
    http://dev.w3.org/csswg/css3-page/#at-page-rule
*/
@page {
  /* Some browsers respect rules such as size: landscape */
  margin: 1cm;
}

/* =============================================
   MOBILE REGIONS MAP RESPONSIVE STYLING
   Added: January 2026
   Issue: Regions map image bleeds past screen width on mobile
   ============================================= */

/* Constrain regions map container on all screen sizes */
#venueRegionsArea {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Ensure images with image maps are responsive */
#venueRegionsArea img[usemap],
img.img-responsive[usemap] {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mobile-specific constraints */
@media (max-width: 767px) {
    /* Prevent horizontal scroll from regions map */
    #venueRegionsArea {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Force regions map image to fit within viewport and center it */
    #venueRegionsArea img,
    #venueRegionsArea img[usemap] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Remove padding from parent containers on mobile for full-width map */
    #EventTickets {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Seating map (Fabric.js canvas) - full width on mobile */
    #seatingMapArea,
    #ajaxSeatingMapArea {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Fabric.js canvas wrapper - ensure it uses full width */
    #seatingMapArea .canvas-container,
    #ajaxSeatingMapArea .canvas-container,
    #seatingMapArea canvas,
    #ajaxSeatingMapArea canvas {
        max-width: 100% !important;
    }

    /* When regions map is visible, contain overflow on parent elements */
    /* Using specific selector to override !important in inline styles */
    .tab-pane#EventTickets:has(#venueRegionsArea img[usemap]),
    #EventTickets:has(#venueRegionsArea img[usemap]) {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Fallback for browsers without :has() support - applied via JS class */
    #EventTickets.has-regions-map {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Prevent body horizontal scroll when regions map is displayed */
    body.regions-map-visible,
    html.regions-map-visible {
        overflow-x: hidden !important;
    }

    /* =============================================
       MOBILE TAB NAVIGATION - Truncate Long Event Names
       Prevents tabs from wrapping to multiple lines
       ============================================= */
    #IMSEventPageTabsDiv {
        flex-wrap: nowrap !important;
    }

    #IMSEventPageTabsDiv .nav-item {
        flex: 0 1 auto;
        min-width: 0; /* Allow shrinking below content size */
    }

    /* Truncate "The Event - Event Name" tab on mobile */
    #IMSEventPageTabsDiv .nav-link {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55vw; /* Leave room for Tickets tab */
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    /* Keep Tickets tab visible and unshrunk */
    #IMSEventPageTabsDiv .nav-item:last-child .nav-link {
        max-width: none;
        flex-shrink: 0;
    }
}