.genplan__grid {
    display: grid;
    grid-template-columns: 25.5rem 1fr;
    grid-template-rows: 1fr 9.6rem;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin: 0 5rem;
    padding: 4rem 0;
    position: relative;
    }
    
    .genplan__nav { 
        grid-area: 1 / 1 / 3 / 2;
        width: 100%;
        height: 100%;
        border-radius: 0.7rem 0 0 0.7rem;
        background: #282828;
        padding:4rem;
        position: relative;
        z-index: 1;
    }
    .genplan__plots {
        margin-top: -4rem;
        border-radius: 0.7rem 0.7rem 0.7rem 0rem;
        overflow: hidden;
        cursor: pointer;
    }
    .genplan__bottom {
        display: flex;
    }
    .genplan__h2 {
        color: #FFF;
        font-size: 3.6rem;
        font-weight: 700;
        line-height: normal;
        padding: 0;
        margin: 0;
    }
    .gen-nav__menu {
        color: #fff;
        width: 18rem;
        margin: 4rem 0;
    }
    .gen-nav__item {
        display: flex;
        position: relative;
        border-bottom: 1px solid #494949;
        height: 5.4rem;
        font-size: 1.3rem;
        color: #fff;
        line-height: 140%;
        letter-spacing: 0.5px;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        font-style: normal;
        font-weight: 300;
        align-items: center;
    }
    .gen-nav__item:hover {
        padding-left: 1rem;
    }
    .gen-nav__item.nohover:hover {
        padding-left:0;
        cursor: default;
    }
    .gen-nav--green {
        color: #2DBD44;
    }
    .gen-nav--yellow {
        color: #EBC43C;
    }
    .gen-nav--red {
        color: #D9D9D9;
    }
    .gen-nav__item:last-child {

    }
    .gen-nav__h4 {
        color: #FFF;
        font-family: TWKLausannePan;
        font-size: 1.3rem;
        font-style: normal;
        font-weight: 800;
        line-height: 140%; /* 1.82rem */
    }
    .gen-nav__icon {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        width: 2.4rem;
        height: 2.4rem;
        padding: 0;
        margin-right: 1.5rem;
    }
    .kpp-icon {
        background-image: url(../images/dist/genplan/icons/1.svg);
    }
    .spot-icon {
        background-image: url(../images/dist/genplan/icons/2.svg);
    }
    .child-icon {
        background-image: url(../images/dist/genplan/icons/3.svg);
    }
    .prud-icon {
        background-image: url(../images/dist/genplan/icons/4.svg);
    }
    .guestparking-icon {
        background-image: url(../images/dist/genplan/icons/5.svg);
    }
    .obshestv-icon {
        background-image: url(../images/dist/genplan/icons/6.svg);
    }
    .available-icon {
        background-image: url(../images/dist/genplan/icons/u1.svg);
    }
    .booked-icon {
        background-image: url(../images/dist/genplan/icons/u2.svg);
    }
    .sold-icon {
        background-image: url(../images/dist/genplan/icons/u3.svg);
    }

    .gen-nav__text {

    }
    .gen-nav__info {
        flex-shrink: 0;
        color: #9D9D9D;
        font-size: 1.4rem;
        line-height: 140%;
        background-color: #282828;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        border-radius: 0 0 0.7rem 0;
    }

.genplan svg {
    width: 100%;
    max-width: 100%;
}
.genplan__numbers {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;
    text-align: center;
}
.gen-numbers__item {
    font-size: 1.6rem;
    color: #5C5C5C;
    line-height: 140%; /* 4.2rem */
}
.gen-numbers__big {
    font-size: 3rem;
    font-weight: 800;
}
.tooltip path {
    opacity: 0.5;
    stroke: #75FF8B;
    stroke-linejoin: round;
    stroke-width: 0.2rem;
    fill: #1EFF78;
    fill-opacity: .5;
}
.tooltip path.active,
.tooltip path:hover {
    opacity: 1;
}
.tooltip.booked path {
    opacity: 0.5;
    stroke: #FFCE51;
    stroke-linejoin: round;
    stroke-width: 0.2rem;
    fill: #FFC700;
    fill-opacity: .5;
}
.tooltip.booked path:hover {
    opacity: 1;
}
.tooltip.sold path {
    opacity: 0.5;
    stroke: #FF5B5B;
    stroke-linejoin: round;
    stroke-width: 0.2rem;
    fill: #E80909;
    fill-opacity: .5;
}
.tooltip.sold path:hover {
    opacity: 1;
}


.tooltip circle {
    fill:#2DBD44;
    stroke: #008A16;
}
.tooltip.booked circle {
    fill:#EBC43C;
    stroke: #CFA100;
}
.tooltip.sold circle {
    fill:#D9D9D9;
    stroke: #B0B0B0;
}

