/*Seats*/

.syos-seats circle, .seat-legend circle {
    fill: transparent;
    stroke: #b09f7f;
    stroke-width: .25;
}

.seat-legend circle {
    stroke-width: 4;
}

.syos-seats circle {
    cursor: not-allowed;
}

    .syos-seats circle.available, .seat-legend circle.available {
        fill: #e58a22;
        stroke: #e58a22;
    }

    .syos-seats circle.available {
        cursor: pointer;
    }

    .syos-seats circle.no-match {
        fill: #e3dccf;
        stroke: #e3dccf;
    }

    .syos-seats circle.seat-ada.available, .seat-legend circle.seat-ada {
        fill: #148796;
        stroke: #148796;
    }

.syos-seats use.seat-ada.available, .seat-legend use.seat-ada {
    fill: #fff;
    stroke: #fff;
}

.syos-seats circle.adacompanion.available,
.syos-seats circle.seat-ada.adacompanion.selected,
.seat-legend circle.adacompanion {
    fill: transparent;
    stroke: transparent;
}

.syos-seats use.seat-ada.adacompanion.available, .seat-legend use.adacompanion {
    fill: #148796;
    stroke: #148796;
}
.syos-seats use.seat-ada.adacompanion.selected {
    fill: #343434;
    stroke: #343434;
}


.syos-seats circle.adacompanion.no-match {
    fill: transparent;
    stroke: transparent !important;
}
.syos-seats circle.seat-ada.no-match {
    fill: transparent;
    stroke: #e3dccf;
}
.syos-seats use.available.seat-ada.no-match{
    fill: #e3dccf;
}

.syos-seats circle.selected,
.syos-seats circle.selected.adacompanion,
.syos-seats circle.selected.seat-ada,
.seat-legend circle.selected {
    fill: #343434;
    stroke: #343434;
}

.syos-seats use.selected.seat-ada {
    fill: #FFF;
    stroke: #FFF;
}

.syos-seats circle.camera-icon {
    fill: #000;
    stroke: #000;
    cursor: pointer;
}

.syos-seats use.camera-icon {
    fill: #FFF;
    cursor: pointer;
}

.syos-seats text {
    fill: black;
    font-size: 4px;
}

.seat-legend svg {
    width: 16px;
    height: 16px;
}

#syos-seats {
    min-height: 16rem;
}

/*Just desktops should get the taller view*/
@media(min-width: 1200px) {
    #syos-seats {
        min-height: 55vh !important;
    }
}

/*End Seats*/

/*Modal*/

.modal-photo-preview {
    padding: 1rem !important;
}

.modal-photo-preview .modal-body {
    margin: 0;
}

.modal-photo-preview .modal-header {
    display: none;
}

.modal-photo-preview .modal-footer {
    border-top: none;
}

@media(min-width: 768px) {
    .modal-photo-preview {
        width:50%;
    }
}
/*End Modal*/



/*Tooltips*/
.tooltip-override {
    opacity: 1 !important;
    font-size: .65em !important;
}

.tooltip-override .tooltip-inner {
    background: #FFF !important;
    color: #000000 !important;
    border-radius: 0px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 33%);
    max-width: 300px;
}

.tooltip-override .tooltip-arrow::before {
    content: "";
}


/*Arrows are complicated. Directly overriding using bootstrap's selectors*/

.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: #FFF;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: #FFF;
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: #FFF;
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: #FFF;
}

.tooltip-override table {
    text-transform: uppercase;
}

.tooltip-override table.table td {
    padding-top: 0;
    padding-bottom: 0;
    font-size: .6rem !important;
}

.tooltip-override table.table tr:last-child {
    margin-bottom: 5px;
}

.tooltip-override table.table th {
    padding-bottom: 0;
}

.tooltip-override p {
    margin-bottom: 0;
    padding: 3px 1.25rem 0;
}

.tooltip-override p:last-child {
    margin-bottom: 5px;
}
.tooltip-override .tooltip-inner hr:last-child {
    visibility: hidden;
    padding-bottom: .8rem;
}
/*End Tooltips*/

/*Slider*/
.slider {
    display: block;
    position: relative;
    height: 36px;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.slider .slider-touch-left,
.slider .slider-touch-right {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    height: 36px;
    width: 36px;
    padding: 6px;
    z-index: 2;
}

.slider .slider-touch-left span,
.slider .slider-touch-right span {
    display: block;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    border: 1px solid #a4a4a4;
    border-radius: 50%;
}

.slider .slider-line {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: calc(100% - 36px);
    left: 18px;
    top: 16px;
    height: 4px;
    border-radius: 4px;
    background: #f0f0f0;
    z-index: 0;
    overflow: hidden;
}

.slider .slider-line span {
    display: block;
    height: 100%;
    width: 0%;
    background: orange;
}

/*
    Can probably remove the above styles. We've changed to no-ui slider
    and the styles below are all we need for that component.
*/
.no-ui-slider {
    background-color: #e3dccf;
    height: 5px;
}

.no-ui-slider .noUi-connect {
    background: #e58a22;
}

.no-ui-slider .noUi-handle {
	height: 24px;
	width: 24px;
	top: -11px;
	right: -12px;
	border-radius: 12px;
	cursor: pointer;
}
.noUi-handle:before, .noUi-handle:after{
	display: none;
}
.noUi-tooltip {
    display: none;
}
.noUi-active .noUi-tooltip {
    display: block;
}
/*End Slider*/

/*Venue Overview Graphics*/
svg#venue {
    width:100%;
    height: 100%;
}

svg#venue g.section path {
    fill: #e58a22 !important;
}
svg#venue g.section:hover path {
    fill: gray !important;
    cursor: pointer;
}
svg#venue g.section.active path {
    fill: black !important;
}
svg#venue g.section.sold-out path {
    fill: gray !important;
    cursor: not-allowed;
    opacity: .1;
}
/*END Venue Overview Graphics*/



/*Price Type Filters accordion override*/
#pricetype-filters {
    /*min-width: 25%;*/
}

    @media (max-width: 456px) {
        #pricetype-filters {
            margin-bottom: 10%;
            }
        }

#pricetype-filters .accordion-button::after {
    display: none;
}

/*End Price Type Filters accordion override*/




.btn-ticket-ctrl {
    padding: 0.375rem .75rem !important;
}

    @media (max-width: 456px) {
        .btn-ticket-ctrl {
            height: 40px !important;
            font-size: 1rem !important;
            line-height: normal !important;            
            }
        }
    @media(min-width: 576px) {
        .btn-ticket-ctrl {
            /*padding: 0.375rem 1.5rem !important;*/
        }
    }
    
    
.stage-text {
    font-size: 6px !important;
    font-weight:bold;
}



#app-syos h3 {
    font-size: 1.25rem;
}
.seat-legend {
    font-size: 1rem;
}

#pre-cart div.reservation-instructions {
    margin-bottom: 2% !important;
    padding: 1% !important;
    background-color: #FAAD53;
    font-size: 1rem;
    font-weight: normal !important;
}