.seat {
    padding: 1px;
    cursor: pointer;
    /*transition: transform .2s;*/ /* Animation */
    border-style: solid;
    border-width: thin;
}
/*
    .seat:hover {
        transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport)
    }
*/
.seatholder {
    /* transition: transform .2s; Animation */
    border-style: solid;
    border-width: thin;
}
/*
    .seatholder:hover {
        transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport)
    }
*/

.selected {
    border: 1px #2d89ef solid;
}

    .selected:after {
        width: 0;
        height: 0;
        border-top: 1px solid #2d89ef;
        border-left: 1px solid transparent;
        position: absolute;
        display: block;
        right: 0;
        content: ".";
        top: 0;
        z-index: 1001;
    }

    .selected:before {
        position: absolute;
        content: "\f111"; /*f218"; f192*/
        color: #000;
        top: -4px;
        left: 1px;
        font-size: 13px;
        font-family: 'FontAwesome';
        z-index: 1002;
    }

/* Layout Seat Design */
/*  '1   Available
    '2   Processing
    '3   Sold
    '4   Block
    '5   Maintenance*/

.seatprocess {
    border: 1px #ffd800 solid;
    background-color: white;
}

    .seatprocess:before {
        position: absolute;
        content: "\f218"; /*f218";*/
        color: #000;
        top: -3px;
        left: 2px;
        font-size: 13px;
        font-family: 'FontAwesome';
        z-index: 1002;
    }

.seatsold {
    border: 1px #ff0000 solid;
    background-color: white;
}

    .seatsold:before {
        position: absolute;
        content: "\f007"; /*f218";*/
        color: #000;
        top: -3px;
        left: 2px;
        font-size: 13px;
        font-family: 'FontAwesome';
        z-index: 1002;
    }

.seatblock {
    border: 1px #ff0000 solid;
    background-color: white;
}

    .seatblock:before {
        position: absolute;
        content: "\f007"; /*f05e";*/
        color: #000;
        top: -3px;
        left: 2px;
        font-size: 13px;
        font-family: 'FontAwesome';
        z-index: 1002;
    }

.seatfix {
    border: 1px #ff0000 solid;
    background-color: white;
}

    .seatfix:before {
        position: absolute;
        content: "\f0ad"; /*f218";*/
        color: #000;
        top: -3px;
        left: 2px;
        font-size: 13px;
        font-family: 'FontAwesome';
        z-index: 1002;
    }

.seatlock {
    border: 1px #ff0000 solid;
    background-color: white;
}

    .seatlock:before {
        position: absolute;
        content: "\f023"; /*f218";*/
        color: #000;
        top: -3px;
        left: 2px;
        font-size: 13px;
        font-family: 'FontAwesome';
        z-index: 1002;
    }

.seatunclickable {
    border: 1px #ff0000 solid;
    background-color: white;
}

    .seatunclickable:before {
        position: absolute;
        content: "\f057"; /*f218";*/
        color: #000;
        top: -3px;
        left: 2px;
        font-size: 13px;
        font-family: 'FontAwesome';
        z-index: 1002;
    }