#wybrane-miejsce {
    background-color: #324c71;
    color: white;
    font-weight: bold;
    margin-top: 10px;
    padding: 5px;
    text-align: center;
}

#block-wizualizacja {
    border: 1px solid #d4d4d4;
    padding: 10px;
    position: relative;
}

#legenda .blok {
    border: 1px solid black;
    display: inline-block;
    height: 15px;
    vertical-align: middle;
    width: 15px;
}

#wizualizacja a:focus {
    outline-width: 0;
}

/* miejsce wolne */
#wizualizacja .miejsce.w {
    cursor: pointer;
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 1;
}

#wizualizacja a:focus .miejsce.w {
    stroke: #00adee;
    stroke-width: 3;
}

#wizualizacja .label.w {
    cursor: pointer;
    fill: #000000;
}

#legenda .w {
    background-color: #ffffff;
    border: 1px solid #000000;
}

/* miejsce zarezerwowane (nowe) */
#wizualizacja .miejsce.n {
    cursor: pointer;
    fill: #5ada5a !important;
    stroke: #000000;
    stroke-width: 1;
}

#wizualizacja a:focus .miejsce.n {
    stroke: #00adee;
    stroke-width: 3;
}

#wizualizacja .label.n {
    cursor: pointer;
    fill: #000000 !important;
}

#legenda .n {
    background-color: #5ada5a;
    border: 1px solid #000000;
    color: #000000;
}

/* miejsce zajęte */
#wizualizacja .miejsce.z {
    fill: #333333;
    stroke: #000000;
    stroke-width: 1;
}

#wizualizacja .label.z {
    fill: #ffffff;
}

#legenda .z {
    background-color: #333333;
    border: 1px solid #000000;
    color: #ffffff;
}

/* miejsce wyłączone */
#wizualizacja .miejsce.x {
    fill: #333333;
    stroke: #000000;
    stroke-width: 1;
}

#wizualizacja .label.x {
    fill: #ffffff;
}

#legenda .x {
    background-color: #333333;
    border: 1px solid #000000;
    color: #ffffff;
}

#wizualizacja .miejsce.ui-selecting {
    fill: #f39814 !important;
}

#wizualizacja .miejsce.ui-selected {
    fill: #f39814 !important;
}