@font-face {
  font-family: 'Ubuntu Light';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(/static/font/Ubuntu-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Ubuntu Regular';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(/static/font/Ubuntu-Regular.ttf) format('truetype');
}
/* main structure*/
html, body {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Ubuntu Light";
}

body {
    min-width: 1080px;
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body>header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 68px;/*header height*/
    line-height: 68px;/*header height*/
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 40px;
    z-index: 100;
    box-shadow: 0px 2px 1px rgba(0,0,0,0.1);
    min-width: 1080px;/*body min-width*/
}
body>header .divider {
    border: none;
    width: 1px;
    height: 20px;
    opacity: 0.5;
    display: inline-block;
    vertical-align: middle;
}
body>header>* {
    vertical-align: middle;
}
body .k-popup #userDropdown_listbox.k-list>.k-state-selected {
    color: inherit;
}
body .k-popup #userDropdown_listbox.k-list>.k-state-selected.k-state-hover {
    color: #ffffff;/*whiteBg*/
    background-color: #548bc9;/*mainBg*/
}

.noModuleWindow.orange {
    background-image: url(/static/image/header/popover_gas_notfound.png);
}
.noModuleWindow.blue {
    background-image: url(/static/image/header/popover_water_notfound.png);
}
.k-widget.k-window .k-window-content.noModuleWindow {
    border: none;
    margin-top: -40px;/*title height*/
    height: 210px;
    padding: 40px 20px 0 200px;
    background-position: left center;
    background-repeat: no-repeat;
}

body>header .k-header.k-dropdown.appsDropdown .k-dropdown-wrap {
    padding-right: 0;
}
body>header .appsDropdown .k-dropdown-wrap .k-select {
    display: none;
}
body>header .k-widget.k-dropdown.appsDropdown .k-input>* {
    vertical-align: middle;
}
body>header .appsDropdown .appGridIcon {
    margin-left: 10px;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-image: url(/static/image/header/header_btn_system_default.png);
    background-repeat: no-repeat;
    background-position: center;
}
body>header .appsDropdown .k-state-hover .appGridIcon {
    background-image: url(/static/image/header/header_btn_system_on.png);
}
body>header .k-widget.k-dropdown.appsDropdown .k-state-hover .k-input {
    color: #548bc9;/*mainBg*/
}
body>header .k-header.k-dropdown .k-dropdown-wrap .k-select .k-icon.k-i-arrow-s {
    background-image: url(/static/image/header/header_btn_dropdown.png);
}
body>header .k-widget.k-dropdown .k-input,
body>header .k-widget.k-dropdown .k-state-active .k-input {
    color: #19293c;/*subBg*/
}
body ul#appsDropdown_listbox {
    padding: 12px 0;
    text-align: center;
}
body ul#appsDropdown_listbox li {
    display: inline-block;
    border: none;
    padding: 12px 0;
}
body ul#appsDropdown_listbox li .energyIcon,
body ul#appsDropdown_listbox li .lightIcon,
body ul#appsDropdown_listbox li .paperIcon,
body ul#appsDropdown_listbox li .waterIcon,
body ul#appsDropdown_listbox li .gasIcon {
    width: 110px;
    height: 65px;
    background-repeat: no-repeat;
    background-position: center;
}
body ul#appsDropdown_listbox li .energyIcon + div,
body ul#appsDropdown_listbox li .lightIcon + div,
body ul#appsDropdown_listbox li .paperIcon + div,
body ul#appsDropdown_listbox li .waterIcon + div,
body ul#appsDropdown_listbox li .gasIcon + div {
    padding: 10px 0 0 0;
    line-height: 1;
    min-height: none;
}
body ul#appsDropdown_listbox li .energyIcon {
    background-image: url(/static/image/header/header_system_energy.png);
}
body ul#appsDropdown_listbox li .lightIcon {
    background-image: url(/static/image/header/header_system_light.png);
}
body ul#appsDropdown_listbox li .paperIcon {
    background-image: url(/static/image/header/header_system_paper.png);
}
body ul#appsDropdown_listbox li .waterIcon {
    background-image: url(/static/image/header/header_system_water.png);
}
body ul#appsDropdown_listbox li .gasIcon {
    background-image: url(/static/image/header/header_system_gas.png);
}
body ul#appsDropdown_listbox li.k-state-hover .energyIcon {
    background-image: url(/static/image/header/header_system_energy_hover.png);
}
body ul#appsDropdown_listbox li.k-state-hover .lightIcon {
    background-image: url(/static/image/header/header_system_light_hover.png);
}
body ul#appsDropdown_listbox li.k-state-hover .paperIcon {
    background-image: url(/static/image/header/header_system_paper_hover.png);
}
body ul#appsDropdown_listbox li.k-state-hover .waterIcon {
    background-image: url(/static/image/header/header_system_water_hover.png);
}
body ul#appsDropdown_listbox li.k-state-hover .gasIcon {
    background-image: url(/static/image/header/header_system_gas_hover.png);
}
body .k-popup ul#appsDropdown_listbox.k-list>.k-state-hover,
body .k-popup ul#appsDropdown_listbox.k-list>.k-state-hover.k-state-focused,
body .k-popup ul#appsDropdown_listbox.k-list>.k-state-selected.k-state-focused {
    background-color: #ffffff;/*whiteBg*/
    color: inherit;
}

#appsDropdown-list::before {
    position: absolute;
    top: -15px;
    margin-left: 105px;
    display: inline-block !important;
    content: '';
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid white;
    padding: 0px;
    z-index: 10100;
}

div.main {
    position: relative;
    padding-top: 68px;/*header height*/
    height: 100%;
    min-height: 768px;
    box-sizing: border-box;
}

