body {
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    margin-bottom: 10px !important;
}
.myFlex{
    display: flex;
}

.plan {
    
    margin: 0 auto;
    width: 600px;
    height: 800px;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.plot {
    fill: lightgray;
    stroke: black;
    stroke-width: 2;
}

.info-box {
    position: absolute;
    display: none;
    background-color: white;
    border: 1px solid black;
    padding: 10px;
    pointer-events: none;
}

.info-box span {
    display: block;
}
/* Example styles for form and other elements */
.form-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    width: 300px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type=text], input[type=number], textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
}

inpute[type=submit]:hover {
    background-color: #45a049;
}

.sold {
    fill: gray;
    stroke: #000;
    stroke-miterlimit: 10;
}

.resident {
    fill: #f90700 !important;
    stroke: #000 !important;
    stroke-miterlimit: 10 !important;
}

.reserved {
    fill: #690071;
    stroke: #000;
    stroke-miterlimit: 10;
}

.commercial {
    fill: #05da04;
    stroke: #000;
    stroke-miterlimit: 10;
}

.yellowPlots {
    fill: #f2ec1c;
    stroke: #000;
    stroke-miterlimit: 10;
}

.plot.selected {
  fill: #336699; /* Darker fill color */
  stroke: #fff; /* Black stroke color */
  stroke-width: 2px; /* Heavier stroke */
}

    .st0{fill:#DCDCDC;stroke:#000000;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#000000;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    
        .st2{fill:none;stroke:#000000;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:12;}
    .st3{fill:none;stroke:#000000;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;}
    .st4{fill:none;stroke:#000000;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10.4123,10.4123;}
    .st5{fill:none;stroke:#000000;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12.265,12.265;}
    .st6{fill:#079647;stroke:#010101;stroke-miterlimit:10;}
    .st7{fill:#8BBBE5;stroke:#010101;stroke-miterlimit:10;}
    .st8{fill:#DB1F26;stroke:#010101;stroke-miterlimit:10;}
    .st9{fill:#F37E80;stroke:#010101;stroke-miterlimit:10;}
    .st10{fill:#6B52A2;stroke:#010101;stroke-miterlimit:10;}
    .st11{fill:#F6EC1D;stroke:#010101;stroke-miterlimit:10;}