@plight: black;
@pdark: yellow;
@primary: blue;

#message .error .text {
    font-size: 12pt;
}

header {
    margin:0;
    h1 {
        font-size:2.75em;
        font-weight:bold;
    }
    span.address {
        font-weight:400;
        font-size:1.5em;
    }

    div.hours {
        color:black;
        span {
            font-size:0.8em;
        }
        span.days {
            font-weight:bold;
        }
        span.hour {
        }
    }
}
div.client-logo img {
    background:white;
    height:200px;
    max-width:235px;
    padding:15px;
    width:auto;
    border:4px solid transparent;
}

div.category-border {
    border-bottom:2px solid #212121;
    padding-bottom:5px;
    margin-bottom:10px;

    h2.category-title {
        margin:0;
        padding:0 0 5px;
        font-weight:bold;

        a.back-to-top {
            float:right;
            color:black;
            font-size:0.5em;
            line-height:45px;

            i {
                line-height:45px;
            }
            &:hover {
                text-decoration:none;
            }

            span {
                display:none;
                padding-right:10px;
            }
        }
    }

    p {
        margin:0;
        font-size:0.85em;
        font-weight:300;
    }
}
div.inner-container {
    border-bottom:2px dotted #c1c1c1;
    margin:0 0 10px;
    padding:10px 0;

    h3 {
        margin:0;
        font-size:1.5em;

        span {
            display:inline-block;
        }
        span.item-title {
            min-width:70%;
            color:#9f3f22;
        }
        span.item-price {
            width:20%;
            text-align:right;
        }
        a {
            display:block;
            color:#222;
        }
        i {
            float:right;
            text-align:right;
            width:10%;
            padding-top:3px;
            color:#313131;
        }
    }

    div.body {
        display:none;

        &.active {
            display:block;
        }

        div.description {
            padding:5px 0 10px;
            font-size:0.9em;
            font-weight:400;
        }
    }
    label, input, select {
        font-size:0.8em;
    }
    div.regular-input label {
        min-width:110px;
    }
    fieldset legend {
        font-size:1.15em;
        margin:0;
    }
    fieldset label {
        margin-bottom:2px;
    }

    div.input-group input[type="number"] {
        width:70px;
        flex-grow:0;
    }

    div.input-group-append, div.input-group-prepend {
        button.btn {
            padding:0.175rem 0.75rem;
        }
    }
}
div.checkbox input[type="checkbox"] {
    float:left;
    margin:6px 6px 0 0;
}

#table-cart td i {
    color:red;
}


