/* Default */
body { background-color: #eff3f6; cursor: default; font-family: Arial,sans-serif !important; font-size: 11px; height: 100%; margin: 0px; min-width: 1100px; overflow-y: scroll; width: 100%; }
a { color: #777; cursor: pointer; outline: none; text-decoration: none; }
button { background-color: transparent; border: none; cursor: pointer; padding-block: 0px; padding-inline: 0px; }
img { border: 0px; }
img[src=''] { display: none; }
input:focus { outline: none; }
p { margin: 0px; }
select:focus { outline: none; }
textarea:focus { outline: none; }
:focus-visible { outline: none; }

/* page */
.page { height: 100%; width: 100%; }
.page .top-backdrop { background-color: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); height: 45px; left: 250px; padding: 5px 0px; position: fixed; right: 0; top: 0; z-index: 49; }
.page .top-col { background-color: #eff3f6; height: 60px; left: 0px; min-width: 795px; position: fixed; right: 0; top: 0; z-index: 50; }
.page .top-col.shadow { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); }
.page .top-col .menu { background: url(/images/default/menu.png) no-repeat center; background-size: 28px 28px; display: none; height: 32px; width: 32px; padding: 14px 10px; }
.page .top-col .top-title { color: #fff; padding: 10px 0px 10px 20px; }
.page .top-col .top-title .title { color: #000; float: left; font-size: 19px; font-weight: bold; padding-top: 8px; }
.page .top-col .top-title .color-title { background: linear-gradient(90deg, #1a237e, #3f51b5 50%, #304ffe); background-clip: text; color: transparent; float: left; font-size: 19px; font-weight: bold; padding-top: 8px; }
.page .top-col .menu-tab { border-bottom: solid 5px transparent; float: left; padding: 20px 20px 20px 20px; transition: all 0.3s; }
.page .top-col .menu-tab .menu-icon { color: #999; float: left; font-size: 16px; text-align: center; width: 16px; }
.page .top-col .menu-tab .menu-title { color: #999; float: left; font-size: 13px; font-weight: bold; padding-left: 10px; }
.page .top-col .menu-tab:hover { border-bottom: solid 5px #d9d9d9; box-shadow: inset 0px -8px 12px -8px rgba(245, 247, 249, 0.25); }
.page .top-col .menu-tab.selected { border-bottom: solid 5px #1a237e; box-shadow: inset 0px -8px 12px -8px rgba(100, 181, 246, 0.25); color: #1a237e !important; }
.page .top-col .menu-tab.selected .menu-icon { color: #1a237e; }
.page .top-col .menu-tab.selected .menu-title { color: #1a237e; }
.page .top-col .control { margin-left: 100px; }
.page .top-col .control-link { color: #070e26; cursor: pointer; font-size: 12px; font-weight: bold; margin: 5px 10px 0px 0px; padding: 16px 15px; text-align: center; transition: all 0.3s; }
.page .top-col .control-link:hover { color: #01579b; }
.page .top-col .profile-link { color: #070e26; cursor: pointer; font-size: 11px; font-weight: bold; margin: 5px 10px 0px 0px; padding: 5px 15px 5px 5px; transition: all 0.3s; }
.page .top-col .profile-link:hover { color: #01579b; }
.page .left-col { background-color: transparent; border-top: solid 5px #eff3f6; bottom: 0px; left: 0px; overflow: auto; padding: 0px 25px; position: fixed; transition: all 0.3s; top: 60px; z-index: 52; }
.page .left-col .list { align-items: center; background-color: #fff; border-radius: 7px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); color: #9fa4b1; display: flex; font-size: 12px; font-weight: bold; margin: 15px 0px; padding: 10px; width: 30px; }
.page .left-col .list a { color: #9fa4b1; }
.page .left-col .list .list-icon { transition: all 0.3s; text-align: center; width: 30px; }
.page .left-col .list .list-text { display: none; padding: 2px 5px; transition: all 0.3s; }
.page .left-col .list.selected { background: linear-gradient(40deg, #1a237e, #3f51b5); color: #fff; opacity: 1; }
.page .left-col .list.selected a { color: #fff; }
.page .left-col .list.selected:hover .list-icon { color: #fff; }
.page .left-col .list.selected:hover .list-text { color: #fff; }
.page .left-col .list:hover { background-color: #f6fbfe; width: 110px; }
.page .left-col .list:hover .list-icon { color: #1a237e; }
.page .left-col .list:hover .list-text { color: #1a237e; display: block; }
.page .center-col { min-width: 795px; padding: 85px 20px 50px 120px; transition: padding 0.3s; z-index: 10; }
.page .center-col .content-title { left: 100px; padding: 5px 0px; position: fixed; top: 0px; z-index: 52; }
.page .center-col .content-title .seperator { border-left: solid 2px #d1d3d5; height: 25px; margin: 10px 20px; }
.page .center-col .content { clear: both; }

.login-page { bottom: 0px; left: 0px; position: fixed; right: 0px; top: 0px; width: 100%; }
.login-page .left-panel { background: linear-gradient(180deg, #fff 30%, #f7f8f9, #f1f2f3); bottom: 0px; left: 0px; min-height: 500px; position: absolute; top: 0px; width: 70%; z-index: 10; }
.login-page .left-panel .top-banner { padding: 10px 20px; }
.login-page .left-panel .top-banner .title { color: #070e26; float: left; font-size: 19px; font-weight: bold; margin: 8px 0px 0px 0px; }
.login-page .left-panel .top-banner .color-title { background: linear-gradient(90deg, #1a237e, #3f51b5 50%, #304ffe); background-clip: text; color: transparent; float: left; font-size: 19px; font-weight: bold; margin: 8px 0px 0px 0px; }
.login-page .left-panel .inner { height: 500px; margin: 100px auto 10px auto; width: 380px; }
.login-page .left-panel .header { padding: 0px 0px 30px 0px; }
.login-page .left-panel .header .color-title { background: linear-gradient(90deg, #1a237e, #3f51b5 50%, #304ffe); background-clip: text; color: transparent; font-size: 20px; font-weight: bold; }
.login-page .right-panel { background-size: cover; bottom: 0px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); min-height: 500px; position: fixed; right: 0px; top: 0px; width: 30%; z-index: 20; }
.login-page .right-panel.picture-01 { background: #f7f8f9 url(/images/default/background/bg-front-01.jpg) no-repeat right; background-size: cover; }
.login-page .right-panel.picture-02 { background: #f7f8f9 url(/images/default/background/bg-front-02.jpg) no-repeat center; background-size: cover; }
.login-page .right-panel.picture-03 { background: #f7f8f9 url(/images/default/background/bg-front-03.jpg) no-repeat center; background-size: cover; }
.login-page .right-panel.picture-04 { background: #f7f8f9 url(/images/default/background/bg-front-04.jpg) no-repeat center; background-size: cover; }
.login-page .right-panel.picture-05 { background: #f7f8f9 url(/images/default/background/bg-front-05.jpg) no-repeat center; background-size: cover; }
.login-page .right-panel.picture-06 { background: #f7f8f9 url(/images/default/background/bg-front-06.jpg) no-repeat center; background-size: cover; }
.login-page .right-panel .scan { background: linear-gradient(90deg, transparent, #fff, transparent); height: 3px; position: fixed; right: 0; top: 0; width: 30%; }

/* class */
.box { background-color: #fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); border-radius: 7px; padding: 30px; transition: all 0.3s; }
.box.hover:hover { box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.25); }
.box .box-title { background: linear-gradient(0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)); border-radius: 7px; color: #fff; font-size: 14px; font-weight: bold; transition: all 0.5s; }
.box .box-desc { border-top: solid 3px #3f51b5; color: #fff; font-size: 11px; font-weight: normal; margin-top: 5px; padding-top: 5px; transition: all 0.5s; }
.box.hover:hover .box-title { background: none; background-color: #1a237e; box-shadow: 1px 1px 30px rgba(100, 181, 246, 0.25); }
.box.hover:hover .box-desc { border-top: solid 3px #fff; }
.box.disabled { opacity: 0.3; }
.item { background: #fff; border: solid 2px transparent; border-radius: 7px; float: left; padding: 15px; margin: 0px 20px 20px 0px; transition: all 0.3s; max-width: 250px; min-height: 80px; user-select: none; width: 95%; }
.item:hover { background: #f3f9fe; background: linear-gradient(135deg, #fff 5%, #f3f9fe); border-left: solid 2px #1a237e; border-bottom: solid 2px #1a237e; border-right: solid 2px #3f51b5; border-top: solid 2px #3f51b5; box-shadow: 1px 1px 10px rgba(100, 181, 246, 0.15); }
.pager { background-color: #fff; border: solid 1px #e9e9e9; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); border-radius: 5px; bottom: 20px; color: #777; font-size: 12px; padding: 7px 10px; position: fixed; right: 30px; transition: all 0.3s; }
.tab { background-color: #fff; border-radius: 5px; color: #9fa4b1; cursor: pointer; font-size: 13px; font-weight: bold; margin: 5px; padding: 15px 10px; transition: all 0.3s; user-select: none; min-width: 60px; }
.tab:hover { background-color: #f5f7f9; color: #1a237e; }
.tab.selected { background-color: rgba(100, 181, 246, 0.1); color: #1a237e; }