body{
    margin: 0;
    padding: 0;
    color: white;
}

.main_content {
    background: rgb(95, 163, 252);
}

.topBar {
    display: none;
    background: rgb(91, 245, 116);
}

.sideBar {
    background: white;
    position: absolute;
    width: 200px;
    height: 100%;
    align-self: center;
}

.content_3D {
    background: red;
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    position: absolute;
    right: 0;
}


/* sidebar  */

.sideBar > h2 {
    text-align: center;
    background-color: #db5e5e;
    margin: 0;
    padding: 0.5em 0;
}

/*  */
.sideBar_hover {
    position: absolute;
    background: #d84848;
    width: 100%;
    height: 0px;
    padding: 1px;
    transition: all 0.3s cubic-bezier(.08,.82,.17,1);
}
.sideBar_hover.hidden {
    background: transparent;
}

.sideBar ul {
    padding: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    //width: calc(100% - 2px);
    width: 100%;
}
.sideBar ul > li {
    height: 0px;
    transition: all 0.3s cubic-bezier(.08,.82,.17,1);
}

.sideBar li.selected {
    background-color: #db5e5e;
}
.sideBar li.selected .description {
    color: white;
}

.sideBar .thumb_view {
    text-align: center;
    //background: #ffffff;
    margin: 1px;
    padding: 10px;
    cursor: pointer;
    height: calc(100% - 1.5em)
}

.sideBar img.icon {
    height: calc(100% - 1.5em);
    
}

.sideBar li .description {
    margin: 0;
    color: grey;
}


.sideBar .thumb_view:hover .description {
    color: white;
}


/* vue 3D */

.content_3D {
    background-color: #575757;
}


#x3d_opaque, #x3d_wireframe, #x3d_driver {
    position: absolute;
    background: transparent;
}

#x3d_opaque {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
}
#x3d_wireframe {
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
}
#x3d_driver {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}





/* logos */
#logo_CROC {
    position: absolute;
    top: 0;
    right: 0;
    width: 13%;
    margin: 20px;
}
#logo_createeth {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 16%;
    margin: 20px;
}
#logo_uca {
    position: absolute;
    top: 0;
    left: 0;
    width: 6%;
    margin: 20px;
}