div.main>nav {
    position: fixed;
    top: 0;/*header height*/
    left: 0;
    height: 100%;
    min-height: 768px;
    width: 85px;/*nav width*/
    padding-top: 83px;/*head height 68 + 15*/
    overflow: auto;
    z-index: 60;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.main>nav>.logo {
    position: fixed;
    bottom: 20px;
    padding-left: 10px;
}
@media screen and (max-height: 660px) {
    div.main>nav>.logo {
        display: none;
    }
}
div.main>nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
div.main>nav .menuItem {
    position: relative;
    height: 72px;
    line-height: 0.75em;
    padding-top: 45px;
    box-sizing: border-box;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center 14px;
}
div.main>nav .menuItem:after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 10px;
    left: 0;
    width: 6px;
    height: 52px;
}
div.main>nav .menuItem.selected,
div.main>nav .menuItem:hover {
    color: #548bc9;/*mainText*/
}
div.main>nav .menuItem.selected:after {
    background-color: #548bc9;/*mainBg*/
}
div.main>nav .menuItem:not(:hover):not(.selected) {
    opacity: 0.7;
}
div.main>nav #dashboardMenu {
    background-image: url(/static/image/general/general_sidebar_ico_dashboard_off.png);
}
div.main>nav #dashboardMenu:hover,
div.main>nav #dashboardMenu.selected {
    background-image: url(/static/image/general/general_sidebar_ico_dashboard_on.png);
}
div.main>nav #exploreMenu {
    background-image: url(/static/image/general/general_sidebar_ico_explore_off.png);
}
div.main>nav #exploreMenu:hover,
div.main>nav #exploreMenu.selected {
    background-image: url(/static/image/general/general_sidebar_ico_explore_on.png);
}
div.main>nav #alertMenu {
    background-image: url(/static/image/general/general_sidebar_ico_alert_off.png);
}
div.main>nav #alertMenu:hover,
div.main>nav #alertMenu.selected {
    background-image: url(/static/image/general/general_sidebar_ico_alert_on.png);
}
div.main>nav #reportMenu {
    background-image: url(/static/image/general/general_sidebar_ico_report_off.png);
}
div.main>nav #reportMenu:hover,
div.main>nav #reportMenu.selected {
    background-image: url(/static/image/general/general_sidebar_ico_report_on.png);
}
div.main>nav #goalMenu {
    background-image: url(/static/image/general/general_sidebar_ico_goal_off.png);
}
div.main>nav #goalMenu:hover,
div.main>nav #goalMenu.selected {
    background-image: url(/static/image/general/general_sidebar_ico_goal_on.png);
}
div.main>nav #accountMenu {
    background-image: url(/static/image/general/general_sidebar_ico_account_off.png);
}
div.main>nav #accountMenu:hover,
div.main>nav #accountMenu.selected {
    background-image: url(/static/image/general/general_sidebar_ico_account_on.png);
}
div.main>nav #settingMenu {
    background-image: url(/static/image/general/general_sidebar_ico_setting_off.png);
}
div.main>nav #settingMenu:hover,
div.main>nav #settingMenu.selected {
    background-image: url(/static/image/general/general_sidebar_ico_setting_on.png);
}

div.main>nav a {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

div.main>section {
    padding: 0 0 0 85px;/*nav width*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-overflow-scrolling: touch;

    height: 100%;
}
/* main structure*/

/*sub page structrue*/
/*@media screen and (min-width: 1920px) {
    body div.main>section #reportPage.pageContent,
    body div.main>section #reportPage.pageContent header {
        margin-right: auto;
        margin-left: auto;
        padding-right: 0;
        padding-left: 0;
        max-width: 1775px; 1920-85menu-20pad-40pad 
    }
}*/
@media screen and (max-width: 1366px) {
    body>header,
    body div.main>section .pageContent,
    body div.main>section .pageContent header {
        padding-right: 20px;
    }
}
div.main>section .pageContent {
    position: relative;
    height: 100%;
    padding-top: 44px;/*subhead height*/
    box-sizing: border-box;
    padding-right: 40px;
}
div.main>section .pageContent header {
    height: 44px;/*subhead height*/
    padding-right: 40px;
    padding-left: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 50;
}
div.main>section .pageContent header .exportIcon {
    padding-left: 21px;
    background-image: url(/static/image/general/general_top_ico_download.png);
    background-repeat: no-repeat;
    background-position: left center;
}
div.main>section .pageContent header .headerBorder {
    height: 44px;/*subhead height*/
    line-height: 43px;/*subhead height*/
    border-bottom-style: solid;
    border-bottom-width: 1px;
    box-sizing: border-box;
}
div.main>section .pageContent header .headerBorder>*,
div.main>section .pageContent header .headerBorder .headerRight>* {
    vertical-align: middle;
    display: inline-block;
}
div.main>section .pageContent header .headerBorder .headerRight {
    float: right;
    height: 100%;
}

#systemMenu {
    padding-right: 100px;
}
/*sub page structrue*/


/*common use */
.loadingScreen {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.9);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/static/image/general/energy_v4_loading.gif);
}
.loadingScreen .loadingText {
    width: 100%;
    text-align: center;
}
.loadingScreen.small {
    background-size: 40px;
}
.loadingScreen.show {
    display: block;
}

.baselineContainer {
    display: inline-block;
}
.baselineContainer>* {
    display: inline-block;
    vertical-align: baseline;
}

.autoScroll {
    overflow: auto;
}
.showScroll {
    overflow-x: hidden;
    overflow-y: scroll;
}

.relative {
    position: relative;
}
.absolute {
    position: absolute;
}

.singleLineWord {
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
}
.breakWord {
    word-break: break-all;
    white-space: normal;
}

.dummyHolder {
    position: fixed;
    top: -2000px;
}

.clickable {
    cursor: pointer;
}

