/* default */
body { background-color: #fff; cursor: default; font-family: Arial; font-size: 11px; height: 100%; margin: 0px; width: 100%; }

/* page */
#page { height: 100%; width: 100%; }
#page .left-panel { background: #eee url(/images/web/login-page.jpg) no-repeat; background-size: cover; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); bottom: 0px; left: 0px; min-height: 500px; position: absolute; top: 0px; width: 480px; z-index: 20; }
#page .left-panel .inner { background-color: #0f2a4e; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); color: #fff; font-size: 20px; font-weight: bold; margin: 100px 0px 0px 0px; padding: 15px 15px 15px 20px; width: 300px; }
#page .right-panel { background-color: #fff; bottom: 0px; left: 480px; min-height: 500px; position: absolute; right: 0px; top: 0px; z-index: 10; }
#page .right-panel .header-title { color: #19457f; display: none; font-size: 22px; font-weight: bold; padding: 50px 25px 30px 25px; }
#page .right-panel .inner { margin: 120px 0px 0px 40px; width: 370px; }
#page .right-panel .inner .title { color: #000; font-size: 20px; font-weight: bold; height: 30px; padding: 0px 25px 5px 25px; }
#page .right-panel .inner .title .loading-box { background: #fff url(/images/app/loading.gif) center no-repeat; height: 30px; width: 30px; }
#page .right-panel .inner .outer { padding: 20px 25px; }
#page .right-panel .inner .min { min-height: 210px; }
#page .right-panel .inner .column-title { color: #999; font-size: 11px; font-weight: bold; padding: 5px 7px; }
#page .right-panel .inner .column-text { padding: 5px 0px 10px 15px; }
#page .right-panel .inner .column-input { padding: 0px 5px 5px 5px; }
#page .right-panel .inner .column-control { padding: 20px 5px 10px 5px; }
#page .right-panel .inner .column-link { padding: 0px 5px 5px 5px; text-align: right; }
#page .right-panel .inner .message-center { margin: 15px 15px 5px 10px; }
#page .right-panel .inner .message-center .control { float: left; margin: 5px 5px 0px 0px; }
#page .right-panel .inner .message-center .text { color: #999; float: left; font-size: 11px; transition: color 0.3s; }
#page .right-panel .inner .message-center .text .notice { color: #aaa; font-size: 10px; }
#page .right-panel .inner .message-center:hover .text { color: #1a237e; }
#page .right-panel .inner .user { border-radius: 3px; margin: 30px 0px; padding: 10px; transition: all 0.3s; }
#page .right-panel .inner .user:hover { background-color: #f5f5f5; }
#page .right-panel .inner .userimage { height: 60px; width: 60px; }

/* footer */
#footer { bottom: 0px; color: #777; font-size: 11px; margin: 10px auto; padding: 5px 0px 10px 0px; position: fixed; right: 0px; width: 350px; z-index: 30; }
#footer .left { float: left; padding-left: 20px; }
#footer .right { float: right; padding-right: 20px; }
#footer .text { padding: 0px 5px; }
#footer .link { color: #777; font-size: 11px; margin: 0px 5px; transition: color 0.3s; }
#footer .link:hover { color: #3f51b5; }

/* Mobile view */
@media (max-width: 768px) {
    #page .left-panel { display: none; }
    #page .right-panel { left: 0px; }
    #page .right-panel .inner { margin: 20px auto; width: 100%; }
    #page .right-panel .header-title { display: block; }
}