.odontogram {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*width: fit-content;*/
    width: 100%;
    margin: auto;
}

svg.tooth {
  fill: white;
}

svg.tooth polygon {
    stroke: black;
    stroke-width: 0.5;
}

polygon:hover {
    cursor: pointer;
}

polygon:hover {
    fill: #6aa36f;
}

polygon.selected_face {
    fill: #2ecc71;
}

polygon.added_face {
    fill: #cc9b1d;
}

rect:hover {
    cursor: pointer;
    fill: #cc9b1d;
}

svg.tooth text {
    user-select: none;
    pointer-events: none;
}

.tooth-wrapper {
    margin: 0 2px;
    position: relative;
}

.flex-container-justify {
    display: flex;
    justify-content: space-around;
}

.flex-container-right {
    display: flex;
    justify-content: flex-end;
}

.flex-container-left {
    display: flex;
    justify-content: flex-start;
}

.tooth {
    font-size: 6pt;
    font-weight:normal;
}

@media screen and (max-width: 1073px) {
    .odontogram {
        transform: scale(0.8);
        width: 100%;
    }
}