table {
    width: 100%;
    border-collapse: collapse;
}

table .row td {
    padding-top: 2em;
}

table .row td:first-child {
    font-weight: 600;
    text-align: center;
}

table .row td:nth-child(18),
table .dimmedRow td:nth-child(17) {
    border-right: 2px solid var(--secondary);
}

table .row td:not(:first-child),
table .dimmedRow td {
    text-align: center;
}

table .dimmedText {
    font-size: .7em;
    border: 2px solid var(--background);
}

table .dimmedText.occupied button {
    background-color: #11da32;
}

table .dimmedText.occupied-double button {
    background-color: #0ba324;
}

table .dimmedText button {
    padding: .5em .3em;
    background-color: var(--gray);
    color: var(--light);
    border: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

table .sideLabel {
    text-align: center;
    font-weight: 600;
}

/* Ticket info */

.ticket-info {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 70vh;
    background-color: var(--tetriary);
    border-radius: 5px;
    padding: 1em 0;
    box-sizing: border-box;
    opacity: 1;
    transition: .2s;
    pointer-events: all;
    overflow-y: auto;
}

.ticket-info.hidden {
    pointer-events: none;
    opacity: 0;
}

.ticket-info .close-btn,
.add-ticket .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    padding: .3em 1.8em !important;
    border-radius: 0 !important;
    border-top-right-radius: 5px !important;
    background-color: var(--light) !important;
    transition: .2s;
    opacity: .7 !important;
    cursor: pointer !important;
    font-size: 1em !important;
    font-weight: 300 !important;
}

.ticket-info .close-btn:hover,
.add-ticket .close-btn:hover {
    background-color: var(--red) !important;
    opacity: 1 !important;
}

.ticket-info .close-btn i,
.add-ticket .close-btn i {
    font-size: 1.5em !important;
}

.ticket-info h2 {
    text-align: center;
    color: var(--secondary-mid-dark);
}

.ticket-info h3 {
    color: var(--secondary-mid-dark);
    text-align: center;
    font-weight: 400;
}

.ticket-info>div {
    padding: .5em 2em;
    box-sizing: border-box;
}

.ticket-info .ticket>div{
    display: flex;
    justify-content: space-between;
}

.ticket-info .buyer {
    background-color: var(--secondary);
}

.ticket-info .ticket-actions button {
    background-color: var(--red);
    color: var(--light);
    font-weight: 600;
    border: none;
    border-radius: 3px;
    font-size: 1em;
    padding: .1em .5em;
    cursor: pointer;
    float: right;
    margin-top: 2em;
}

.add-ticket {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw !important;
    height: 70vh !important;
    background-color: var(--tetriary);
    border-radius: 5px;
    padding: 1em 2em !important;
    box-sizing: border-box !important;
    opacity: 1;
    transition: .2s;
    pointer-events: all;
    overflow-y: auto;
}

.add-ticket.hidden {
    pointer-events: none;
    opacity: 0;
}

.add-ticket .form-row {
    margin: 0 auto;
    display: block;
}