body,html {
    font-family: Roboto, sans-serif;
	margin:0 ;
	padding:0 ;
	margin-top:-10px;
	font-size:larger;
}
.container {
display: flex;
justify-content: center;
text-align:center;

}
.box {
background-color:white;
}

h1 {
    color: #333;
}
h3 { 
	margin:0px;
	padding:0px;
	
}

p {
margin:0;
padding: 0;
}

.center {
margin-left: 0px;
}
.seat {
    width: calc(100%/14); /* Adjust the width as needed */
    max-width:25px;
    height: 27px; /* Adjust the height as needed */
    margin: 1px; /* Adjust the margin as needed */
    background-color: #3498db; /* Blue color */
    border-radius: 25%; /* Rounded corners */
    cursor: pointer;
}

.seat.selected {
    background-color: green; /* Red color for selected seats */
}

.row {
    display: flex;
    justify-content: flex-start; /* Align row number to the left */
    margin: 5px;
}

.row-number {
    font-size: 16px; /* Adjust font size as needed */
    width: 10px; /* Fixed width for row numbers */
    text-align: right; /* Align row numbers to the right within their fixed-width container */
    margin-right: 10px; /* Adjust spacing between row number and seats */
}
.seats {
    display: block;
    margin: 0;
    margin-left:5px;
    margin-right:5px;
    margin-top:-30px;
    width:80%;
}
.reserved {
    width: calc(100%/14); /* Adjust the width as needed */
    max-width:25px;
    height: 27px; /* Adjust the height as needed */
    margin: 1px; /* Adjust the margin as needed */
    background-color: #e74c3c; /* Red color for reserved seats */
    border-radius: 25%; /* Rounded corners */
    cursor: not-allowed;
}
/* CSS for the legend section */
.legend {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 20px;
}

.legend h2 {
    font-size: 16px;
    margin-bottom: 10px;
}

/* CSS for the legend items */
.legend-item {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    font-size: 10px;
}

.available {
    background-color:#3498db; 
}

.reserved {
    background-color: #e74c3c; /* Red for reserved seats */
}

.selected {
    background-color: green;
}
/* Style the line */
hr {
border: 1px solid #000;
}
/* Style the text */
.podium-text {
background-color: #000;
color:#FFF;
padding: 0 10px;
position: relative;
text-align:center;
}
.podium-container {
            border: 2px solid #000; /* Add a border around the div */
            display: inline-block; /* Make the div inline so it stays within the line */
	margin:0px;
	margin-left: 40px;
	width: 80%;
        }
#seat-plan-container p{
font-size:14px;
}
#next-button {
margin-left:20px;
margin-bottom:50px;
}
#back-button
{
margin-left:20px;
margin-bottom:50px;
}
.deeplink{
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
background-color:#ff69b4;
color:white;
text-align:center;
border-radius:5px;
font-size:24px;
font-weight:bold;
width:80%;
margin-left:10%;
transition: background-color 0.3s;

}
.deeplink:hover
{
background-color:pink;
}
#reservation-overview {
text-align:left;

}