#fc-map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, sans-serif;
    background: #ccc
}

#canvas-container {
    position: relative;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #999;
    padding: 15px;
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, .02), 6.7px 6.7px 5.3px rgba(0, 0, 0, .028), 12.5px 12.5px 10px rgba(0, 0, 0, .035), 22.3px 22.3px 17.9px rgba(0, 0, 0, .042), 41.8px 41.8px 33.4px rgba(0, 0, 0, .05), 100px 100px 80px rgba(0, 0, 0, .07)
}

#fc-map-container #tooltip {
    position: fixed;
    font-size: .85rem;
    max-width: 300px;
    background: #fff;
    border-radius: 5px;
    padding: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .45);
    transition: opacity .1s ease-out, transform .1s ease-out;
    opacity: 0;
    pointer-events: none;
    z-index: 5
}

#fc-map-container #tooltip img {
    width: 100%;
    border-radius: 5px
}

#fc-map-container #tooltip .price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color)
}

#fc-map-container #tooltip .content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    margin-top: 8px
}

#fc-map-container #tooltip .available-seats,
#fc-map-container #tooltip .sector-name {
    color: var(--main-bg-dark);
    font-weight: 700
}

#fc-map-container #tooltip .sector-name {
    margin-bottom: 8px
}

#fc-map-container #tooltip .inactive {
    opacity: .5
}

#fc-map-container #menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--primary-color);
    border-radius: 8px 8px 15px 15px;
    max-height: 10vh;
    z-index: 3
}

#fc-map-container #menu .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    padding: 8px 10%
}

#fc-map-container #menu .menu-button {
    padding-left: 10px;
    padding-right: 10px;
    width: 10%;
    aspect-ratio: 1/1
}

#fc-map-container #menu .menu-button:hover {
    color: var(--light-text)
}

#seats-modal {
    --xs-seatSize: 3em;
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 90%;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .6s linear;
    overflow: hidden;
    z-index: 1
}

#seats-modal.modal-open {
    opacity: 1;
    visibility: visible
}

#seats-modal .modal-controls {
    width: 100%;
    padding: 15px;
    background: #eee;
    box-sizing: border-box
}

#seats-modal .modal-content {
    width: 100%;
    text-align: center;
    height: calc(100% - 50px)
}

#seats-modal .scroll-container {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch
}

#seats-modal .seats-rows {
    display: inline-block;
    position: relative;
    width: 30px;
    background: #000;
    z-index: 1
}

#seats-modal .seats-rows ul {
    list-style-type: none;
    padding: 10px 0 0;
    margin: 0
}

#seats-modal .seats-rows ul li {
    background: rgba(0, 0, 0, .95);
    margin-bottom: 4px;
    padding: 0 10px;
    z-index: 9;
    position: relative
}

#seats-modal .seats-content,
#seats-modal .seats-list {
    position: relative;
    height: 100%;
    display: flex
}

#seats-modal .seats-list {
    display: inline-block;
    width: calc(100% - 30px);
    text-align: left
}

#seats-modal .seats-list>div:first-of-type {
    margin-top: 10px
}

#seats-modal .seats-list span,
#seats-modal .seats-rows ul li {
    height: var(--xs-seatSize);
    line-height: var(--xs-seatSize);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

#seats-modal .seats-list>div {
    min-width: 100%;
    display: flex;
    float: left;
    margin-bottom: 4px;
    white-space: nowrap
}

#seats-modal .seats-list div:hover {
    background: #ccc
}

#seats-modal .seats-list span {
    background: green;
    border-radius: 50%;
    width: var(--xs-seatSize);
    height: var(--xs-seatSize);
    display: inline-flex;
    margin-right: 4px;
    line-height: var(--xs-seatSize);
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all .6s linear
}

#seats-modal .seats-list.hide-text span {
    font-size: 0
}

#seats-modal .seats-list.hide-text .seatTooltip {
    font-size: 13px
}

#seats-modal .seats-list .seat-active {
    background: green
}

#seats-modal .seats-list .seat-disabled {
    background: grey;
    cursor: default
}

#seats-modal .seats-list .seat-sold {
    background: #b3a8a8;
    cursor: default
}

#seats-modal .seats-list .user-booked {
    background: #a5ab00;
    cursor: pointer
}

#seats-modal .seats-list span:first-of-type {
    margin-left: 5px
}

#seats-modal .seat-tooltip {
    position: absolute;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, .95);
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    transition: opacity .3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 2
}

#seats-modal span:hover .seat-tooltip {
    opacity: 1
}