#cart {
    background: #f6f6f6;
    padding: 20px;
    .line-break {
        border-bottom: 1px solid #ebebeb;
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    .cart-mobile {
        padding: 30px 0;
        .cart-item {
            padding:15px 0;
            &:not(:last-of-type) {
                border-bottom: 1px solid #ebebeb;
            }
            h3 {
                padding: 15px 0 5px 0 !important;
            }
        }
        .cancel-order {
            border: none;
            outline: none;
            background: #f6f6f6;
            cursor: pointer;
            color: @pdark;
            padding: 0;
            margin: 0;
        }
        .seating-info {
            padding: 15px;
            span {
                display: block;
            }
            .label {
                font-size: 12px;
                font-weight: 400;
            }
            .data {
                font-weight: 500;
                font-size: 16px;
            }
        }
        .order-summary {
            h2 {
                font-size: 22px;
                font-weight: 500;
                margin: 0;
                padding: 0;
            }
            h3 {
                font-weight: 400;
                font-size: 18px;
                margin: 0;
                padding: 0;
                color: #000000;
            }
            h4 {
                font-weight: 600;
                font-size: 16px;
                margin: 0;
                padding: 0;
                color: #000000;
            }
            h5 {
                font-weight: 400;
                font-size: 12px;
                margin: 0;
                padding: 0;
                color: #727272;
            }
        }
        .total {
            span {
                font-weight: 500;
            }
        }
        .weight-600 {
            font-weight: 500;
        }
        .padding-bottom-small {
            padding-bottom: 10px !important;
        }
        .padding-bottom-xsmall {
            padding-bottom: 5px !important;
        }
        .padding {
            padding:15px 0 !important;
        }
        .padding-bottom {
            padding-bottom: 15px !important;
        }
        .cancel {
            padding: 15px !important;
            a {
                color: @primary;
                transition: 0.15s;
                &:hover {
                    color: @pdark;
                }
            }
        }
        span {
            color: #000000;
        }
        .line-item {
            span {
                color: #727272;
            }
        }
        .text-large {
            font-size: 16px;
        }
        .text-small {
            font-size: 12px;
        }
        .inner-break {
            border-bottom: 1px solid #ebebeb;
            display: block;
            width: 100%;
            margin: 0 auto;
        }
        .container-full-width {
            width: 100%;
            .line-break {
                display: block;
                width: 100%;
                height: 1px;
                background: #ebebeb;
            }
        }
        .padding-extra {
            padding: 30px 0;
        }
        .remove_ticket {
            font-size: 28px;
            border: none;
            border-radius: 72px;
            display: flex;
            margin: 0;
            padding: 0;
            width: 50px;
            height: 50px;
            text-align: center;
            vertical-align: middle;
            line-height: 1;
            box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
            outline: none;
            transition: 0.15s;
            cursor: pointer;
            background: #ffffff;
            color: #757575;
            align-items: center;
            justify-content: center;
            svg {
                fill: #757575;
                transition: 0.15s;
            }
            &:hover {
                background: #eeeeee;
                svg {
                    fill: #000000;
                }
            }
        }
        .toggle-quantity {
            button {
                font-size: 28px;
                border: none;
                border-radius: 72px;
                display: inline-block;
                margin: 0;
                padding: 0;
                width: 50px;
                height: 50px;
                text-align: center;
                vertical-align: middle;
                line-height: 1;
                box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
                outline: none;
                transition: 0.15s;
                cursor: pointer;
            }
            .add {
                background: @primary;
                color: #000000;
                &:hover {
                    background: @pdark;
                }
            }
            .remove {
                background: #ffffff;
                color: @primary;
                &:hover {
                    background: #eeeeee;
                }
            }
            .disabled {
                background: #cdcdcd !important;
                color: #9e9e9e !important;
                box-shadow: none !important;
            }
            .quantity {
                margin: 0 10px;
                vertical-align: middle;
                font-weight: bold;
            }
        }
    }
    form[name="removeTicket"] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15px 0;
    }
}
.ticket{
    display:flex;
    align-items:center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: 5px;
    background-color: white;
    padding: 20px;
    flex-direction: column;
    margin-bottom: 10px;
    position: relative;
    transition: all ease .5s;
    &:hover{
        padding-right: 50px;
        & .ticket__actions{
            background-color: rgb(226, 20, 20);
            visibility: visible;
        }
    }
    &--no-hover{
        &:hover{
            padding-right: 20px;
        }
    }
    &__top, &__bottom, &__middle{
        width: 100%;
    }
    &__title{
        &--section, &--seat{
            font-family: 'Open Sans', sans-serif;
            color: #AFAFAF;
            font-weight: 700;
        }
        &--seat{ float: right; }
        &--show, &--price{
            font-weight: 700;
            font-family: 'Open Sans', sans-serif;
        }
        &--price{
            float: right;
        }
        &--price::before{
            content: "$";
        }
        &--section {
            span.title-part {
                display:inline-block;
                padding-right:50px;
            }
        }
    }
    &__actions{
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        visibility: hidden;
        display: flex;
        align-items:center;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    &__delete{
        cursor: pointer;
        background-color: transparent;
        border: none;
        width: 100%;
        height: 100%;
        color:white;
        padding: 0 15px;
    }
}
#spanCode{
    display:block;
}
#spanLoader{
    display:none;
}
#discountLabel{
    color: lightblue;
}
#discountAmount{
    color: lightblue;
    font-size: 15px;
}