.shadow,
.shadow.k-widget {
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

.fullSize.k-chart,
.fullSize {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.fullWidth {
    width: 100%;
}
.fullHeight {
    height: 100%;
}

.w90 {
    width: 90px;
}
.w120 {
    width: 120px;
}
.w123 {
    width: 123px;
}
.w300 {
    width: 300px;
}
.w320 {
    width: 320px;
}
.w520 {
    width: 520px;
}

.h50,
.btn.h50 {
    height: 50px;
}
.h20 {
    height: 20px;
}
.h31 {
    height: 31px;
}
.h110 {
    height: 110px;
}
.h180,
body .k-chart.h180 {
    height: 180px;
}
.h240,
body .k-chart.h240 {
    height: 240px;
}

.vMid,
.vCenterContainer>* {
    vertical-align: middle;
    display: inline-block;
}
.vCenterContainerInline>* {
    vertical-align: middle;
    display: inline;
}
.vCenterContainer:before,
.vCenterContainerInline:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.hCenter {
    text-align: center;
}
.hLeft {
    text-align: left;
}
.hRight {
    text-align: right;
}
.toRight {
    float: right;
}
.toLeft {
    float: left;
}

.pad10 {
    padding: 10px;
}
.pad15 {
    padding: 15px;
}
.pad20 {
    padding: 20px;
}
.hPad10 {
    padding-left: 10px;
    padding-right: 10px;
}
.hPad15 {
    padding-left: 15px;
    padding-right: 15px;
}
.hPad20 {
    padding-left: 20px;
    padding-right: 20px;
}
.vPad5 {
    padding-top: 5px;
    padding-bottom: 5px;
}
.vPad7 {
    padding-top: 7px;
    padding-bottom: 7px;
}
.vPad10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.vPad15 {
    padding-top: 15px;
    padding-bottom: 15px;
}
.vPad20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.hPad100 {
    padding-left: 100px;
    padding-right: 100px;
}

.topPad2 {
    padding-top: 2px;
}
.topPad5 {
    padding-top: 5px;
}
.topPad6 {
    padding-top: 6px;
}
.topPad10 {
    padding-top: 10px;
}
.topPad12 {
    padding-top: 12px;
}
.topPad15 {
    padding-top: 15px;
}
.topPad20 {
    padding-top: 20px;
}
.topPad24 {
    padding-top: 24px;
}
.topPad30 {
    padding-top: 30px;
}
.topPad40 {
    padding-top: 40px;
}
.topPad50 {
    padding-top: 50px;
}
.topPad78 {
    padding-top: 78px;
}
.topPad120 {
    padding-top: 120px;
}
.bottomPad5 {
    padding-bottom: 5px;
}
.bottomPad10 {
    padding-bottom: 10px;
}
.bottomPad12 {
    padding-bottom: 12px;
}
.bottomPad15 {
    padding-bottom: 15px;
}
.bottomPad20 {
    padding-bottom: 20px;
}
.rightPad4 {
    padding-right: 4px;
}
.rightPad8 {
    padding-right: 8px;
}
.rightPad10 {
    padding-right: 10px;
}
.rightPad12 {
    padding-right: 12px;
}
.rightPad15 {
    padding-right: 15px;
}
.rightPad20 {
    padding-right: 20px;
}
.rightPad40 {
    padding-right: 40px;
}
.rightPad45 {
    padding-right: 45px;
}
.rightPad50 {
    padding-right: 50px;
}
.rightPad100 {
    padding-right: 100px;
}
.leftPad7 {
    padding-left: 7px;
}
.leftPad4 {
    padding-left: 4px;
}
.leftPad10 {
    padding-left: 10px;
}
.leftPad14 {
    padding-left: 14px;
}
.leftPad15 {
    padding-left: 15px;
}
.leftPad20 {
    padding-left: 20px;
}
.leftPad30 {
    padding-left: 30px;
}
.leftPad50 {
    padding-left: 50px;
}
.leftPad70 {
    padding-left: 70px;
}
.topMar10 {
    margin-top: 10px;
}
.topMar20 {
    margin-top: 20px;
}
.topMar30 {
    margin-top: 30px;
}
.topMar40 {
    margin-top: 40px;
}
.bottomMar20 {
    margin-bottom: 20px;
}
.rightMar10 {
    margin-right: 10px;
}
.rightMar12 {
    margin-right: 12px;
}
.rightMar18 {
    margin-right: 18px;
}
.rightMar30 {
    margin-right: 30px;
}
.rightMar40 {
    margin-right: 40px;
}
.rightMar100 {
    margin-right: 100px;
}
.leftMar3 {
    margin-left: 3px;
}
.leftMar5 {
    margin-left: 5px;
}
.leftMar15 {
    margin-left: 15px;
}

.kddHeight {
    height: 1.714em;
    line-height: 1.714em;
}

.floatContainer:after,
.colContainer:after {
    clear: both;
    content: " ";
    display: block;
}
.col-3, .k-widget .col-3,
.col-4, .k-widget .col-4,
.col-6, .k-widget .col-6,
.col-8, .k-widget .col-8,
.col-9, .k-widget .col-9,
.col-12, .k-widget .col-12,
.col30, .col40, .col60, .col15, .col16, .col21, .col12, .col51, .col52 {
    float: left;
    box-sizing: border-box;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33333333%;
}
.col-6 {
    width: 50%;
}
.col-8 {
    width: 66.66666667%;
}
.col-9 {
    width: 75%;
}
.col-12 {
    width: 100%;
}
.col30 {
    width: 30%;
}
.col40 {
    width: 40%;
}
.col60 {
    width: 60%;
}
.col15 {
    width: 15%;
}
.col16 {
    width: 16%;
}
.col21 {
    width: 21%;
}
.col12 {
    width: 12%;
}
.col51 {
    width: 51%;
}
.col52 {
    width: 52%;
}

.autoWidth,
.k-dropdown.autoWidth {
    width: auto;
}

.bigF1 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 30px;
}
.bigF2 {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';
    font-size: 26px;
}
.popupF1 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 18px;
}


.f1 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 18px;
}
.f2 {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';
    font-size: 16px;
}
.f3 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 20px;
}
.f4 {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';
    font-size: 14px;
}
.f5 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 16px;
}
.f6 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 24px;
}
.f7 {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';
    font-size: 18px;
}
.f8 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 22px;
}
.f9 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 26px;
}
.f10 {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';
    font-size: 13px;
}
.f11 {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';
    font-size: 16px;
}
.f12 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 20px;
}
.f13 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 18px;
}
.f14 {
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 14px;
}
.pdfFont .f1 {
    font-size: 11px;
}
.pdfFont .f2 {
    font-size: 9px;
}
.pdfFont .f3 {
    font-size: 13px;
}
.pdfFont .f4 {
    font-size: 8px;
}
.pdfFont .f5 {
    font-size: 9px;
}
.pdfFont .f6 {
    font-size: 14px;
}
.pdfFont .f7 {
    font-size: 11px;
}
.pdfFont .f8 {
    font-size: 15px;
}
.pdfFont .f9 {
    font-size: 17px;
}
.pdfFont .f10 {
    font-size: 7px;
}
.pdfFont .f11 {
    font-size: 9px;
}
.pdfFont .f12 {
    font-size: 13px;
}
.pdfFont .f13 {
    font-size: 11px;
}
.pdfFont .f14 {
    font-size: 7px;
}
.pdfFont .bigF7,
.pdfFont .bigF13 {
    font-size: 18px;
}

.mainBg {
    background-color: #548bc9;
}
.mainHoverBg {
    background-color: rgba(84, 139, 201, 0.8);
}
.compareBg {
    background-color: #a1cbf8;
}
.subBg {
    background-color: #19293c;
}
.greenBg {
    background-color: #7ac410;
}
.redBg {
    background-color: #e15b21;
}
.bg,
.bg.k-toolbar {
    background-color: #f6f9fc;
}
.whiteBg {
    background-color: #ffffff;
}
.mainGreyBg {
    background-color: #555555;
}
.subGreyBg {
    background-color: #a1a1a1;
}
.lightGreyBg {
    background-color: #e3e3e3;
}

.divider {
    border-color: rgba(161, 161, 161, 0.2);
}
.dividerE {
    border-right: 1px solid rgba(161, 161, 161, 0.2);
}
.dividerW {
    border-left: 1px solid rgba(161, 161, 161, 0.2);
}
.dividerN {
    border-top: 1px solid rgba(161, 161, 161, 0.2);
}
.dividerN2 {
    border-top: 2px solid rgba(161, 161, 161, 0.2);
}
.dividerS {
    border-bottom: 1px solid rgba(161, 161, 161, 0.2);
}
.dividerAll {
    border: 1px solid rgba(161, 161, 161, 0.2);
}
.mainBorder {
    border-color: #548bc9;
}
body .mainBorderS {
    border-bottom: 1px solid #548bc9;
}
body .mainGreyBorderS {
    border-bottom: 1px solid #555555;
}
body .subGreyBorder {
    border-color: #a1a1a1;
}
body .subGreyBorderAll {
    border: 1px solid #a1a1a1;
}
.greenBorderAll {
    border: 1px solid #7ac410;
}
.redBorderAll {
    border: 1px solid #e15b21;
}
.lightGreyBorderAll {
    border: 1px solid #e3e3e3;
}

