.tippy-content {
    padding: 0px;
    border-radius: 0px;
    background-color: $blanco;

    .card.card-tippy {
        border: none;
        border-radius: 0px;
        background-color: $blanco;
        color: $negro;
    
        .franja {
            position: absolute;
            top: 50%;
            left: 8px;
            width: 10px;
            height: 85%;
            z-index: 1;
            transform: translate(0%, -50%);
    
            &.disponible {
                background-color: #7ED321;
            }
            &.apartado {
                background-color: #F8E71C;
            }
            &.vendido {
                background-color: #696969cc;
            }
        }
    
        .card-body {
            padding-left: 30px;
        }
    }
}


.bg-morado {
    background-color: #73375f;
    padding-top: calc(60px + 60px);

    svg#svg_casa_elite {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    svg#svg_casa_elite {
        background-image: url(/img/edificio_casaelite.png);

        .st0-1 {
            cursor: pointer;

            &.disponible{
                &:hover,
                &.active {
                    fill: rgba($color: #7dd321, $alpha: 0.4);
                    stroke: #7ED321;
                }
            }
            &.apartado {
                &:hover,
                &.active {
                    fill: rgba($color: #F8E71C, $alpha: 0.4);
                    stroke: #F8E71C;
                }
            }
            &.vendido {
                &:hover,
                &.active {
                    fill: rgba($color: #696969cc, $alpha: 0.4);
                    stroke: #696969cc;
                }
            }
        }
    }

    h3 {
        font-family: $font-family-crimson;
        font-size: 20px;
        letter-spacing: 0.92px;
        color: $blanco;
        font-style: italic;
        position: relative;
        display: inline-block;
        z-index: 1;

        &::before,
        &::after {
            content: "";
            width: 95%;
            height: 1px;
            background-color: $blanco;
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0%);
        }

        &::before {
            top: -8px;
        }

        &::after {
            bottom: -10px;
        }

        @media screen and (min-width: 768px) {
            position: absolute;
            top: 140px;
            right: 5px;
        }
        @media screen and (min-width: 992px) {
            font-size: 30px;
        }
        @media screen and (min-width: 1300px) {
            right: 10%;
        }
    }
}

.interactivo {
    background-color: $blanco;
    padding: 60px 0px;

    h3 {
        font-size: 20px;

        @media screen and (min-width: 768px) {
            font-size: 30px;
        }
    }

    #btn-pisos {
        flex-wrap: wrap;
    }

    .btn-morado {
        background-color: #F6F6F6;
        color: $c8c8686;
        font-weight: 300;
        border-radius: 30px;
        font-family: $font-family-roboto;
        min-width: 120px;
        font-size: 14px;
        margin-bottom: 5px;

        &.active {
            background-color: #743A62;
            color: $blanco;
            font-weight: 500;
        }

        @media screen and (min-width: 768px) {
            min-width: 105px;
            font-size: 13px;
        }
        @media screen and (min-width: 992px) {
            min-width: initial;
            font-size: 12px;
        }
        @media screen and (min-width: 1200px) {
            font-size: 14px;
        }
    }

    svg#svg_pb,
    svg#svg_p1,
    svg#svg_p2,
    svg#svg_p3,
    svg#svg_p4,
    svg#svg_p5 {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    svg#svg_pb {
        background-image: url(/img/pisos/00/pb.png);
    }
    svg#svg_p1 {
        background-image: url(/img/pisos/01/p1.png);
    }
    svg#svg_p2 {
        background-image: url(/img/pisos/02/p2.png);
    }
    svg#svg_p3 {
        background-image: url(/img/pisos/03/p3.png);
    }
    svg#svg_p4 {
        background-image: url(/img/pisos/04/p4.png);
    }
    svg#svg_p5 {
        background-image: url(/img/pisos/05/p5.png);
    }

    .batch {
        cursor: pointer;

        &.disponible {
            fill: rgba($color: #7dd321, $alpha: 0.4);
            stroke: #7ED321;

            &.active {
                fill: transparent;
            }
        }
        &.apartado {
            fill: rgba($color: #F8E71C, $alpha: 0.4);
            stroke: #F8E71C;

            // &.active {
            //     fill: transparent;
            // }
        }
        &.vendido {
            fill: rgba($color: #696969cc, $alpha: 0.4);
            stroke: #696969cc;

            // &.active {
            //     fill: transparent;
            // }
        }
    }

    .leyenda {
        @media screen and (min-width: 768px) {
            position: absolute;
            top: 310px;
            right: 50px;
            z-index: 1;
            min-width: 480px;
            min-height: 192px;

            @media screen and (min-width: 992px) {
                min-width: 550px;
                top: 350px;
            }
            @media screen and (min-width: 1200px) {
                min-width: 550px;
                top: 430px;
            }
        }

        .card {
            box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.5);
            border: none;
            border-radius: 0px;

            .franja {
                position: absolute;
                top: 50%;
                left: 8px;
                width: 10px;
                height: 85%;
                z-index: 1;
                transform: translate(0%, -50%);

                &.disponible {
                    background-color: #7ED321;
                }
                &.apartado {
                    background-color: #F8E71C;
                }
                &.vendido {
                    background-color: #696969cc;
                }
            }

            .card-body {
                padding-left: 30px;
            }
        }

        h5 {
            font-weight: 500;
        }

        ul {
            li {
                display: flex;
                align-items: center;

                &::before {
                    content: "";
                    width: 22px;
                    height: 22px;
                    border-radius: 24px;
                    display: inline-block;
                    margin-right: 5px;

                }

                &.disponible::before {
                    background-color: #7ED321;
                }
                &.apartado::before {
                    background-color: #F8E71C;
                }
                &.vendido::before {
                    background-color: #696969cc;
                }
            }
        }
    }
}

#mdInformacion {
    .modal-content{ 
        border-radius: 0px;
        box-shadow: none;
        border: none;
    }

    .modal-header {
        background-color: #743A62;
        color: $blanco;
        border-radius: 0px;

        h4 {
            font-family: $font-family-crimson;
            font-style: italic;
            font-weight: 400;
            color: $blanco;
            font-size: 17px;
            letter-spacing: 0.92px;

            &.tlo {
                position: relative;

                &::before,
                &::after {
                    content: "";
                    width: 95%;
                    height: 1px;
                    background-color: $blanco;
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%, 0%);
                }

                &::before {
                    top: -8px;
                }

                &::after {
                    bottom: -10px;
                }
            }

            @media screen and (min-width: 768px) {
                font-size: 22px;
            }
        }

        .closed {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1;
            cursor: pointer;
        }
    }

    .modal-body {
        h6 {
            color: #743A62;
            font-weight: 500;
            font-size: 15px;
            margin-bottom: 0px;
        }

        hr {
            border-color: #743A62;
        }

        ul {
            list-style: none;
            padding-left: 0px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            li {
                width: 100%;
                color: #743A62;
                font-weight: 400;
                font-size: 14px;

                @media screen and (min-width: 768px) {
                    width: 50%;
                }
            }
        }

        p {
            color: #743A62;
            font-weight: 400;
            font-size: 14px;
        }

        input {
            width: 100%;
            border: 1px solid;
            border-color: #743A62;
            border-radius: 0px;
            color: #743A62;
            font-size: 13px;
            padding: 6px 15px;
        }

        textarea {
            width: 100%;
            border: 1px solid;
            border-color: #743A62;
            border-radius: 0px;
            color: #743A62;
            font-size: 13px;
            padding: 6px 15px;
            resize: none;
        }

        .btn-morado {
            background-color: #743A62;
            color: $blanco;
            font-weight: 400;
            border-radius: 30px;
            font-family: $font-family-roboto;
            min-width: 120px;
        }

        h4 {
            font-style: italic;
            font-weight: 500;
            color: #73375f;
            font-size: 28px;
            letter-spacing: 0.92px;
        }
    }
}