.checkout-process-step-1 {
    form.checkout {
        label,input:not([type="submit"]), select {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]), select {
            padding: 5px;
            width: 100%;
            border: 0px;
            border-bottom: 1px solid #FFF;
            font-size: 9pt;
            line-height: 22px;
            color: #555;
            background-color: #EBEBEB;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
            -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
            transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
        }
        input:not([type="submit"]) {
            outline: none;
            transition: 0.3s;
            margin-bottom: 15px;
            padding-left: 5px;
            &:focus {
                border-bottom-color: black;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        select {
            vertical-align:top;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            padding:6px 5px 6px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
            min-height: 27px;
        }
        .save-above {
            label,input {
                display: inline-block;
                width: auto;
                margin-bottom: 15px;
                font-size: 1em;
            }
            label {
                margin-right: 15px;
            }
        }
    }
}

.customer-my-account {
    form {
        label,input:not([type="submit"]), select {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]) {
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            padding-left: 5px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        select {
            vertical-align:top;
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
            min-height: 27px;
        }
        .validation-error {
            color: red;
            font-size: 12px;
            padding-bottom: 20px;
            &:before {
                content: "↑";
                vertical-align: top;
                line-height: 14px;
                margin-right: 5px;
            }
        }
    }
    .booking-history {
        .date-booked {
            width: 33.33333%;
            width: ~"calc(100% / 3)";
            text-align: center;
        }
        .confirmation-number {
            width: 33.33333%;
            width: ~"calc(100% / 3)";
            text-align: center;
        }
        .total {
            width: 33.33333%;
            width: ~"calc(100% / 3)";
            text-align: center;
        }
        .booking-legend {
            display: flex;
            text-align: center;
            div {
                width: 33.33333%;
                width: ~"calc(100% / 3)";
                font-weight: bold;
            }
        }
        .booking {
            display: flex;
            flex-wrap: wrap;
            .children {
                width: 100%;
                .legend {
                    display: flex;
                    text-align: center;
                    div {
                        width: 33.33333%;
                        width: ~"calc(100% / 3)";
                        text-align: center;
                    }
                }
                .child {
                    display: flex;
                    text-align: center;
                    div {
                        width: 33.33333%;
                        width: ~"calc(100% / 3)";
                        text-align: center;
                    }
                }
            }
        }
        .booking:nth-child(even) {
            background: #dee2e6;
            border: 1px solid #9c9c9c;
        }
    }
}

.customer-login {
    form {
        label,input:not([type="submit"]), select {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]) {
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            padding-left: 5px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        select {
            vertical-align:top;
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
            min-height: 27px;
        }
        .validation-error {
            color: red;
            font-size: 12px;
            padding-bottom: 20px;
            &:before {
                content: "↑";
                vertical-align: top;
                line-height: 14px;
                margin-right: 5px;
            }
        }
    }
}

.checkout-process-step-2 {
    form.checkout {
        label,input:not([type="submit"]), textarea {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]), textarea {
            padding: 5px;
            width: 100%;
            border: 0px;
            border-bottom: 1px solid #FFF;
            font-size: 9pt;
            line-height: 22px;
            color: #555;
            background-color: #EBEBEB;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
            -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
            transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -webkit-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: black;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
    }
}

.checkout-process-step-2, .checkout-process-step-3 {
    .buttons {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.checkout-process-step-3 {
    .box {
        p {
            display: block;
            margin-bottom: 5px;
        }
    }
    .list-items {
        .ticket {
            .wrapper {
                background: #e9ecef;
                .image {
                    width: 100%;
                    border: 5px solid #9c9c9c;
                }
                .info {
                    width: 100%;
                    padding: 5px 5px 0 5px;
                    border-left: 1px solid #9c9c9c;
                    border-right: 1px solid #9c9c9c;
                    .seating {
                        margin: 0;
                        img {
                            width: 16px;
                            height: auto;
                            margin-right: 3px;
                        }
                    }
                }
                .pricing {
                    width: 100%;
                    padding: 0px 5px 5px 5px;
                    border-left: 1px solid #9c9c9c;
                    border-right: 1px solid #9c9c9c;
                    display: flex;
                    .price-type {
                        margin-right: 4px;
                    }
                }
            }
        }
    }
    input[type="text"] {
        padding: 5px;
        border: 0px;
        border-bottom: 1px solid #FFF;
        font-size: 1em;
        line-height: 22px;
        color: #555;
        background-color: #EBEBEB;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
        -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
        transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
    }
    .sub-totals {
        .wrapper {
            background: @plight;
            padding: 5px 5px 0 5px;
            border-top: 2px solid @primary;
            .sub-total {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                }
            }
            .promotions {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                }
            }
            .taxes {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                }
            }
            .fees {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                }
            }
        }
    }
    .total {
        .wrapper {
            background: @plight;
            padding: 10px 5px;
            border-top: 1px solid @primary;
            .total {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                    font-weight: bold;
                }
            }
        }
    }
}

