div.seatCharts-container {
    width: fit-content;
    position: relative;
    height:215px;
    width: max-content;
    right:0px;
}

div.seatCharts-container-ns{

}
div.seatCharts-container-ew{
    top:127px;

}
div.seatCharts-container-diag{

}
div.seatCharts-cell.front-indicator {
    width: 26px;
    background-color: #e2e2e2;
    color: #4e4e4e;
    border-radius: 1px;
    margin: 0px;
    margin-top: 3px;
    margin-bottom: 3px;
}

div.seatCharts-cell {
    height: 22px;
    width: 22px;
    margin: 3px;
    float: left;
    text-align: center;
    outline: none;
    font-size: 13px;
    /*line-height: 22px;*/
    color: blue;
}

div.seatCharts-seat {
    background-color: darkgrey;
    color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    cursor: pointer;
    border-radius: 50%;
}

div.seatCharts-seat:focus {
    border: none;
}

/*
.seatCharts-seat:focus {
	outline: none;
}
*/

div.seatCharts-space {
    background-color: white;
}
div.seatCharts-row {
    justify-content: center;
    width: fit-content;
    margin: auto;
}


div.seatCharts-row:after {
    clear: both;
}

div.seatCharts-seat.selected {
    background-color: #00ecec;
}

div.seatCharts-seat.focused {
    background-color: #00ecec;
}

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

/*used to show seats blocked by admin*/
div.seatCharts-seat.gesperrt {
    border: 2px solid black;
    /*line-height: 18px;*/
}

div.seatCharts-seat.frei {
}


div.seatCharts-seat.no_click{
    cursor: not-allowed;
    box-shadow: none !important;
}

div.seatCharts-seat.status_legend {
    background-color: #8dd3c7;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
    position: relative;
    top: 0;
    transition: top ease 0.2s;
}

div.seatCharts-seat.status_legend:not(.no_click):hover {
    top: -3px;
}

div.seatCharts-seat.status_legend_warenkorb {
    cursor: not-allowed;
    background-color: #87189d;
}

div.seatCharts-seat.status_legend_abo {
    cursor: not-allowed;
    background-color: #3d38a7;
}
/**/

div.seatCharts-seat.warenkorb {
    background-color: #87189d;
}

div.seatCharts-seat.unavailable {
    background-color: #7E7E7E;
    cursor: not-allowed;
}

div.seatCharts-seat.unavailable_abo {
    background-color: #3d38a7;
   /* cursor: not-allowed;*/
}

ul.seatCharts-legendList {
    list-style: none;
    padding-left: 0;
}

li.seatCharts-legendItem {
    margin-top: 10px;
    line-height: 2;
}

div.seatCharts-seat.legendSeat{
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
    position: relative;
    top: 0;
    transition: top ease 0.2s;
}

div.seatCharts-seat.legendSeat:hover {
    top: -3px;
}

div.seatCharts-seat.available.a {
    background-color: #8dd3c7;
}

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

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

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

div.seatCharts-seat.available.e {
    background-color: #80b1d3;
}

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

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

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

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

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

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

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

/*.img-responsive .area {*/
/*    !*background-color: #00c7b1;*!*/
/*    display: block; position: absolute; transition: box-shadow 0.15s ease-in-out;*/
/*}*/
/*.img-responsive .area:hover {*/
/*    box-shadow: 0px 0px 1vw rgba(0,0,0,0.5);*/

/*}*/
.img-overlay-wrap {
    display: inline-block; /* <= shrinks container to image size */
    transition: transform 150ms ease-in-out;
    /*overflow: auto;*/
    /*top:0;*/
    /*left:0;*/
}
.svg-overlay-wrap {
    /*display: inline-block;*/
    transition: transform 150ms ease-in-out;
    /*height: 400px;*/
    height: 70vh;
    /*min-height: calc(100vh - calc(100vh - 600px));*/
    overflow: scroll;
    display: flex;
    position: relative;
    width: 100%;
    overflow-x: scroll;
    overflow-y: scroll;
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
    display: block;
    max-width: 100%;

}

.img-overlay-wrap svg {
    position: absolute;
    display: inline-block;
    /*width: 100%;*/
    top:0;
    left:0;
    height: 100%;
}
.svg-overlay-wrap svg {
    position: absolute;
    display: inline-block;
    top:0;
    left:0;
}
.svg-overlay-wrap svg circle {
 cursor: pointer;
}
.reserved {
    fill: #7E7E7E !important;
    pointer-events: none !important;
}
.svg-overlay-wrap svg text {
    cursor: pointer;
}
.svg-overlay-wrap svg circle:hover {
    fill: #00ecec !important;
}
.hoverStyle{
    fill: rgb(100, 100, 100)
}

/* Style for the rotation on / Off*/
.middle {
    text-align: center;
    margin: 0 auto;
    padding: 2rem;
    cursor: pointer;
}

.activeRotation {
    color: green;
    font-size: 33px;
}