/* @media screen and (max-width: 768px) {
    x3d, canvas {
        width: 100% !important;
        height: 300px !important;
    }
} */

x3d, canvas {
    width: 100% !important;
    height: 300px !important;
}

/* html, body {
    height: 100%;
}

.cad {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

x3d {
    width: 100% !important;
    height: 300px !important;
}

.properties {
    border: 2px solid #7f8c8d;
    padding: 10px;
    border-radius: 10px;
    width: 600px;
    float: right;
    text-align: center;
}

.features {
    border: 2px solid #7f8c8d;
    width: 28%;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
}

.features {
    background-color: whitesmoke;
}

.features .groups {
    background-color: whitesmoke;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    cursor: pointer;
}

.features .groups:hover {
    background-color: cornflowerblue;
}

.features .names {
    display: none;
    padding: 10px 20px 10px 20px;
    cursor: pointer;
}

.features .names:hover {
    background-color: lightskyblue;
}

.details {
    border: 2px solid #7f8c8d;
    width: 68%;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
} */