.mainText {
    color: #548bc9;
}
.compareText {
    color: #a1cbf8;
}
.whiteText,
.btn.whiteText {
    color: #ffffff;
}
.greenText {
    color: #7ac410;
}
.redText {
    color: #e15b21;
}
.k-panelbar .k-content.mainGreyText,
.mainGreyText {
    color: #555555;
}
.subGreyText {
    color: #a1a1a1;
}
.lightGreyText {
    color: #e3e3e3;
}
.smallArrow.redText,
.redText .smallArrow {
    padding-left: 16px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url(/static/image/general/general_ico_increase_s.png);
}
.smallArrow.greenText,
.greenText .smallArrow {
    padding-left: 16px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url(/static/image/general/general_ico_decrease_s.png);
}
.middleArrow.redText,
.redText .middleArrow {
    padding-left: 21px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url(/static/image/general/general_ico_increase_m.png);
}
.middleArrow.greenText,
.greenText .middleArrow {
    padding-left: 21px;
    background-repeat: no-repeat;
    background-position: left center;
    background-image: url(/static/image/general/general_ico_decrease_m.png);
}

.tooltipColorBox {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
}
.tooltipMinWidth {
    min-width: 110px;
}
/*common use */


/* controls */
.explanationIcon {
    vertical-align: middle;
    cursor: pointer;
    height: 14px;
    width: 14px;
    color: #a1a1a1;/*subGreyBg*/
    border: 1px solid #a1a1a1;/*subGreyBg*/
    line-height: 12px;
    border-radius: 14px;
    box-sizing: content-box;
    display: inline-block;
    text-align: center;
}
.explanationIcon:before {
    content: '?';
    display: inline-block;
    font-size: 12px;
}


body .backToTop {
    position: fixed;
    z-index: 11;
    right: -45px;
    bottom: 0;
    width: 40px;
    height: 40px;
    padding-top: 20px;
    text-align: center;
    opacity: 0;
    transition: right 0.2s, opacity 0.2s;
    -webkit-transition: right 0.2s, opacity 0.2s;
    box-sizing: border-box;
    cursor: pointer;
    background-image: url(/static/image/report/report_ico_backtotop.png);
    background-repeat: no-repeat;
    background-position: center 5px;
}
body .backToTop.show {
    opacity: 1;
    right: 0;
}

.btn,
button.btn {
    color: inherit;
    outline: none;
    text-align: center;
    border: none;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 0;
    -webkit-border-radius: 0; 
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
}
.btn:disabled,
button.btn:disabled {
    cursor: default;
    opacity: 0.3;
}
.btn.mainBg,
button.btn.mainBg {
    background-color: #548bc9;
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/*f1*/
    font-size: 18px;
    min-width: 120px;
    color: #ffffff;/*whiteText*/
}
.btn.subGreyBg,
button.btn.subGreyBg {
    background-color: #a1a1a1; /*subGreyBg*/
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';/*f1*/
    font-size: 18px;
    min-width: 80px;
    color: #ffffff;/*whiteText*/
}
.btn.mainGreyText,
button.btn.mainGreyText {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/*f2*/
    font-size: 16px;
    color: #555555;/*mainGreyText*/
    padding: 0;
}
.btn.mainText,
button.btn.mainText {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/*f2*/
    font-size: 16px;
    color: #548bc9;/*mainText*/
    padding: 0;
}
.btn.redText,
button.btn.redText {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/*f2*/
    font-size: 16px;
    color: #e15b21;/*mainText*/
    padding: 0;
}
.btn.mainGreyText:hover:not(:disabled),
button.btn.mainGreyText:hover:not(:disabled){
    color: #548bc9;/*mainText */
}
.btn.mainText:hover:not(:disabled),
button.btn.mainText:hover:not(:disabled){
    color: rgba(84, 139, 201, 0.8);/*mainText */
}
.btn.mainText:hover:not(:disabled):before {
    opacity: 0.8;
}
.btn.mainBg:hover:not(:disabled),
button.btn.mainBg:hover:not(:disabled){
    background-color: rgba(84, 139, 201, 0.8);/*mainBg */
}
.btn.subGreyBg:hover:not(:disabled),
button.btn.subGreyBg:hover:not(:disabled){
    background-color: rgba(161, 161, 161, 0.8);/*subGreyBg */
}

.btn.borderBtn,
button.btn.borderBtn {
    line-height: 26px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';/*f1*/
    font-size: 18px;
    background-color: transparent;
    box-sizing: border-box;
}
.btn.borderBtn.mainText,
button.btn.borderBtn.mainText {
    border: 2px solid #548bc9;/*mainText*/
}
.btn.borderBtn.redText,
button.btn.borderBtn.redText {
    border: 2px solid #e15b21;/*redText*/
}
.btn.borderBtn:hover:not(:disabled),
button.btn.borderBtn:hover:not(:disabled){
    color: #ffffff;/*whiteBg*/
}
.btn.borderBtn.mainText:hover:not(:disabled),
button.btn.borderBtn.mainText:hover:not(:disabled){
    background-color: #548bc9;/*mainText*/
}
.btn.borderBtn.redText:hover:not(:disabled),
button.btn.borderBtn.redText:hover:not(:disabled){
    background-color: #e15b21;/*redText*/
}

.btn.addBtn:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 0 10px 0 0;
    box-sizing: content-box;
    background-repeat: no-repeat;
    background-position: center left;
    background-image: url(/static/image/general/general_ico_btn_add.png);
}
.btn.editBtn,
.btn.deleteBtn {
    padding-left: 0;
    text-align: left;
}
.btn.editBtn:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 0 10px 0 0;
    box-sizing: content-box;
    background-repeat: no-repeat;
    background-position: center left;
    background-image: url(/static/image/general/general_btn_edit.png);
}
.btn.deleteBtn:before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 0 10px 0 0;
    box-sizing: content-box;
    background-repeat: no-repeat;
    background-position: center left;
    background-image: url(/static/image/general/general_btn_delete.png);
}

input[type="submit"] {
    -webkit-appearance: none;
}
input:-moz-placeholder {
    color: #b4b4b4;
    font-weight: 400;
}
::-webkit-input-placeholder {
    color: #b4b4b4;
    font-weight: 400;
}
::-moz-placeholder {
    color: #b4b4b4;
    font-weight: 400;
}
:-ms-input-placeholder {
    color: #b4b4b4;
    font-weight: 400;
}

