body {
    padding-top: 5rem;
}

body {
    --friday-18p-ticket: #fb4;
    --friday-junior-ticket: #ff0;
    --saturday-18p-ticket: #666;
    --saturday-junior-ticket: #888;
    --sunday-18p-ticket: #bb0;
    --sunday-junior-ticket: #16F;
    --highlight: rgba(244, 244, 244);
}

.friday_ticket {
    background-color: var(--friday-18p-ticket);
    color: white;
}
.saturday_ticket {
    background-color: var(--saturday-18p-ticket);
    color: black;
}
.sunday_ticket {
    background-color: var(--sunday-18p-ticket);
    color: white;
}

.ticket-weekend,
.ticket-saturdaysunday,
.ticket-sunday {
    padding-right: 20%;
    background: linear-gradient(75deg, var(--highlight) 50%, var(--sunday-18p-ticket) 90%);
    color: black;
}
.ticket-friday {
    padding-right: 20%;
    background: linear-gradient(75deg, var(--highlight) 50%, var(--friday-18p-ticket) 90%);
    color: black;
}
.ticket-fridaysaturday {
    padding-right: 20%;
    background:
        linear-gradient(75deg, var(--highlight), var(--highlight) 50%, transparent),
        linear-gradient(to bottom, var(--friday-18p-ticket), var(--saturday-18p-ticket));
    color: black;
}
.ticket-saturday {
    padding-right: 20%;
    background: linear-gradient(75deg, var(--highlight) 50%, var(--saturday-18p-ticket) 90%);
    color: black;
}

.ticket-junior-weekend,
.ticket-junior-saturdaysunday,
.ticket-junior-sunday {
    padding-right: 20%;
    background: linear-gradient(75deg, var(--highlight) 50%, var(--sunday-junior-ticket) 90%);
    color: black;
}
.ticket-junior-fryday {
    padding-right: 20%;
    background: linear-gradient(75deg, var(--highlight) 50%, var(--friday-junior-ticket) 90%);
    color: black;
}
.ticket-junior-frydaysaturday {
    padding-right: 20%;
    background:
        linear-gradient(75deg, var(--highlight), var(--highlight) 50%, transparent),
        linear-gradient(to bottom, var(--friday-junior-ticket), var(--saturday-junior-ticket));
    color: black;
}
.ticket-junior-saturday {
    padding-right: 20%;
    background: linear-gradient(75deg, var(--highlight) 50%, var(--saturday-junior-ticket) 90%);
    color: black;
}

div.large input {
    width: 30px;
    height: 30px;
}

.navbar {
    padding-left: 1em;
    padding-right: 1em;
}

.card-deck .card {
    width: 45%;
    margin-bottom: 5px;
    display: inline-block;
}

@media only screen and (min-width:0px) and (max-width: 640px) {
    /* put your css styles in here */
    .card-deck .card, .card {
        width: 100%;
        margin: 0%;
        margin-bottom: 5px;
        float: center;
    }

    .container {
        margin-bottom: 5px;
    }

    #actions {
        clear:both;
    }
}