body {
    font-family: Monospace;
    background-color: #000;
    color: #fff;
    margin: 0;
    overflow: hidden;
}

canvas {
    outline: none;
}

/* .container, .container2 {
    display: none;
} */

.container {
    position: absolute;
    top: 10px;
    left: 10px;
}

.container2, .container3 {
    position: absolute;
    bottom: 10px;
    left: 10px;

    overflow-x: auto;
    overflow-y: hidden;
    height: 56px;
}

.container2 > div {
    width: 452px;
    padding: 6px;
}

.container3 {
    display: none;
    width: 221px;
    z-index: 1;
}

.container3 > div {
    width: 209px;
    padding: 6px;
}

svg {
    cursor: default;
}

.button, .button1 {
    background-size: 32px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    border-radius: 50%;
    background-position: 50%,50%;
    background-repeat: no-repeat;
    background-color: hsla(0,0%,100%,.5);
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.26);
    margin: auto;
    /* position: absolute; */
    transition: all .2s ease-in;
    transition-property: opacity, visibility, transform;
    visibility: hidden;
    display: inline-block;
}

.button1 {
    position: absolute;
}

.menu-button {
    visibility: visible;
    background-image: url(../image/menu.png);
}

.shader-button {
    background-image: url(../image/shader_wireframe.png);
}

.direction-button {
    background-image: url(../image/direction.png);
}

.other-button {
    background-image: url(../image/others.png);
}

.wireframe-button {
    background-image: url(../image/wireframe.png);
}

.shadow-button {
    background-image: url(../image/shader.png);
}

.wireframe-shadow-button {
    background-image: url(../image/shader_wireframe.png);
}

.size-button {
    background-image: url(../image/size.png);
}

.screen-button {
    background-image: url(../image/fullscreen.png);
}

.camera-button {
    background-image: url(../image/camera.png);
}

.front-button {
    background-image: url(../image/front.png);
}

.back-button {
    background-image: url(../image/back.png);
}

.left-button {
    background-image: url(../image/left.png);
}

.right-button {
    background-image: url(../image/right.png);
}

.top-button {
    background-image: url(../image/top.png);
}

.bottom-button {
    background-image: url(../image/bottom.png);
}

.perspective-button {
    background-image: url(../image/direction.png);
}

.rotate-button {
    background-image: url(../image/rotate.png);
}

.cut-button {
    background-image: url(../image/cut.png);
}

.split-button {
    background-image: url(../image/split.png);
}

.split-button2 {
    background-image: url(../image/split2.png);
}

.split-button3 {
    background-image: url(../image/list.png);
}

.reset-button {
    background-image: url(../image/reset.png);
}

.close-button {
    background-image: url(../image/close.png);
}

iframe {
    display: none;
}

#sizeWrapper {
    display: none;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    border: 1px solid #999;
    overflow: hidden;
}

.direction-button-container {
    transform: translate3d(50px, 0px, 0px);
    opacity: 0;
    transition: all .2s ease-in;
    transition-property: opacity, visibility, transform;
    position: absolute;
    visibility: hidden;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: -6px;
    margin-left: -6px;
}

.direction-button-container > div {
    width: 407px;
    padding: 6px;
}