html, body {
  height:100%; margin:0; padding:0;
  background: url('../images/content-bg.png') repeat;
  background-color:#f0f0f0; color:#000; background-size: cover;
  font-size:14px; font-family:"segoe ui","microsoft jhenghei","microsoft mhei",stheititc,sans-serif;

}


/* login page */
#login {background: url('../images/login_bg.jpg') no-repeat; background-size:cover;}
#login .header {height:auto; background: none;}
#login .logo {margin:38px 0 0 64px;}
/* login form */
/* .loginForm {background:rgba(181, 193, 205, .65); width:520px; height: 340px; padding:60px 110px; position:absolute; left:144px; top:20%;} */
.loginForm h1 {color:#fff; font-size: 33px; text-align: center; padding:0; margin:0 0 40px 0;}
.login {}
.login input {background:none; border:none; width:100%; padding-left:20px; color:#fff;}
.login input:focus{
    outline: 0;
}
.login ::-webkit-input-placeholder {
   color: #fff;
}
.login :-moz-placeholder { /* Firefox 18- */
   color: #fff;
}
.login ::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;
}
.login :-ms-input-placeholder {
   color: #fff;
}
.login label {position: absolute;}
.login i {color:#fff; font-size:16px; margin-right:5px;}
.formList {border-bottom:2px solid #fff; margin-bottom:25px; padding-bottom:7px; overflow: hidden;}
.btn.btn-login {background:rgba(0,0,0, .4); margin:0; text-align: center; color:#fff; font-size:16px; border-radius: 0; -moz-border-radius:0; -webkit-border-radius:0; }
.btn.btn-login:hover {background:rgba(0, 0, 0, .65);}

/* System Admin management */
/* header */
.header {height:49px; background:#fff;}
.logo {margin:7px 20px 11px -13px;}

.navbar-toggle {display: block; width: 50px; height: 50px; float: left; border-radius: 0; padding: 0; background: url(../images/whiteTheme_menu_toggle.png); margin-top: -1px;}
.navbar-toggle:hover {background-position: -101px 0;}

a.navbar-title {color:#333; font-size: 26px; font-weight: bold; text-decoration: none;}
a.navbar-title:hover {text-decoration: none; color:#777; cursor: pointer;}
a.navbar-title:active {text-decoration: none; color:#333; cursor: pointer;}


/* sidebar */
#sidebar {
  width:250px; height: calc(100% - 49px); position: absolute; left:0; padding-bottom: 0px;
  background-color: #333; z-index: 1; transition: all 0.5s ease;
  overflow: auto;
}

#sidebar.toggled {margin-left:-250px;}

#sidebar i {padding:0 5px;}
#sidebar ul, #sidebar ul li { list-style: none;}
#sidebar a {color:#fff;}
/* #sidebar .active {color:#fff; background-color: #5baad3;} */
#sidebar .nav-header h5 i { line-height: 25px;}
 
#sidebar .list-unstyled li.active a {color: #5baad3;}

.mainmenu .first-menu{ background-color: #5baad3 !important}
.mainmenu .collapsed.first-menu{ background-color: #292929 !important;}


/*
li.nav-header a {background-color: #292929 !important;}
li.nav-header a.collape
d {background-color: #5baad3 !important}

/* Admin Login Info */
.adminInfo {height: 183px; background:url(../images/adminInfo-bg.png); padding: 1px 5px 10px 5px;}
.adminInfo a {text-decoration: underline;}
.adminInfo h3 {font-size:18px; font-weight: normal; color:#333; text-align: center; }
.adminInfo h4 {font-size:13px; margin:2px 0 2px 0;}
.adminInfo span {display: block; text-align:center; color:#fff; font-size: 16px;}
.adminInfo span i {font-size: 20px; margin-bottom: 2px;}
.adminInfo .logout {text-align:center; padding: 5px 0 0 50px; float: left}
.adminInfo .logout a {text-decoration: none;}
.adminInfo .chgPwd {text-align:center; padding: 5px 50px 0 0 ; float: right}
.adminInfo .chgPwd a {text-decoration: none;}
.adminInfo a:hover {color:#C5C5C5;}

/* mainmenu */
.mainmenu {margin:0; padding:0; height: calc(100% - 183px);}
/* .mainmenu li {margin-bottom:1px;}*/

.mainmenu a {position: relative; display: block; text-decoration: none; }
.mainmenu a {position: relative; display: block; text-decoration: none;}
.mainmenu a h5:hover {text-decoration: none; background:rgba(0,0,0, .5);}
.mainmenu a h5 {margin:0; padding:14px 25px 14px 46px; background:rgba(0,0,0, .4);}
.mainmenu h5 i {position: absolute; top:8px; right:5px; font-size:13px;}
.mainmenu .first-menu {border-bottom: 2px solid #000;}



/* submenu */
.mainmenu .list-unstyled {}
.mainmenu .list-unstyled li {background: #333; margin-bottom:0; border-top:1px solid #424242;}
.mainmenu .list-unstyled li.active {background:rgba(0,0,0,.15);}
.mainmenu .list-unstyled li:hover {background:rgba(0,0,0, .15);}
.mainmenu .list-unstyled li a {background:none; padding:8px 10px 8px 40px;}
.mainmenu .list-unstyled li a:active {color: #5baad3;}
.mainmenu .list-unstyled li i {font-size:13px; position: inherit;}



/* content */
.content {margin-left:250px; position: absolute; padding:0px 0px; z-index: 999; transition: all 0.5s ease;}
.content.toggled {margin-left:0px;}


/* sub-content */
.sub-content {height:100%; margin: 15px 20px 0px 20px; padding:15px; background-color: #fff;}

/* form-group */
.form-group:before{content: "";display: block; width: 0px; height: 95% ; background-color: #ccc; position: absolute; left: 0; top: 0;}
.form-group {padding-right: 10px;}

.inline-form-group {display: inline-block; vertical-align: middle;}
label {display: block; margin-bottom: 10px;}
.inline-form-group i.fa{font-size: 15px;}


.inline-form-group2 i.fa{position: absolute; padding-top: 8px; font-size: 15px;}
.inline-form-group2 input.form-control {display: inline-block; margin-left: 21px; width: calc(100% - 21px)}



.inline-form-group input[type=date] {position: relative; display: inline-block;}
.inline-form-group input.form-control {width: 160px; margin-left: 5px;}



.checkbox {padding-left: 20px; padding-top: 8px; padding-bottom: 8px;}
.checkbox label {display: inline-block; position: relative; padding-left: 5px; font-size: 14px; }
.checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #808080;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555; }
.checkbox input[type="checkbox"] {opacity: 0; }
.checkbox input[type="checkbox"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::after {
      font-family: 'FontAwesome';
      content: "\f00c"; }
.checkbox input[type="checkbox"]:disabled + label {
      opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }

.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #5097ba;
  border-color: #5097ba; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; }
  

/* search-area */
.search-area {padding-bottom: 22px; border-bottom: 1px solid #bfbfbf;}
.search-area .search{margin-left: 10px;}
.content .search-area input[type='button'].search {background:#eeeeee url('../images/icon/search.png') 10px 50% no-repeat; padding:5px 13px 8px 28px;}
.content .search-area input[type='submit'].search {background:#eeeeee url('../images/icon/search.png') 10px 50% no-repeat; padding:5px 13px 8px 28px;}
.content .search-area input[type='button'].search:hover {background:#d4d4d4 url('../images/icon/search.png') 10px 50% no-repeat; padding:5px 13px 8px 28px;}
.content .search-area input[type='submit'].search:hover {background:#d4d4d4 url('../images/icon/search.png') 10px 50% no-repeat; padding:5px 13px 8px 28px;}
.sub-content .search-area input[type='button'].search {background:#eeeeee url('../images/icon/search.png') 10px 50% no-repeat; padding:5px 13px 8px 28px;}
.sub-content .search-area input[type='submit'].search {background:#eeeeee url('../images/icon/search.png') 10px 50% no-repeat; padding:5px 13px 8px 28px;}
.sub-content .search-area input[type='button'].search:hover {background:#d4d4d4 url('../images/icon/search.png') 10px 50% no-repeat; padding:5px 13px 8px 28px;}
.sub-content .search-area input[type='submit'].search {background:#eeeeee url('../images/icon/search.png') 10px 50% no-repeat; padding:5px 13px 8px 28px;}

/* third-footer */
.third-footer {padding-top: 20px; border-top: 1px solid #ccc; margin-right: 25px;}

/* MainGridView */
#MainGridView {margin-left: -15px}

/* ContentPlaceHolder0_pnlCmd */
#ContentPlaceHolder1_pnlCmd {margin-left: -15px; margin-top:25px;}

/* Page Title */
.pageTitle {font-size:24px; color:#292929; margin: 10px 18px 0px 20px; padding:5px 0 10px 0; border-bottom: solid 2px;}

.sub-content input[type='button'], .sub-content input[type='submit'] {background-color:#eeeeee; color:#333333; border:1px solid #c9c9c9; border-radius: 5px; padding:8px 14px;}
.sub-content input[type='button']:hover, .sub-content input[type='button'].search:hover, .sub-content input[type='submit']:hover {background-color:#d4d4d4; border:1px solid #c9c9c9; cursor: pointer}

.sub-content input[type='button'].btn-confirm, .sub-content input[type='submit'].btn-confirm {background-color:#5baad3; color:#fff; border:none; padding:8px 14px}
.sub-content input[type='button'].btn-confirm:hover, .sub-content input[type='submit'].btn-confirm:hover {background-color:#5097ba; color:#fff; border:none; padding:8px 14px; cursor: pointer;}

.sub-content input[type='button'].btn-success, .sub-content input[type='submit'].btn-success {background-color:#5bd3aa; color:#fff; border:none; padding:8px 14px; }
.sub-content input[type='button'].btn-success:hover, .sub-content input[type='submit'].btn-success:hover {background-color:#50ba95; color:#fff; border:none; padding:8px 14px; cursor: pointer;}

.sub-content input[type='button'].btn-failed, .sub-content input[type='submit'].btn-failed {background-color:#d35b5b; color:#fff; border:none; padding:8px 14px; }
.sub-content input[type='button'].btn-failed:hover, .sub-content input[type='submit'].btn-failed:hover {background-color:#ba5050; color:#fff; border:none; padding:8px 14px; cursor: pointer;}

.sub-content input[type='button'].btn-warning, .sub-content input[type='submit'].btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236; padding:8px 14px; }
.sub-content input[type='button'].btn-warning:hover, .sub-content input[type='submit'].btn-warning:hover {color:#fff;background-color:#ec971f;border-color:#d58512; padding:8px 14px; cursor: pointer;}

.sub-content input[type='button'].btn-cancel, .sub-content input[type='submit'].btn-cancel {background-color:#eeeeee; color:#333333; border:1px solid #c9c9c9; padding:8px 14px; }
.sub-content input[type='button'].btn-cancel:hover .sub-content input[type='submit'].btn-cancel:hover {background-color:#d4d4d4; color:#333333; border:1px solid #c9c9c9; padding:8px 14px; cursor: pointer;}

.sub-content input[type='button'].disabled, .sub-content input[type='submit'].disabled {background-color:#C5C5C5; color:#fff; border:none; padding:8px 14px; opacity: 0.8; cursor:not-allowed}
.sub-content input[type='button'].search, .sub-content input[type='submit'].search {background:#eeeeee url('../images/icon/search.png') 10px 50% no-repeat; padding:8px 13px 8px 28px;}
.sub-content input[type='button'].search:hover, .sub-content input[type='submit'].search:hover {background:#d4d4d4 url('../images/icon/search.png') 10px 50% no-repeat; padding:8px 13px 8px 28px;}

.content .button-group {margin-bottom:0px;}
.content .button-group input[type='button'], .content .button-group input[type='submit']{margin: 2px; }
.content .buttonforRatio input[type='submit']{margin-right:5px; margin-bottom: 5px; margin-top: 10px;}

/* table setting */
.table_format {width:100% ; margin-top:10px;}
.table_format thead th {background-color:#fff; font-size:14px; color:#333; padding: 5px 2px; font-weight: bold; text-align:center; border-bottom: 1px solid #333; height: 34px;}/*volcan modify, origin font-size 16*/
.table_format thead th:last-child {text-align: center;}
.table_format tr:nth-child(even) {background-color:#f2f2f2;}
.table_format td {font-size:14px; padding:10px 2px; border-bottom:1px solid #e5e5e5} /*volcan modify, origin font-size 16*/
.table_format td a {color:#000;}
.table_format td a:hover {text-decoration: underline;}
.table_format td input[type='submit'].btn-confirm {background-color:#5baad3; color:#fff; border:none; padding:5px 7px; }
.table_format td input[type='submit'].btn-confirm:hover {background-color:#5097ba; color:#fff; border:none; padding:5px 7px; cursor: pointer;}


.table_format1 thead th {background-color:#fff; font-size:16px; color:#333; padding: 5px 2px; font-weight: bold; text-align:left; border-bottom: 1px solid #333}
.table_format1 thead th:last-child {text-align: end; }
.table_format1 tr:nth-child(even) {background-color:#f2f2f2;}
.table_format1 td {font-size:16px; padding:10px 2px; border-bottom:1px solid #e5e5e5}
.table_format1 td a {color:#000;}
.table_format1 td a:hover {text-decoration: underline;}
.table_format1 td input[type='submit'].btn-confirm {background-color:#5baad3; color:#fff; border:none; padding:5px 7px; }
.table_format1 td input[type='submit'].btn-confirm:hover {background-color:#5097ba; color:#fff; border:none; padding:5px 7px; cursor: pointer;}

.Freezing {position:absolute ; }
.Freezing {background-color:lightskyblue; font-size:16px; color:#333; font-weight: bold; text-align:left; }


/* table from radio-button-list, checkbox-list setting */
.RadioButtonListTable td label { display: inline-block; margin-right: 10px;}
.CheckBoxListTable td label { display: inline-block; margin-right: 10px;}

/*Pager*/
.PagerCss td a:hover { width: 20px; color: black }
.PagerCss td a:active { width: 20px; color: black }
.PagerCss td a:link { width: 20px; color: black }
.PagerCss td a:visited { width: 20px; color: black }
.PagerCss td span { font-weight: bold; font-size: 15px; width: 20px; color: red }

/*Page Content*/
.noVisibility { visibility:hidden;}
.rowQueryResult {
    padding: 0 13px 1px 13px;
}

.ui-icon {
    transform: scale(1.3);
}

.borderWidth2 td {border-width:2px;}
.borderWidth2 {border-width:2px;}
.borderWidth1 td {border-width:1px;}
.borderWidth1 {border-width:1px;}
.borderWidth0 td {border-width:0px;}
.borderWidth0 {border-width:0px;}

.borderColorBlack td {border-color:#000000;}
.borderColorBlack {border-color:#000000;}
.borderColorWhite td {border-color:#FFFFFF;}
.borderColorWhite {border-color:#FFFFFF;}
.borderColorGray td {border-color:#999999;}
.borderColorGray {border-color:#999999;}
.borderColorBlue td {border-color:#000066;}
.borderColorBlue {border-color:#000066;}
.borderColorRed td {border-color:#FF0000;}
.borderColorRed {border-color:#FF0000;}

.bagPurple{ color:#CC0099;}
.bagGreen{ color:#339900;}
.bagYellow{ color:#000000; background-color:#FFFF00;}
.bagBlue{ color:#0000FF;}

.bgGrayDark td {color:#FFFFFF;}
.bgGrayDark { background-color:#666666;}
.bgWhite { background-color:#FFFFFF;}
.bgGrayLight {background-color:#E7E7E7;}
.bgGray { background-color:#DDDDDD;}
.bgYallow {background-color:#FFFFCC;}
.bgOrangeLight {background-color:#EEDDAA;}
.bgGreen {background-color:#99CC99;}
.bgBlue {background-color:#AED0EA;}
.bgRed {background-color:#FF0000;}
.bgDttm td {color:#FFFFFF;text-align:center;}
.bgDttm {background-color:#666666;}
.bgDesc td {color:#FFFFFF;}
.bgDesc {background-color:#666666;}

.txtWhite td { color:#FFFFFF;}
.txtWhite { color:#FFFFFF;}
.txtBlack td { color:#000000;}
.txtBlack { color:#000000;}
.txtGray td {color:#333333;}
.txtGray {color:#333333;}
.txtYallow td {color:#FFCC22;}
.txtYallow {color:#FFCC22;}
.txtGreen td {color:#005500;}
.txtGreen {color:#005500;}
.txtBlue td {color:#0070A3;}
.txtBlue {color:#0070A3;}
.txtRed td {color:#FF0000;}
.txtRed {color:#FF0000;}

.borderReadOnly
{
    border-style:solid;
    border-color:#C0C0C0;
}
.bgReadOnly
{
    background-color: #ecf2f6;
}
.divAlert { position:absolute; z-index:-1; cursor:pointer;margin:-1px 0px 0px 0px;}
.divAlert .divAlertArrowPlan { white-space:nowrap;text-align:left;}
.divAlert .divAlertArrowLine {width:2px;height:.5ex; border-width:0px;margin:0px 0px 0px 3px;}
.divAlert .divAlertContent { white-space:nowrap; padding:1px;border-width:2px; border-style:solid; -moz-box-shadow: 0px 0px 6px #f00; -webkit-box-shadow: 0px 0px 6px #f00; box-shadow: 0px 0px 6px #f00; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}