@charset "UTF-8";
/*
VIEWER
Estilo del visualizador

Autor: Pablo Pizarro R. @ppizarror.com
Licencia MIT
*/

/**
Panel izquierdo, propiedades y controles
 */
#viewer-left-panel {
    background: #4d4d4d;
    bottom: 0;
    box-shadow: inset -7px 0 20px 2px rgba(0, 0, 0, 0.28), inset 2px -8px 20px 2px rgba(67, 67, 67, 0.34);
    color: white;
    cursor: default;
    display: block;
    float: left;
    font-size: 1rem;
    font-weight: 300;
    height: 100%;
    left: 0;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    position: absolute;
    right: 0;
    width: 20%;
}

#viewer-left-panel::-webkit-scrollbar-track {
    background-color: #303030;
    border: 1px solid #000;
    padding: 2px 0;
}

#viewer-left-panel::-webkit-scrollbar {
    width: 10px;
}

#viewer-left-panel::-webkit-scrollbar-thumb {
    background-color: #737272;
    border-radius: 10px;
    border: 1px solid #000;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

/**
Panel derecho del visualizador, contiene el canvas
 */
#viewer-right-panel {
    bottom: 0;
    display: block;
    float: right;
    height: 100%;
    left: 20%;
    min-width: 640px;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 80%;
}

@media screen and (max-width: 800px) {
    #viewer-left-panel {
        font-size: 0.9rem;
        padding: 5px;
        width: 175px;
    }

    #viewer-right-panel {
        left: 175px;
        width: calc(100% - 175px);
    }
}

#viewer-right-panel canvas {
    width: 100%;
}

/**
Panel del GUI
 */
#viewer-gui {
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

/**
Menú, input
 */
.viewer-menu-input-container {
    display: block;
    padding-bottom: 13px;
    margin-bottom: 5px;
    position: relative;
}

.viewer-menu-input-title {
    cursor: default;
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: 10px;
    text-overflow: ellipsis;
    word-break: break-all;
}

.viewer-menu-input-content select {
    border: 0 solid;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 5px 10px;
    position: relative;
}

.viewer-menu-input-content p {
    margin-bottom: 0.3rem;
}

.viewer-menu-input-container:after {
    background-color: #868686;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 2.5%;
    opacity: 0.7;
    position: absolute;
    width: 95%;
}

/**
Imagen del menú
 */
.viewer-menu-main-title {
    font-size: 1.4rem;
}

.viewer-menu-title-image img {
    margin-bottom: 10px;
    margin-left: 15%;
    width: 70%;
}

/**
Información del conjunto complejo
 */
.viewer-menu-complex-info {
    background-color: #828282;
    border-radius: 5px;
    box-shadow: inset 0 0 6px 0 rgba(0, 0, 0, 0.19);
    cursor: default;
    padding: 5px;
}

/**
Sliders
 */
.slider-selection {
    background: #BABABA;
}

.viewer-menu-input-content .slider.slider-horizontal {
    height: 20px;
    margin-right: 5px;
    position: absolute;
    right: 0;
    width: calc(90% - 50px);
}

/**
Acerca-de
 */
.viewer-menu-about {
}

.viewer-menu-about a {
    color: white;
    font-weight: 400;
}