input.textbox {
    box-shadow: none;
    box-sizing: border-box;
    height: 1.714em;    /*same as kendo dropdown*/
    border-width: 1px;
    border-style: solid;
    padding: 0 5px;
    outline: none;
    display: inline-block;
}
input.textbox:focus {
    outline: none;
}

.labelledInput {
    position: relative;
    height: 50px;
}
.labelledInput input {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: none;
    box-sizing: border-box;
    height: 32px;
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color: #a1a1a1;/*subGreyBorder*/
    padding: 0 5px;
    background-color: transparent;
    outline: none;
    z-index: 2;
}
.labelledInput input+label {
    position: absolute;
    bottom: 8px;
    left: 0;
    padding-left: 5px;
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/*f7*/
    color: #a1a1a1;
    font-size: 18px;
    z-index: 1;
    transition: 0.2s ease all;
}
.labelledInput input:focus {
    border-color: #548bc9;/*mainBg*/
}
.labelledInput input.moveUp + label,
.labelledInput input:focus + label {
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/*f4*/
    font-size: 14px;
    bottom: 34px;
}
.labelledInput input:focus + label {
    color: #548bc9;
}
.labelledInput + .errorMsg {
    height: 40px;
    text-align: left;
    color: #e15b21;/*redText*/
}
.labelledInput.error input.moveUp + label,
.labelledInput.error input:focus + label {
    color: #e15b21;/*redText*/
}
.labelledInput.error input:focus,
.labelledInput.error input {
    border-bottom-width: 3px;
    border-color: #e15b21;/*redText*/
}

body .emailbox {
    box-sizing: border-box;
    border: 1px solid #a1a1a1;/*subGrey*/
    display: inline-block;
    background-color: #ffffff;/*whiteBg*/
    overflow: auto;
}
body .emailbox .emailList,
body .emailbox .emailList .emailItem {
    background-color: inherit;
    width: 100%;
    position: relative;
    font: inherit;
    color: #555555;/*mainGreyText*/
}
body .emailbox .emailList .emailItem {
    height: 25px;
}
body .emailbox .emailItem .removeIcon {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 25px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/static/image/general/general_btn_delete_grey.png);
    display: inline-block;
    vertical-align: middle;
}
body .emailbox .emailItem .emailLbl {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding-left: 30px;
    vertical-align: middle;
    font: inherit;
    height: 25px;
    line-height: 25px;
    /*single line*/
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
}
body .emailbox .emailInput {
    position: relative;
    width: 100%;
    padding-left: 30px;
    font: inherit;
    height: 25px;
    line-height: 25px;
    background-color: inherit;
    color: #a1a1a1;/*subGreyText*/
    box-sizing: border-box;
}
body .emailbox .emailInput input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25px;
    padding-left: 30px;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 8px center;
    background-image: url(/static/image/general/general_btn_add_email.png);
    font: inherit;
    color: #555555;/*mainGreyText*/
    box-sizing: border-box;
}
body .emailbox .emailInput input:focus {
    background-color: inherit;
}

[type="checkbox"],
[type="radio"] {
    display: none;
}
[type="radio"] + label,
[type="checkbox"] + label {
/*  height: 15px;
  line-height: 15px;*/
  cursor: pointer;
}
[type="checkbox"] + label>div.colorBox,
[type="radio"] + label>div.colorBox {
    position: relative;
    box-sizing: border-box;
    width: 17px;
    height: 17px;
    border-radius: 4px;
    margin-right: 5px;
}
[type="checkbox"] + label>div.colorBox.roundBox,
[type="radio"] + label>div.colorBox.roundBox {
    border-radius: 17px;
}
.colorBox {
    background-color: #548bc9; /*mainBg*/
}
[type="checkbox"]:not(:checked) + label>div.colorBox,
[type="radio"]:not(:checked) + label>div.colorBox {
    border-width: 2px;
    border-style: solid;
    border-color: #a1a1a1 !important; /*subGreyBg*/
    background-color: #ffffff !important;
}
[type="checkbox"] + label>*,
[type="radio"] + label>* {
    vertical-align: middle;
    display: inline-block;
}
[type="checkbox"]:checked + label>div.colorBox:after,
[type="radio"]:checked + label>div.colorBox:after {
    content: " ";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    border-width: 2px;
    border-style: solid;
    border-radius: 2px;
    border-color: #ffffff;
}
[type="checkbox"]:checked + label>div.colorBox.roundBox:after,
[type="radio"]:checked + label>div.colorBox.roundBox:after {
    border-radius: 13px;
}

.toggleBtn input[type="checkbox"] + label  {
    position: relative;
    display: block;
    width: 56px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: #a1a1a1; /*subGreyBg*/
}
.toggleBtn input[type="checkbox"]:checked + label {
    background-color: #548bc9; /*mainBg*/
    color: #548bc9; /*mainText*/
}
.toggleBtn input[type="checkbox"] + label .toggleBtnText {
    position: absolute;
    top: 2px;
    left: 2px;
    height: 16px;
    width: 36px;
    color: #a1a1a1; /*subGreyText*/
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/*f4*/
    font-size: 14px;
    box-sizing: border-box;
    border-radius: 16px;
    background-color: #ffffff; /*whiteBg*/
    transition: 0.2s ease all;
}
.toggleBtn input[type="checkbox"]:checked + label .toggleBtnText {
    left: 18px;
    color: #548bc9; /*mainText*/
}
.toggleBtn input[type="checkbox"]:not(:checked) + label .toggleBtnText .on,
.toggleBtn input[type="checkbox"]:checked + label .toggleBtnText .off {
    display: none;
}
/* controls */


/*clear kendo style*/
body .k-dirty {
    display: none;
}
body .k-state-focused {
    border-color: transparent;
}
body g path {
    cursor: default !important;
}

body .k-widget {
    color: inherit;
}

body .k-overlay {
    background-color: #000000;
    opacity: 0.7 !important;
}

body .k-popup {
    box-shadow: 0px 2px 8px rgba(0,0,0,0.2);
}

body .k-list-container {
    color: #555555;/*mainGreyBg*/
}

body .k-treemap.k-widget .k-treemap-tile,
body .k-treemap.k-widget {
    margin: 0;
    border: none;
}
body .k-treemap.k-widget .k-treemap-tile.k-leaf {
    padding: 10px;
    border-left: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
}
body .k-treemap.k-widget .k-treemap-tile.k-state-hover {
    box-shadow: none;
}

