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

/* page */
#page { height: 100%; width: 100%; }
#page .left-panel { background-color: #f9fafb; bottom: 0px; left: 0px; min-height: 500px; position: absolute; top: 0px; width: 650px; z-index: 10; }
#page .left-panel .inner { margin: 0px auto; width: 380px; }
#page .left-panel .header { padding: 30px 0px; }
#page .left-panel .header .name { margin: 20px 0px 10px 10px; }
#page .left-panel .title { color: #000; font-size: 20px; font-weight: bold; height: 24px; padding: 10px 10px 20px 10px; }
#page .left-panel .title .loading-box { background: #fff url(/images/default/loading.gif) center no-repeat; height: 24px; width: 24px; }
#page .left-panel .apps { background-color: #fff; border: solid 2px #fbcb09; border-radius: 10px; transition: all 0.3s; }
#page .left-panel .apps:hover { box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
#page .right-panel { background: #f7f8f9 url(/images/default/background/bg-front-01.jpg) no-repeat center; background-size: cover; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); bottom: 0px; min-height: 500px; position: fixed; right: 0px; top: 0px; width: calc(100% - 650px); z-index: 20; }
#page .right-panel.picture-02 { background: #f7f8f9 url(/images/default/background/bg-front-02.jpg) no-repeat center; background-size: cover; }
#page .right-panel.picture-03 { background: #f7f8f9 url(/images/default/background/bg-front-03.jpg) no-repeat center; background-size: cover; }
#page .right-panel.picture-04 { background: #f7f8f9 url(/images/default/background/bg-front-04.jpg) no-repeat center; background-size: cover; }
#page .right-panel.picture-05 { background: #f7f8f9 url(/images/default/background/bg-front-05.jpg) no-repeat center; background-size: cover; }

@media (max-width: 737px)
{
    #page .left-panel { padding: 0px 20px; width: calc(100% - 40px); }
    #page .left-panel .inner { margin: 0px auto; width: auto; }
    #page .right-panel { display: none; }
}

/* footer */
#footer { bottom: 0px; color: #fff; font-size: 11px; margin: 10px auto; padding: 5px 0px 10px 0px; position: fixed; right: 0px; text-shadow: 1px 1px 1px #000; width: 330px; 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; }

/* box */
.box { background-color: #fff; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.07); border-radius: 7px; }
.box.select { transition: all 0.3s; }
.box.select:hover { box-shadow: 1px 10px 20px rgba(0, 0, 0, 0.15); }

.textbox-login { border: solid 1px transparent; border-radius: 5px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); color: #000; font-size: 14px; font-weight: bold; height: 30px; padding: 5px 7px; transition: all 0.5s; width: calc(100% - 14px); }
.textbox-login:focus { border: solid 1px #e9e9e9; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.02); }