html, body {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow: auto;
    overflow-x: hidden;
    background-color: #c7d8e2
}

.hidden{
    display: none !important
}

.cursor-pointer{
    cursor: pointer
}



#visualizer-container {
    display: grid;
}

#box1,
#box2 {
    grid-area: 1 / 1; /* Places both in the same grid cell */
}




.marker{
    width: 30px;
    height: 30px;
}

#tagrender {
    position: absolute;
    top: 31.79%; /* y */
    left: 59.84%; /* x */
}

#tagplader {
    position: absolute;
    top: 32.5%; /* y */
    left: 23.24%; /* x */
}

#graesarmering {
    position: absolute;
    top: 89.68%; /* y */
    left: 16.72%; /* x */
}

#faskine {
    position: absolute;
    top: 70%; /* y */
    left: 84%; /* x */
}

#linjedraen {
    position: absolute;
    top: 71%; /* y */
    left: 67.24%; /* x */
}

#nedsivningsbroend {
    position: absolute;
    top: 56.24%; /* y */
    left: 1.38%; /* x */
}

#vandhanebroend {
    position: absolute;
    top: 55.93%; /* y */
    left: 37.74%; /* x */
}

/*#doermaatter {
    position: absolute;
    top: 58.5%;*/ /* y */
    /*left: 47.82%;*/ /* x */
/*}*/

#doer {
    position: absolute;
    top: 63.74%; /* y */
    left: 49%; /* x */
}

#facade {
    position: absolute;
    top: 32%; /* y */
    left: 47%; /* x */
}

#tagsten {
    position: absolute;
    top: 6%; /* y */
    left: 49%; /* x */
}

#vinduer {
    position: absolute;
    top: 16.35%; /* y */
    left: 39.27%; /* x */
}

#raekvaerk {
    position: absolute;
    top: 23.57%; /* y */
    left: 81.94%; /* x */
}


/*Choise containers*/

.choise-container{
    width: 550px;
}

    .choise-container .card-header {
        background-color: #415f77 !important;
    }

#tagrenderChoises {
    position: absolute;
    bottom: 8%; /* y */
    right: 1%; /* x */
}

#tagpladerChoises {
    position: absolute;
    bottom: 8%; /* y */
    right: 1%; /* x */
}

#linjedraenChoises {
    position: absolute;
    top: 1%; /* y */
    right: 1%; /* x */
}

#doermaatterChoises {
    position: absolute;
    bottom: 6.5%; /* y */
    right: 1%; /* x */
}

#doerChoises {
    position: absolute;
    bottom: 8%; /* y */
    right: 1%; /* x */
}

#facadeChoises {
    position: absolute;
    bottom: 8%; /* y */
    right: 1%; /* x */
    width: 300px;
}

#tagstenChoises {
    position: absolute;
    bottom: 8%; /* y */
    right: 1%; /* x */
    width: 300px;
}

#vinduerChoises {
    position: absolute;
    bottom: 8%; /* y */
    right: 1%; /* x */
    width: 300px;
}

#raekvaerkChoises {
    position: absolute;
    bottom: 8%; /* y */
    right: 1%; /* x */
}

.btn-primary {
    color: #000000 !important;
    background-color: #c7d8e2 !important
}

    .btn-primary:hover {
        color: #ffffff !important;
        background-color: #415f77 !important
    }

.btn-primary-active {
    color: #ffffff !important;
    background-color: #415f77 !important
}

    .btn-primary-active:hover {
        color: #000000 !important;
        background-color: #c7d8e2 !important
    }


.chooseslist {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* Makes li elements horizontal */
    gap: 10px; /* Optional: adds spacing between items */
    width: 100%;
}

    .chooseslist li {
        background-color: #415f77;
        color: #ffffff;
        cursor: pointer
    }

        .chooseslist li:hover {
            background-color: #c7d8e2;
            color: #000000;
            cursor: pointer
        }

        .chooseslist li.active-choice {
            background-color: #c7d8e2;
            color: #000000;
        }

            .chooseslist li.active-choice:hover {
                background-color: #415f77;
                color: #ffffff;
            }

        .chooseslist li span{
            display: block;
            width: 100%;
            text-align: center;
            margin-top: 5px;
        }

.close-choises {
    width: 40px;
    height: 40px;
    padding: 5px;
    cursor: pointer
}

#houseChoices{
    position: absolute;
    bottom: 1%;
    right: 0.7%;
    padding: 5px;
    width: 310px
}

.house-choice {
 
    width: 20px;
    height: 20px;
    background-color: #000000
}


/* tooltip */
.custom-tooltip {
    --bs-tooltip-bg: #415f77;
    --bs-tooltip-color: var(--bs-white);
}