body .k-grid.grid {
    position: relative;
    border: none;
    height: 100%;
    padding-top: 37px; /*2px border + 35px th height*/
    box-sizing: border-box;
}
body .k-grid.grid.noScroll {
    height: auto;
}
body .k-grid.grid .k-grid-header {
    position: absolute;
    border: none;
    border-bottom: 2px solid #548bc9; /*mainBg*/
    background-color: #ffffff; /*whiteBg*/
    top: 0;
    left: 0;
}
body .k-grid.grid .k-grid-header th.k-state-focused {
    box-shadow: none;
}
body .k-grid.grid.noScroll .k-grid-header {
    padding-right: 1px !important;
}
body .k-grid.grid .k-grid-header table {
    margin: 0;
}
body .k-grid.grid .k-grid-header th.k-header:first-child {
    padding-left: 20px;
}
body .k-grid.grid .k-grid-header th.k-header {
    color: #a1a1a1;/*subGreyText*/
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/*f4*/
    font-size: 14px;
    text-transform: none;
    padding: 0;
    height: 35px;
    line-height: 35px;
    border: none;
}
body .k-grid.grid .k-grid-header th.k-header .k-icon.k-i-arrow-n {
    background-image: url(/static/image/general/general_btn_sorting_default.png);
    background-position: center right;
    background-size: 11px;
    opacity: 1;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}
body .k-grid.grid .k-grid-header th.k-header .k-icon.k-i-arrow-s {
    background-image: url(/static/image/general/general_btn_sorting_default.png);
    background-position: center right;
    background-size: 11px;
    opacity: 1;
}
body .k-grid.grid .k-grid-header th.k-header:hover .k-icon.k-i-arrow-n,
body .k-grid.grid .k-grid-header th.k-header:hover .k-icon.k-i-arrow-s {
    background-image: url(/static/image/general/general_btn_sorting_hover.png);
}
body .k-grid.grid .k-grid-content {
    height: 100% !important;
}
body .k-grid.grid.noScroll .k-grid-content {
    height: auto !important;
    overflow-y: auto;
}
body .k-grid.grid .k-grid-content tr {
    height: 50px;
}
body .k-grid.grid:not(.twoRow) .k-grid-content tr {
    line-height: 50px;
}
body .k-grid.grid.twoRow .k-grid-content tr {
    height: 70px;
}
body .k-grid.grid .k-grid-content tr td.k-edit-cell {
    line-height: inherit;
}
body .k-grid.grid .k-grid-content .k-alt {
    background-color: rgba(161, 161, 161, 0.05);/*subGreyBg*/
}
body .k-grid.grid .k-grid-content tr:not(.k-alt):hover {
    background-color: inherit;
}
body .k-grid.grid .k-grid-content tr td {
    line-height: normal;
    border: none;
    padding: 0;
    color: #555555; /*mainGrey*/
}
body .k-grid.grid .k-grid-content tr td:first-child {
    padding-left: 20px;
}
body .k-grid td.k-state-focused {
    box-shadow: none;
}
body .k-grid.grid .k-edit-cell .k-numeric-wrap {
    border-color: transparent;
    padding-right: 0;
}
body .k-grid.grid .k-edit-cell .k-numeric-wrap .k-select {
    display: none;
}
body .k-grid.grid .k-edit-cell input.k-input,
body .k-grid.grid .k-edit-cell input.k-input:hover,
body .k-grid.grid .k-edit-cell input.k-input:focus,
body .k-grid.grid .k-edit-cell .k-numeric-wrap input.k-input,
body .k-grid.grid .k-edit-cell .k-numeric-wrap.k-state-focused input.k-input,
body .k-grid.grid .k-edit-cell .k-numeric-wrap.k-state-hover input.k-input {
    border: 1px solid #a1a1a1; /*subGrey*/
    font: inherit;
    color: #555555; /*mainGrey*/
}

body .k-tooltip.k-chart-tooltip,
body .k-tooltip.k-popup.k-widget {
    padding: 0;
    margin: 0;
    background-color: transparent !important;
    border-radius: 0;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.2);
    text-align: left;
}
body .k-tooltip.k-popup.k-widget>div {
    background-color: rgba(255, 255, 255, .95);
    padding: 10px;
}

body .k-widget.k-window .k-window-content.noTitleWindow {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px 30px 20px 30px;
    height: auto;
    min-height: 150px;
    width: 100%;
}
body .k-widget.k-window .k-window-content.noTitleWindow.pad20 {
    padding: 20px;
}
body .k-widget.k-window .k-window-content.noTitleWindow .btnContainer {
    padding-top: 20px;
    width: 100%;
    text-align: center;
}

body .k-widget.k-window {
    border: none;
}
body .k-widget.k-window .k-window-content {
    padding: 15px 20px 20px 20px;
}
body .k-window .k-window-titlebar.k-header {
    height: 40px;
    line-height: 39px;
    padding: 0;
    box-sizing: border-box;
    background-color: #548bc9; /*mainBg*/
    color: #ffffff; /*whiteBg*/
}
body .k-window .k-window-titlebar .k-window-actions {
    padding: 0;
    top: 0;
    right: -0;
    height: 100%;
    width: 40px;
    text-align: center;
}

body .k-window .k-window-titlebar .k-window-actions .k-window-action.k-link.k-state-hover,
body .k-window .k-window-titlebar .k-window-actions .k-window-action.k-link {
    padding: 0;
    border: none;
    opacity: 1;
    width: 22px;
    height: 22px;
}
/*body .k-window .k-window-titlebar .k-window-actions .k-icon.k-i-close {
    background-image: url(/static/image/general/general_btn_close.png);
    background-position: center;
    opacity: 1;
    width: 22px;
    height: 22px;
}*/
body .k-window .k-window-titlebar .k-window-title {
    height: 39px;
    line-height: 39px;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    font-family: 'Ubuntu Regular', 'Microsoft JhengHei';
    font-size: 18px;
}

body .k-menu .selectedSystem {
    color: #548bc9; /*mainBg*/
    background-color: #ffffff;
}
body .k-menu .k-popup {
    color: #555555; /*mainGrey*/
}
body .k-menu .k-group {
    border: none;
}
body .k-menu .k-item>.k-link>.k-icon {
    margin-left: 10px;
    width: 12px;
}
body .k-widget.k-menu .k-link.k-state-active,
body .k-widget.k-menu .k-state-hover>.k-link {
    background-color: #548bc9; /*mainBg*/
    color: #ffffff;
}
body .k-animation-container .k-widget.k-menu>.k-item:hover,
body .k-animation-container .k-widget.k-menu>.k-item.k-state-hover {
    background-color: #548bc9; /*mainBg*/
}
body .k-animation-container .k-widget.k-menu>.k-item:hover>.k-link,
body .k-animation-container .k-widget.k-menu>.k-item.k-state-hover>.k-link {
    color: #ffffff;
}
body .k-widget.k-menu>.k-item>.k-link {
    background-color: transparent;
    color: #555555; /*mainGreyBg*/
    padding: 0 8px 0 0;
}
body .k-widget.k-menu>.k-item>.k-link .k-icon.k-i-arrow-s {
    background-image: url(/static/image/general/general_btn_dropdown.png);
    background-position: center;
    opacity: 1;
}
body .k-widget.k-menu .k-item .k-link .k-icon.k-i-arrow-e {
    background-image: url(/static/image/general/general_btn_collapse.png);
    background-position: center;
    opacity: 0.3;
}
body .k-widget.k-menu .k-item .k-link.k-state-active .k-icon.k-i-arrow-e {
    background-image: url(/static/image/general/general_btn_next_white.png);
    opacity: 1;
}
body .k-widget.k-menu .k-item>.k-link>.k-i-arrow-e {
    right: 10px;
}
body .k-widget.k-menu .k-menu-group .k-item>.k-link {
    padding: 0 32px 0 10px;
    height: 30px;
    line-height: 30px;
}