.checkout-process-step-4 {
    form {
        label,input:not([type="submit"]), select {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]) {
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            padding-left: 5px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        select {
            vertical-align:top;
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
            min-height: 27px;
        }
        .validation-error {
            color: red;
            font-size: 12px;
            padding-bottom: 20px;
            &:before {
                content: "↑";
                vertical-align: top;
                line-height: 14px;
                margin-right: 5px;
            }
        }
        div.checkbox {
            display:flex;
            label {
                order:2;
            }
            input[type="checkbox"] {
                order:1;
                display:inline;
                width:auto;
                float:right;
                margin:0 10px 0 0;
                align-self:center;
            }
        }
    }

    div.container-billing-info p {
        display:flex;

        strong {
            width:50%;
        }
        span {
            display: inline-block;
            width: 80px;
            text-align: right;
        }
    }
}
label.required {
    &::after {
        color:red;
        content:"*";
    }
}

@media only screen and (max-width:768px) {
    header h1, header span.address {
        color:black;
    }
    .ticket {
    padding-right:50px;
        .ticket__actions {
            background-color: #e21414;
            visibility: visible;
        }
    }
}
@media only screen and (max-width:640px) {
    header {
        font-size:90%;
        padding-top:15px;

        span.address {
            font-size:1.15em;
        }
    }
    div.client-logo img {
        height:140px;
    }
}
div.cart-container-div {
    position: sticky;
    top: 15px;
    padding:5px 10px 15px;
    background:black;
    border:1px solid black;
    border-radius:4px;
    color:white;

    table.list-table {
        margin:0 0 15px;
        tbody tr {
            background:white;

            &:nth-of-type(odd) {
                background:#e1e1e1;
            }

            td {
                color:black;
            }
        }
    }

    #checkout-button {
        background:white;
        border:2px solid #9f3f22;
        color:black;
    }

    ul.hours-list {
        margin:0 15px;
        font-size:0.9em;
        li.days {
            display:flex;

            span.gap {
                flex-grow:2;
                border-bottom:1px dotted white;
            }
        }
    }
}

div.cat-listing {
    position:relative;
    padding:0 30px;
    /*padding:0;
    text-align:center;
    list-style-type:none;*/

    button.slick-arrow {
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        z-index:50;
        background:transparent;
        border:none;
        font-size:1.5em;

        span {
            display:none;
        }

        &.slick-prev {
            left:0;
        }
        &.slick-next {
            right:0;
        }
    }

    div.item {
        margin:5px;
        /*display:inline-block;*/
        a {
            display:inline-block;
            text-align:center;
            width:100%;
            padding:3px 10px;
            border:2px solid black;
            text-transform:uppercase;
            transition: 0.15s;
            font-size:0.75em;
            color:black;
            text-decoration:none;

            &:hover {
                background:black;
                color:white;
                transition: 0.15s;
            }
        }
    }

    .slick-dots {
        max-width: 90%;

        button::before {
            font-size: 20px;
            
        }
    }
}