:root {
    /* Объявление констант */
    --img-width: 1522.8px;
    --img-height: 1100.84px;
}

.scheme {
    height: var(--img-height);
    width: var(--img-width);
    margin: 0 auto;
    position: relative;
    overflow: auto;
}
.scheme svg {
    position: absolute;
    top: 0px;
    left: 0px;
    height: var(--img-height);
    width: var(--img-width);
}
.scheme > img{
    width: var(--img-width);
}
/* */
.scheme polygon {
    fill: #FFDBA4;
    cursor: pointer;
}
/* */
.scheme path {
    fill: #33ff00;
    cursor: pointer;
}

.scheme-item {
    position: absolute;
    cursor: pointer;
}
.scheme-name {
    font-weight: bold;
    font-size: 22px;
    color: #45627b;
    text-align: center;
    line-height: 13px;
}
.scheme-popup {
    display: none;
    border: 1px solid #777;
    padding: 10px;
    width: 300px;
    position: absolute;
    font-size: 31px;
/*    line-height: 14px;*/
    background: #fff;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    text-align: center;
}

/**************  */
#draggable-img {
    width: 1522.8px; /* Задайте нужный размер картинки */
    position: absolute;
    cursor: move; /* Меняем курсор, чтобы было понятно, что объект можно двигать */
    user-select: none; /* Запрещаем выделение картинки при перетаскивании */
}

/* */
.scheme polygon:hover, #hover {
    fill: #ffc70b;
}
.scheme polygon.active {
    fill: #FF8C0B !important;
}
/* */
.scheme path:hover, #hover {
    fill: #ffc70b;
}
.scheme path.active {
    fill: #FF8C0B !important;
}