seatmapv1/seatmap-client/style.css

body {
    background-color: #e9e9e9;
    margin: 2em;
}

a {
    color: #b71a4c;
}

.front-indicator {
    text-align: left;
    text-transform: uppercase;
    font-size: 1.2vw;
    margin-bottom: 1vw;
    margin-top: 5vw;
    display: inline-grid;
}

.stage-indicator {
    display: inline-grid;
    background-color: none;
    text-align: left;
    text-transform: uppercase;
}

.wrapper {
    width: 100%;
    text-align: center;
}

.container {
    margin: 0 auto;
    width: 100% !important;
    text-align: left;
}

.booking-details {
    float: left;
}

.booking-details p,li {
    font-size: 1vw;
}

.booking-details h2 {
    margin: 0px 0 10px 0;
    font-size: 1.2vw;
    text-transform: uppercase;
}

.booking-details h3 {
    margin: 0px 0 10px 0;
    font-size: 1vw;
}

div.seatCharts-cell {
    color: #182C4E;
    background-color: #e9e9e9;
}

div.seatCharts-seat {
    color: #FFFFFF;
    cursor: pointer;
}

div.seatCharts-row {
    /*height: 35px;*/
    height: 1vw;
}

div.seatCharts-seat.available {
    background-color: #B9DEA0;
}

div.seatCharts-seat.available.first-class {
    /* 	background: url(vip.png); */
    background-color: #3a78c3;
}

div.seatCharts-seat.focused {
    background-color: #76B474;
}

div.seatCharts-seat.selected {
    background-image: url("img/iconfinder_tick_216457.png");
    background-repeat: no-repeat;
    background-position: center center;
    /*background-size: 100% 100%, auto;*/
    background-size: 100% 100%, auto;
}

div.seatCharts-seat.unavailable {
    /*background-color: red;*/
    cursor: not-allowed;
    background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='10'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='10'/></svg>");
    background-image: url("img/iconfinder_basics-22_296812.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%, auto;
    opacity: 0.3;
}

div.seatCharts-container {
    /*border-right: 1px dotted #adadad;*/
    width: auto;
    padding: 0;
}

div.seatCharts-legend {
    padding-top: 0px;
}

ul.seatCharts-legendList {
    padding-left: 0px;
    display: grid;
    margin: 0;
}

span.seatCharts-legendDescription {
    margin-left: 0.5vw;
    line-height: 1.2vw;
}

.checkout-button {
    display: block;
    margin: 10px 0;
    font-size: 14px;
}

#selected-seats {
    max-height: 90px;
    overflow-y: scroll;
    overflow-x: none;
    width: 170px;
}

#spacer {
    margin: 2vw 0vw 0vw 0vw;
}

p {
    margin: 0px !important;
    font-size: 1vw;
}

.top-buffer-20 {
    margin-top: 20px;
}

.top-buffer-25 {
    margin-top: 25px;
}

.top-buffer-30 {
    margin-top: 30px;
}

div.seatCharts-cell {
    margin: 0.2vw;
}

#logo {
    width: 50%;
    position: absolute;
    bottom: 0;
    ;
}

.container-fluid {
    visibility: hidden;
    margin: 0;
    padding: 0;
}

h4 {
    font-size: 1.2vw;
}

.centered {
    position: fixed;
    /* or absolute */
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.glyphicon {
    font-size: 2vw;
    top: -.2vw;
    white-space:nowrap;
}

.btn-danger {
    width: 20px;
    text-align: center;
    height: 20px;
}

#my-cart-table td {
    vertical-align: middle;
    padding: 10px 0px 10px 0px;
    font-size: 14px;
}

.selectBuyerTypes {
    width: 200px;
    font-size: 14px;
}

.badge {
    padding: 0.3vw 0.5vw 0.5vw 0.5vw !important;
    font-size: 0.7vw !important;
    display: inline-block;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    vertical-align: middle;
    border-radius: 10px;
}

.modal-backdrop {
    display: none;
}

.badge-notify {
    background: red;
    position: relative;
    top: -0.8vw;
    right: 0.5vw;
}

.my-cart-icon-affix {
    position: relative;
    z-index: 999;
}

li.seatCharts-legendItem {
    margin-top: 0.2vw;
    line-height: 1.8vw;
}

#border {
    width: 80vw;
    margin: auto;
    border-bottom: 1px dotted #ccc;
}

#eventDesc {
    text-decoration: underline;
    font-weight: bold;
    font-family: "Bodoni","Times New Roman",Times,serif;
}

#venueList {
    display: none;
}

#venueDesc {
    font-family: "Franklin Gothic Medium","Times New Roman",Times,serif;
}

#datetime_DE {
    font-family: "Franklin Gothic Medium","Times New Roman",Times,serif;
}

.buttonOpenCart {
    background-color: dimgrey;
    color: floralwhite;
    font-size: 1vw;
    opacity: 0.8;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
    padding-top: 1vw;
    width: 20vw;
}

.buttonOpenCart:hover {
    opacity: 1;
}

#divCart {
    margin-top: 1vw;
}

#mycart {
    float: right;
    cursor: pointer;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8) url('img/30.svg') 50% 60% no-repeat;
}

.modal:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba( 255, 255, 255, .8) url('img/Tickets-small.png') 50% 50% no-repeat;
}

.modal.special:before {
    background: none;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */

body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */

body.loading .modal {
    display: block;
    background-color: #ffffff;
}

#seatmap_version {
    text-align: right;
    font-style: italic;
    font-size: 1vw;
}

.modal-content {
    background-color: #e9e9e9;
    min-width: 400px;
}

.jBox-closeButton-box:before {
    top: 0.7vw;
}

.jBox-closeButton-box .jBox-closeButton {
    top: 0.7vw;
}

.jBox-content {
    font-size: 1vw;
}

h3 {
    font-size: 2vw;
}

h5 {
    font-size: 1vw;
}

.cartFont {
    font-size: 14px;
}

#screenTooSmall {
    display: none;
    font-size: 1.5vw;
}

#IEdetected {
    display: none;
    font-size: 1.5vw;
}

.rowBooking {
    width: 60%;
    margin: auto;
}