:not(svg) {
    transform-origin: 0px 0px;
}





.tooltip circle,
.tooltip text {
    display: block;
}
.tooltip text {
    fill:#FFFFFF;
    font-size: 1.2rem;
}
.tooltip.booked text,
.tooltip.sold text {
    fill:#000;
}

.tooltip:hover circle,
.tooltip:hover text {
    display: block;
}

.tooltip.booked:hover circle[id^=Ellipse] {
    stroke: #FFC700;
}

.tooltip.sold:hover circle[id^=Ellipse] {
    stroke: #FF5B5B;
}

.tooltip_templates {
    display: none;
}



.tooltipster-sidetip.tooltipster-custom .tooltipster-box {
    border-radius: 7px;
    background-color: #fff;
    border: none;
    display: flex;
    align-items: center;
    width: auto;
    
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-box .tooltip-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 10px;
    color: #000;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-box .tooltip-info .plot_name {
    font-weight: bold;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-box .tooltip-info .plot_size {
    color: #5c5c5c;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-box .tooltip-info .status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    color: #2DBD44;
    font-weight: bold;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-box .tooltip-info .status.booked {
    color: #EBC43C;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-box .tooltip-info .status.sold {
    color: #FF0000;
}
.available {
    color: #2DBD44
}
.booked {
    color: #EBC43C;
}
.sold {
    color: #FF0000;
}

.tooltipster-follower .tooltipster-box {
    background: #fff;
    border: none;
    border-radius: 0.7rem;
}
.tooltipster-follower .tooltipster-content {
    color: #fff;
    padding: 1rem;
    background: #fff;
    border: none;
    overflow: inherit;
    border-radius: 0.7rem;
}
.tooltip-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: baseline;
    justify-content: center;
    background: #fff;
    padding: 0;
    margin: 0;
    color: #000;
    gap: 0.5rem;
    opacity: 1;
    font-size: 1.3rem;
    line-height: 1.1;
}
.tooltip-building {
    border-radius: 0.7rem;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    text-align: center;
    background: #fff;
    width: auto;
    height: auto;
}
.tooltip-building p {
    margin:0;
}
.tooltip-building img {
    height: auto;
    width: 100%;
    z-index: 0;
    max-height: 10rem;
    object-fit: cover;
}

@media only screen and (max-width:992px) {
    .genplan__grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        margin: 0 2rem;
        padding: 3rem 0;
    }
    .genplan__nav {
        width: 100%;
        height: 100%;
        border-radius: 0.7rem 0.7rem 0 0;
        padding: 2rem;
    }
    .genplan__h2 {
        text-align: center;
    }
    .gen-nav__menu {
        width: auto;
        display: flex;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin: 2rem 0 0;
    }
    .gen-nav__menu:nth-child(3) {
        display: none;
    }
    .gen-nav__item {
        font-size: 1.2rem;
        height: auto;
        border:none;
        letter-spacing: 0;
    }
    .gen-nav__icon {
        width: 2rem;
        height: 2rem;
        margin-right: 0.7rem;
    }
    .gen-nav__item:hover {
        padding-left: 0;
    }
    .gen-nav__h4 {
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .genplan__plots {
        margin-top: 0rem;
        border-radius: 0;
        overflow: hidden;
        cursor: pointer;
        padding-top: 0;
        background: #282828;
    }
    .genplan__bottom {
        background: #282828;
    }
    .gen-nav__info {
        display: none;
    }
    .genplan__numbers {
        padding: 1rem 0;
    }
    .gen-numbers__item {
        font-size: 1.3rem;
        color:#9D9D9D;
    }
    .gen-numbers__big {
        font-size: 1.8rem;
        color: #fff;
    }

}
@media only screen and (max-width:767px) {
    .genplan__grid {
        margin: 0;
        overflow: hidden;
    }
    .genplan__nav {
        overflow: hidden;
    }
    .gen-nav__menu {
        gap: 3rem;
        display: flex;
        max-width: none;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .8rem;
    }
    .gen-nav__item {
        text-align: left;
        justify-content: flex-start;
    }
    ::-webkit-scrollbar:horizontal{
        -webkit-appearance: none;
        height: .3rem;
        border-radius: .7rem;
    }
    .gen-nav__text {
        white-space: nowrap;
    }
    .genplan__plots {
        overflow-x: scroll;
        width: 200%;
        height: auto;
    }
    .genplan {
        width: 156%;
    }
    .genplan svg {
        width: 200%;
        height: 200%;
        max-width: 76.8rem;
        overflow-x: scroll;
    }

}
@media only screen and (max-width:576px) {

}