.k-calendar.calendar {
    border: none;
    width: 250px;
}
.k-calendar.calendar .no-k-link,
.k-calendar.calendar .k-link {
    color: #555555;/*mainGreyText*/
}
.k-calendar.calendar .k-header .k-link.k-nav-prev,
.k-calendar.calendar .k-header .k-link.k-nav-next,
.k-calendar.calendar .k-header .k-link.k-nav-fast {
    height: 45px;
    line-height: 45px;
    top: 0;
    margin: 0;
    color: #548bc9;/*main bg*/
    vertical-align: middle;
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/* f2 */
    font-size: 16px;/* f2 */
}
.k-calendar.calendar .k-header .k-link.k-nav-prev,
.k-calendar.calendar .k-header .k-link.k-nav-next {
    text-align: left;
}
.k-calendar.calendar .k-header .k-link.k-nav-prev .k-icon.k-i-arrow-w,
.k-calendar.calendar .k-header .k-link.k-nav-next .k-icon.k-i-arrow-e {
    height: 13px;
    width: 8px;
    background-image: url(/static/image/general/general_btn_calendar_blue.png);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
}
.k-calendar.calendar .k-header .k-link.k-nav-prev.k-state-disabled .k-icon.k-i-arrow-w,
.k-calendar.calendar .k-header .k-link.k-nav-next.k-state-disabled .k-icon.k-i-arrow-e {
    cursor: default;
    opacity: 0.3;
}
.k-calendar.calendar .k-header .k-link.k-nav-next {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}
.k-calendar.calendar .k-content {
    width: 100%;
    height: 250px;
}
.k-calendar.calendar .k-content th {
    text-align: center;
    padding: 16px 0 8px 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(161, 161, 161, 0.2);/*divider*/
    border-bottom: none;
    color: #a1a1a1;/*subGreyBg*/
    font-family: 'Ubuntu Light', 'Microsoft JhengHei';/* f2 */
    font-size: 16px;/* f2 */
}
.k-calendar.calendar .k-content td {
    text-align: center;
    padding: 0;
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
}
.k-calendar.calendar .k-content td .no-k-link,
.k-calendar.calendar .k-content td .k-link {
    border-radius: 50px;
    min-height: 22px;
    line-height: 22px;
    min-width: 22px;
    padding: 0 7px 0 7px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    outline: 0;
    box-shadow: none !important;
}
.k-calendar.calendar .k-content td.k-state-hover .k-link {
    color: #548bc9;/*main bg*/
}
.k-calendar.calendar .k-content td.k-state-selected.k-today .k-link,
.k-calendar.calendar .k-content td.k-state-selected.k-state-focused .k-link,
.k-calendar.calendar .k-content td.k-state-selected:active .k-link,
.k-calendar.calendar .k-content td.k-state-selected.k-state-hover .k-link,
.k-calendar.calendar .k-content td.k-state-selected .k-link,
.k-calendar.calendar .k-content td.k-state-selected .no-k-link {
    background-color: #548bc9;/*main bg*/
    color: #ffffff;/*whiteBg*/
}
.k-calendar.calendar .k-content td:active,
.k-calendar.calendar .k-content td.k-today,
.k-calendar.calendar .k-content td.k-state-focused,
.k-calendar.calendar .k-content td.k-today .k-link {
    background-color: transparent;
    color: #555555;/*mainGreyBg*/
}
.k-calendar.calendar .k-footer {
    display: none !important;
}
/*custom date popup*/
.twoCalendarWidth {
    width: 560px;
    min-width: 560px;
}

.startDate.k-calendar.calendar .k-content td .no-k-link,
.startDate.k-calendar.calendar .k-content td .k-link {
    border-radius: 50px 0 0 50px;
}
.endDate.k-calendar.calendar .k-content td .no-k-link,
.endDate.k-calendar.calendar .k-content td .k-link {
    border-radius: 0 50px 50px 0;
}
.custDateLbl {
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 10px;
}
/*custom date popup*/
/*datePicker*/
body .k-grid.grid .k-edit-cell .datePicker.k-datepicker {
    margin-top: -5px;
}
body .datePicker.k-datepicker,
body .datePicker.k-datepicker .k-picker-wrap,
body .datePicker.k-datepicker .k-picker-wrap .k-select {
    background-color: transparent;
    display: inline-block;
    box-sizing: border-box;
}
body .datePicker.k-datepicker .k-picker-wrap {
    border: none;
    padding: 0 30px 0 0;
    box-shadow: none;
}
body .datePicker.k-datepicker .k-picker-wrap:before {
    height: 30px;
    vertical-align: middle;
    padding:0;
}
body .k-grid.grid .k-edit-cell .datePicker.k-datepicker .k-picker-wrap .k-input,
body .datePicker.k-datepicker .k-picker-wrap .k-input {
    border: none;
    height: 30px;
    box-sizing: border-box;
    width: 105px !important;
    vertical-align: middle;
    text-indent: 0;
    background-color: transparent;
}
body .datePicker.k-datepicker .k-picker-wrap .k-select {
    width: 100%;
    height: 30px;
    border: none;

    vertical-align: middle;
    position: absolute;
    text-align: right;
}
body .datePicker.k-datepicker .k-picker-wrap .k-select .k-icon.k-i-calendar {
    width: 20px;
    height: 19px;
    vertical-align: middle;
    margin-top: -2px;
    background-position: center;
    background-image: url(/static/image/setting/setting_btn_calendar.png);
    background-size: 20px;
    opacity: 1;
}
/*datePicker*/

