.UserInterface {display:none;}
.UserInterface.active {display:block;}
.UserInterface {z-index: 998; top:0; position: absolute; width:100%; height:100%; min-width: 150px; min-height:100px;}
.UserInterface .blender {position: relative; width:100%; height:100%; background-color:rgba(0,0,0,0.25);}
.UserInterface .blender .body {position: absolute; top:0; left:0; right:0; bottom:0;}

/* ===z-index=== */
.UserInterface .blender .body .loading {z-index: 10;}
/* ---z-index--- */

.UserInterface .blender .body .module {display:none; height:100%;}
.UserInterface .blender .body .module.active {display:block;}


/* ===window=== */
.UserInterface .blender .body .module .window {background-color: #fff; padding:8px; border:#ccc solid 1px; width:80%; min-width:350px; max-width:1200px; min-height:100px; margin:0px auto; margin-top:150px; box-shadow: 1px 1px 2px 0px #696969;}


/* ===confirm=== */
.UserInterface .blender .body .module .window.confirm {}
/* ---confirm--- */

/* ===notice=== */
.UserInterface .blender .body .module .window.notice .Button.close {float:right;}
/* ---notice--- */
/* ---window--- */



/* ===loading=== */
.UserInterface .blender .body .loading {display:table; border-spacing: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin:auto; width: 50px; height: 40px; text-align: center; font-size: 10px;}

.UserInterface .blender .body .loading > div {
    background-color: #fff;
    height: 100%;
    width: 6px;
    display: table-cell;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.UserInterface .blender .body .loading .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.UserInterface .blender .body .loading .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.UserInterface .blender .body .loading .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.UserInterface .blender .body .loading .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}
/* ---loading--- */