#tickets-table .tickets-row{
    display: grid;
    grid-template-columns: repeat(4, .5fr) 3fr 1fr;
    grid-auto-flow: row;
    grid-template-rows: auto;
    border: 1px solid white;
    justify-items: center;
    align-items: center;
    padding: 1em;
    font-weight: bold;
    text-align: center;
}

.tickets-buton-yellow a{
    background-color: #eeb050;
    color: #000;
    border-radius: 0;
    font-size: small;
    font-weight: normal;
    border: 1px solid;
    padding: .3em 1.5em;          
    text-decoration: none;
    display: inline-block;
}

.tickets-buton-yellow a:hover, 
.tickets-buton-yellow a:active,
.tickets-buton-yellow a:focus{
    background-color: black;
    color: #eeb050;
}

.tickets-buton-yellow.inactive{
    background-color: black;
    color: #eeb050;
    border-radius: 0;
    font-size: small;
    font-weight: normal;
    border: 1px solid;
    padding: .3em 1.5em;          
    text-decoration: none;
    cursor: default;
}

.tickets-buton-yellow.red{
    background-color: red;
    color: #eeb050;
    border-radius: 0;
    font-size: small;
    font-weight: normal;
    border: 1px solid;
    padding: .3em 1.5em;          
    text-decoration: none;
    cursor: default;
}

#tickets-table .tickets-header{
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    padding-left: 50%; 
}

#tickets-table .show-title{
    transform: translateX(-50%);
}

#tickets-table .show-type{
    text-transform: uppercase;
}

@media (max-width: 1000px){
    #tickets-table .tickets-row{
        grid-template-columns: 1fr 3em 1fr auto;
        text-align: left;
        justify-items: start;
    }
    #tickets-table .tickets-row .miejsce{
        grid-column: 1 / 4;
        padding: 0.3em .3em .3em 0;
    }
    #tickets-table .tickets-buton-yellow {
        grid-column: 4;
        grid-row: 1 / 4;
    }
    #tickets-table .tickets-header{
        padding-left: 0;
        justify-content: center;
    }
    #tickets-table .show-title{
        transform: translateX(0);
        flex-basis: 100%;
        text-align: center;
    }
}

@media (max-width: 430px){
    #tickets-table .tickets-row{
        grid-template-columns: repeat(3, auto);
        justify-items: center;
        text-align: center;
        row-gap: 1rem;
    }
    #tickets-table .tickets-row .miejsce, #tickets-table .tickets-row .miasto{
        grid-column: 1/4;
    }    
    #tickets-table .tickets-buton-yellow {
        grid-column: 1/4;
        grid-row: auto;
    }    
    #tickets-table .tickets-row .data {
        justify-self: end;
    }
    #tickets-table .tickets-row .godzina{
        justify-self: start;
    }
}