/* Seat map css */

.sc-container-row {
    display: flex;
    flex-direction: row;
}

.sc-container-column {
    display: flex;
    flex-direction: column;
}

.sc-container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.sc-container-column-reverse {
    display: flex;
    flex-direction: column-reverse;
}

.sc-left {
    align-items: flex-start;
}

.sc-right {
    align-items: flex-end;
}

.sc-top {
    justify-content: flex-start;
}

.sc-bottom {
    justify-content: flex-end;
}

.sc-margin-top {
    margin-top: 15px;
}

.sc-margin-bottom {
    margin-bottom: 15px;
}

.sc-container-row *,
.sc-container-column *,
.sc-container-row-reverse *,
.sc-container-column-reverse * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    font-family: Arial, Helvetica, sans-serif;
}

.sc-map {
    display: flex;
    flex-flow: column;
}

.sc-map-row {
    display: flex;
    height: 46px;
}

.sc-column-index {
    display: flex;
    flex-direction: row;
}

.sc-row-index {
    display: flex;
    flex-direction: column;
}

.sc-title {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 10px 0 0;
}

.sc-title img {
    /* ie and edge require height to be set and width to be auto set, not the opposite */
    height: 20px;
    width: auto;
    margin: 0;
    padding: 0;
}

.sc-title h3 {
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0 0 0 10px;
}

.sc-small-title {
    margin: 0;
    padding: 15px 0 0;
}

.sc-seat {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    margin: 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    color: white;
    border-top-left-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.sc-front {
    display: flex;
    justify-content: center;
    color: #b0b0b0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f5f5f5;
    width: 100%;
}

.sc-index {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    margin: 3px;
    background-color: transparent;
    color: #4b4949;
}

.sc-seat.blank {
    background-color: transparent;
    color: transparent;
}

.sc-seat.blank img {
    height: 15px;
    width: auto;

    /* centers image */
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.sc-seat.available {
    cursor: pointer;
    background-color: #80c2d1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.sc-seat.available:hover {
    background-color: #a0d3de;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.sc-seat.unavailable {
    background-color: rgb(210, 210, 210);
    cursor: not-allowed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sc-seat.clicked {
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(160, 106, 106, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Seat legend css */

.sc-legend {
    list-style-type: none;
    margin: 0;
    padding: 0 0 15px;
}

.sc-legend-item {
    margin: 0;
    padding: 15px 0 0;
    vertical-align: middle;
    line-height: 24px;
}

.sc-legend-description {
    display: inline-block;
    margin: 0 0 0 10px;
}

.sc-seat.legend-style {
    cursor: default;
    float: left;
    width: 23px;
    height: 23px;
    margin: 0;
    border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    pointer-events: none;
}

/* Shopping cart css */

.sc-cart {
    margin: 15px 0 0;
    padding: 0;
    border: 1px solid #ddd;
    overflow-y: auto;
    overflow-x: hidden;
}

.sc-cart table {
    width: 100%;
}

.sc-cart tr {
    border-bottom: 1px solid #ddd;
    width: 200px;
    margin: 0 1px 0 0;
    padding: 6px 0 0;
    height: 40px;
    min-height: 40px;
}

.sc-cart td {
    text-align: center;
    vertical-align: middle;
}

.sc-cart-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #db2c2c;
    height: 25px;
    width: 25px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.sc-cart-delete img {
    height: 15px;
    width: 15px;
}

.sc-cart-delete.all {
    justify-content: flex-start;
    width: auto;
    margin-top: 10px;
    padding: 0 5px;
}

.sc-cart-delete.all p {
    color: white;
    padding: 0;
    margin: 0 0 0 5px;
}

.sc-cart-delete:hover {
    background-color: #db4646;
}

.sc-cart-total {
    margin: 10px 0 0;
    padding: 0;
    float: right;
    display: block;
    line-height: 25px;
}

.sc-cart-description {
    float: left;
    display: block;
    margin: auto;
    padding: 0 10px;
    font-size: 14px;
    line-height: 25px;
}

/* Ticket css */

.sc-ticket-container {
    padding: 5px;
    width: 150px;
}

.sc-ticket {
    display: flex;
    justify-content: center;
    color: white;
    font-size: 15px;
    width: 100%;
    height: 30px;
    border: 2px solid black;
}

.sc-ticket div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.sc-ticket .sc-cart-seat-name {
    border-right: 1px dashed black;
    box-sizing: border-box;
    width: 30%;
}

.sc-ticket .sc-cart-seat-type {
    width: 60%;
}

.sc-ticket .sc-ticket-stripes {
    width: 5%;
    background: repeating-linear-gradient(45deg, black, black 3px, transparent 3px, transparent 6px);
}