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;
    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;
}


.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);
}



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

.split-button2 {
    background-image: url(../image/split2.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;
}

#drawingSelector {
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
    width: 180px;
    height: 30px;
    font-size: 16px;
    outline: none;
    text-indent: 5px;
    display: none;
    background: #fff;
}

option {
    display: block;
}