body .k-popup.k-list-container {
    border: none;
}
body .k-header.k-dropdown,
body .k-header.k-dropdown .k-dropdown-wrap,
body .k-header.k-menu,
body .k-header.k-menu .k-item {
    background-color: transparent;
    border: none;
    background-image: none;
}
body .k-header.k-dropdown .k-dropdown-wrap {
    padding-right: 22px;
}
body .k-header.k-dropdown .k-dropdown-wrap.k-state-disabled {
    opacity: 0.3;
    color: inherit;
}
body .k-header.k-dropdown .k-dropdown-wrap.k-state-border-down {
    padding-bottom: 0;
}
body .k-widget.k-dropdown .k-state-focused,
body .k-widget.k-dropdown.k-state-border-down {
    -webkit-box-shadow: none;
    box-shadow: none;
}
body .k-widget.k-dropdown .k-icon,
body .k-widget.k-dropdown .k-state-focused .k-icon {
    color: #555555;
}
body .k-widget.k-dropdown .k-input,
body .k-widget.k-dropdown .k-state-active .k-input {
    color: #555555; /*mainGreyBg*/
    text-indent: 0;
}
body .k-widget.k-dropdown span.k-dropdown-wrap .k-input {
    padding: 0;
}
body .k-popup .k-list>.k-state-selected {
    background-color: transparent;
    border-color: transparent;
}
body .k-popup .k-list>.k-state-hover.k-state-selected,
body .k-popup .k-list-optionlabel.k-state-selected,
body .k-popup .k-list-optionlabel.k-state-focused,
body .k-popup .k-list>.k-state-hover,
body .k-popup .k-list>.k-state-hover.k-state-focused,
body .k-popup .k-list-optionlabel.k-state-hover {
    color: #ffffff;/*whiteText*/
    background-color: #548bc9;/*main bg*/
    border-color: #548bc9;/*main bg*/
}
body .k-popup .k-list>.k-state-selected {
    color: #548bc9; /*mainBg*/
    background-color: #ffffff;/*whiteBg*/
    border-color: #ffffff;/*whiteBg*/
}
/*body .k-popup .k-list>.k-state-focused {
    border: none;
}*/
body .k-header.k-dropdown .k-dropdown-wrap .k-select {
    width: 22px;
    text-align: right;
    line-height: 1.714em;
}
body .k-header.k-dropdown .k-dropdown-wrap .k-select .k-icon.k-i-arrow-s {
    background-image: url(/static/image/general/general_btn_dropdown.png);
    background-position: center;
    width: 12px;
    height: 7px;
    opacity: 1;
}
body .subGreyBorder.k-header.k-dropdown .k-dropdown-wrap {
    border: 1px solid #a1a1a1;  /*subGreyBg*/
    padding: 0 22px 0 10px;
    box-sizing: border-box;
}
body .subGreyBorder.k-header.k-dropdown .k-dropdown-wrap .k-select {
    text-align: center;
}

body .toolbar.k-toolbar {
    box-sizing: border-box;
    border: none;
    height: 54px;/*toolbar height*/
    line-height: 54px;/*toolbar height*/
    width: 100%;
    background-image: none;
}
body .toolbar.k-toolbar>* {
    vertical-align: middle;
}
body .toolbar.k-toolbar>.k-overflow-anchor {
    height: 100%;
    box-sizing: border-box;
    border: none;
    margin: 0;
}
body .toolbar.k-toolbar.tabBar .k-button-group .k-button {
    margin-right: 80px;
    padding-left: 34px;
    padding-right: 0px;
    text-align: left;
    position: relative;
}
body .toolbar.k-toolbar.tabBar .k-button-group .k-button:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;/*22 + 10 */
    height: 25px;
    background-repeat: no-repeat;
    background-position: center left;
}
body .k-toolbar .k-button-group {
    margin: 0;
}
body .k-toolbar .k-button-group .k-toggle-button {
    border: none;
    background-color: transparent;
    background-image: none;
    box-shadow: none !important;
    color: #555555;/*mainGreyBg*/
    padding: 0;
    opacity: 0.7;
}
body .k-toolbar .k-button-group .k-toggle-button.k-state-active {
    color: #548bc9;/*main bg*/
    opacity: 1;
}
body .k-toolbar .k-button-group .k-toggle-button:active,
body .k-toolbar .k-button-group .k-toggle-button:hover,
body .k-toolbar .k-button-group .k-toggle-button:active:hover {
    background-color: transparent;
    border-color: transparent;
    color: #548bc9;/*main bg*/
    opacity: 1;
}

body .notifiContainer .k-notification,
body .notifiContainer .k-notification.k-notification-success,
body .notifiContainer .k-notification.k-notification-error {
    border: none;
    background-color: #ffffff;/*whiteBg*/
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2);/*shadow*/
    box-sizing: border-box;
    position: relative;
}
body .notifiContainer .k-notification.k-notification-success {
    padding: 15px 25px 15px 60px;
    min-height: 65px;
    background-image: url(/static/image/general/general_popupover_ico_success.png);
    background-repeat: no-repeat;
    background-position: 17px center;
}
body .notifiContainer .k-notification.k-notification-error {
    padding: 15px 25px 15px 60px;
    min-height: 65px;
    background-image: url(/static/image/general/general_popupover_ico_fail.png);
    background-repeat: no-repeat;
    background-position: 17px center;
}
body .notifiContainer .k-notification .closeIcon {
    background-image: url(/static/image/general/general_btn_close_maingrey.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

/*kendo tree*/
body .k-treeview-lines>li>div.k-top .k-icon {
    display: none;
}
body .k-treeview-lines>li.k-item.k-first {
    padding-left: 0;
}
body .k-treeview-lines li.k-item {
    padding-left: 20px;
}
body .k-treeview-lines .k-item .k-icon.k-plus {
    background-image: url(/static/image/general/general_btn_collapse.png);
    background-position: center;
    opacity: 1;
    margin-left: -20px;
    background-size: 5px;
}
body .k-treeview-lines .k-item .k-icon.k-minus {
    background-image: url(/static/image/general/general_btn_expand.png);
    background-position: center;
    opacity: 1;
    margin-left: -20px;
    background-size: 11px;
}
body .k-treeview-lines .k-item .k-icon.k-plus:hover,
body .k-treeview-lines .k-item .k-icon.k-minus:hover {
    opacity: 0.8;
}
body .k-treeview-lines .k-item div.k-top,
body .k-treeview-lines .k-item div.k-bot,
body .k-treeview-lines .k-item div.k-mid {
    position: relative;
    height: 36px;
    line-height: 35px;
    box-sizing: border-box;
}
body .k-treeview-lines li:not([data-expanded="true"]) div.k-top,
body .k-treeview-lines li:not([data-expanded="true"]) div.k-bot,
body .k-treeview-lines li:not([data-expanded="true"]) div.k-mid {
    position: relative;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: rgba(161, 161, 161, 0.2);/*divider*/

}
body .k-treeview-lines .k-item .k-checkbox {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 35px;
    line-height: 35px;
    margin-top: 0;
    vertical-align: middle;
}
body .k-treeview-lines .k-item .k-in {
    position: absolute;
    z-index: 1;
    width: 100%;
    padding: 0 0 0 25px;/*tree checkbox*/
    top: 0;
    left: 0;

    background-image: none !important;
    box-shadow: none !important;
    border: none;
    margin: 0;
    background-color: transparent;
    color: #555555;/*mainGreyText*/
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
}
/*kendo tree*/

body .k-state-disabled {
    opacity: 0.3;
}
/*clear kendo style*/

.column {
    padding-left: 20px;
}