@charset "UTF-8";
/*----------------------------------------Global----------------------------------------*/
html {
  width: 100%;
  overflow: visible;
  display: block;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }

body {
  position: relative;
  top: 0;
  bottom: 0;
  font-family: Arial,"Microsoft JhengHei";
  font-size: 0.875em;
  line-height: 1.5em;
  width: 100%;
  height: 100%;
  background: #0f3143;
  overflow-x: hidden; }
  body.loadPage {
    padding: 0px 20px 0px 20px;
    height: auto; }

body > iframe {
  height: auto; }

a, a:visited {
  outline: none;
  /* for Firefox Google Chrome  */
  behavior: expression(this.onFocus=this.blur());
  /* for IE */
  color: #333;
  text-decoration: none; }
  a:hover {
    color: #900; }

.clearFloat {
  clear: both; }

.hidden {
  display: none; }

.block {
  display: block; }

input[type="button"], input[type="text"], input[type="password"], input[type="submit"], input[type="reset"], input[type="file"] {
  font-family: Arial,"Microsoft JhengHei";
  font-size: 1em;
  border-radius: 5px; }

input[type="button"]:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
  border: none;
  background-color: transparent;
  outline: none; }

input[type=checkbox], input[type=radio] {
  display: inline-block; }

textarea {
  font-family: Arial,"Microsoft JhengHei";
  font-size: 1em;
  color:black;
  border-radius: 5px; }

select {
  font-family: Arial,"Microsoft JhengHei";
  font-size: 1em;
  border-radius: 5px; }
  select:focus {
    outline: none; }

input[type="file"] {
  border: 1px solid #CCC;
  margin-right: 5px; }

input.long {
  width: 50% !important; }

input.max-long {
    width: 99% !important;
}

input[type="text"].short {
  min-width: 0px;
  max-width: 50px; }

textarea.full {
  width: 90%;
  border: 1px solid #CCC; }

@media all and (max-width: 480px) {
  /*RWD*/
  input[type="text"] {
    width: 50%; }
  textarea {
    width: 90%; } }

.marginCenter {
  margin: 0 auto; }

.center {
  text-align: center;
  display: block; }

.floatLeft {
  float: left;
  margin-right: 15px; }

.floatRight {
  float: right; }

table tr td.alignLeft {
  text-align: left; }

.alignLeft {
  text-align: left; }

.alignRight {
  text-align: right; }

.alignCenter {
  text-align: center; }

.mark {
  background: none;
  color: #dd4d4d;
  font-size: 0.929em; }

.popupWidth {
  width: 400px; }

.clearfix:after, form:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.colorMark {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 8px;
  margin: 0 auto; }

span {
  /*------- Color circle -------*/
  /*------- Icon images -------*/ }
  span.type {
    background-color: #bbb;
    padding: 2px 5px 2px 3px;
    color: #FFF;
    border-radius: 5px; }
  span.orange {
    background-color: #f7773d;
    padding: 2px 5px 2px 3px;
    color: #FFF;
    border-radius: 5px; }
  span.lake {
    background-color: #2cb0a8;
    padding: 2px 5px 2px 3px;
    color: #FFF;
    border-radius: 5px; }
  span.red {
    background-color: #ea2121;
    padding: 2px 5px 2px 3px;
    color: #FFF;
    border-radius: 5px; }
  span.olive {
    background-color: #999933;
    padding: 2px 5px 2px 3px;
    color: #FFF;
    border-radius: 5px; }
  span.blue {
    background-color: #1a62d9;
    padding: 2px 5px 2px 3px;
    color: #FFF;
    border-radius: 5px; }
  span.green {
    background-color: #00a504;
    padding: 2px 5px 2px 3px;
    color: #FFF;
    border-radius: 5px; }
  span.pink {
    background-color: #ff3c78;
    padding: 2px 5px 2px 3px;
    color: #FFF;
    border-radius: 5px; }
  span.icon-on, span.icon-off {
    width: 30px;
    height: 30px;
    /*2018.05.18 Evy Edit*/
    vertical-align: top; }
    span.icon-on:before, span.icon-off:before {
      position: relative;
      top: 2px;
      color: #f5912d;
      font-size: 18px; }
 span.icon-off:before {
    position: relative;
    top: 1px;
    /*2018.05.18 Evy Edit*/
    color: #999;
    font-size: 23.4px; }
  span.sendOK {
    font-size: 0.857em; }
  span.info {
    font-size: 0.857em; }
  span.noteword {
    font-size: 0.857em;
    color: #dd4c4c; }

/*----------------------------------------------------------------------------------------------
|-> Header
----------------------------------------------------------------------------------------------*/
.nav_menu {
  float: left;
  background: #f8f8f8;
  border-bottom: 1px solid #E6E9ED;
  border-left: 1px solid #E6E9ED;
  margin-bottom: 25px;
  width: 100%;
  position: relative;
  z-index: 98; }

.dropdown-menu.msg_list span {
  white-space: normal; }

.dropdown-menu {
  border: medium none;
  box-shadow: none;
  display: none;
  float: left;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 98;
  border: 1px solid #D9DEE4;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.dropdown-menu > li > a {
  color: #5A738E; }

.navbar-nav .open .dropdown-menu {
  position: absolute;
  background: #D9DEE4;
  margin-top: 0;
  border: 1px solid #D9DEE4;
  -webkit-box-shadow: none;
  right: 0;
  left: auto;
  width: 220px; }

.navbar-nav .open .dropdown-menu.msg_list {
  width: 300px; }

.top_nav li a i + span {
  margin-left: 5px; }

.navbar-nav > li > a, .navbar-brand, .navbar-nav > li > a {
  color: #fff !important; }

.navbar {
  margin-bottom: 0; }

.navbar-header {
  background: #34495E; }

.navbar-right {
  margin-right: 0; }

.navbar-static-top {
  position: fixed;
  top: 0;
  width: 100%; }

.top_nav .nav > li > a:focus, .top_nav .nav > li > a:hover, .top_nav .nav .open > a, .top_nav .nav .open > a:focus, .top_nav .nav .open > a:hover {
  background: #E6E9ED; }

.top_nav .navbar-right {
  margin: 0;
  float: right; }

.top_nav .navbar-right li {
  display: inline-block;
  float: right;
  position: static; }

.top_nav .dropdown-menu li {
  width: 100%; }

.top_nav .dropdown-menu li a {
  width: 100%;
  padding: 12px 20px; }

.top_nav li a i {
  font-size: 15px; }

.main_container .top_nav {
  position: relative;
  z-index: 98;
  display: block;
  margin-left: 230px; }

/*----------------------------------------------------------------------------------------------
|-> Footer
----------------------------------------------------------------------------------------------*/
footer {
  background: #fff;
  display: block;
  text-align: center;
  color: #666;
  font-size: 12px;
  padding-bottom: 90px; }

.footer_fixed footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%; }

/*------Function Bar------*/
.openArea {
  position: fixed;
  bottom: 0px;
  left: 210px;
  right: 20px;
  height: 0px; }
  .openArea span.open {
    position: absolute;
    top: 0px;
    right: 20px;
    background: #bbbbbb;
    width: 100px;
    height: 25px;
    line-height: 25px;
    border-radius: 5px 5px 0px 0px;
    filter: alpha(opacity=80);
    opacity: 0.8;
    color: #FFF;
    text-align: right;
    padding-right: 15px;
    font-size: 0.857em; }
    .openArea span.open:before {
      position: relative;
      top: 3px;
      font-family: "sysmgr";
      content: "<";
      margin-right: 3px;
      font-size: 16px;
      line-height: 0; }
    .openArea span.open:hover {
      cursor: pointer;
      filter: alpha(opacity=100);
      opacity: 1; }

.functionArea {
  position: fixed;
  z-index: 95;
  bottom: 0px;
  left: 230px;
  right: 0;
  margin: 0 36px 0 20px;
  background-color: #ececec;
  text-align: center;
  color: #333;
  font-size: 0.857em;
  border-radius: 5px 5px 0px 0px;
  padding-bottom: 5px;
  border: 1px solid #CCC;
  border-bottom: none; }
  .functionArea div {
    display: inline-block;
    margin: 5px 10px 5px 10px;
    vertical-align: top;
    /*------Input BTN------*/ }
    .functionArea div input.btnSort, .functionArea div input.btnDelete, .functionArea div input.btnDelete, .functionArea div input.btnBackto, .functionArea div input.btn {
        font-family: "sysmgr";
        font-size: 21.008px;
        color: #FFF;
        width: 36px;
        height: 36px;
        -webkit-border-radius: 18px;
        border-radius: 18px;
        filter: alpha(opacity=80);
        opacity: 0.8;
        background-color: #aaa;
    }
        .functionArea div input.btnSort:hover, .functionArea div input.btnDelete:hover, .functionArea div input.btnBackto:hover, .functionArea div input.btn:hover {
            filter: alpha(opacity=100);
            opacity: 1;
            cursor: pointer;
        }
    .functionArea div input.btnBackto {
      font-size: 18.9072px; }
    .functionArea div input.btnBack, .functionArea div input.btnAdd, .functionArea div input.btnSearch, .functionArea div input.btnReset, .functionArea div input.btnEmail, .functionArea div input.btnExcel, .functionArea div input.btnDE, .functionArea div input.btnImport, .functionArea div input.btnDel {
        position: relative;
        border: 0px;
        font-family: "sysmgr","微軟正黑體";
        font-size: 14px;
        padding: 10px 10px 7px 10px;
        margin: 10px 10px 10px 10px;
        border-radius: 5px;
        box-shadow: 0px 3px 0px 0px #8f8e8e;
        color: #FFF;
        background-color: #bbb;
        filter: alpha(opacity=90);
        opacity: 0.9;
    }
        .functionArea div input.btnBack:hover, .functionArea div input.btnAdd:hover, .functionArea div input.btnSearch:hover, .functionArea div input.btnReset:hover, .functionArea div input.btnEmail:hover, .functionArea div input.btnExcel:hover, .functionArea div input.btnDE:hover, .functionArea div input.btnImport:hover, .functionArea div input.btnDel:hover {
            top: 2px;
            cursor: pointer;
            filter: alpha(opacity=100);
            opacity: 1;
            box-shadow: 0px 1px 0px 0px #8f8e8e;
        }
    .functionArea div input.btnAdd {
      background: #f5912d;
      box-shadow: 0px 3px 0px 0px #c4894e; }
    .functionArea div input.btnSearch {
      background: #2b67c1;
      box-shadow: 0px 3px 0px 0px #1b54a9; }
    .functionArea div input.btnReset {
      background: #777;
      box-shadow: 0px 3px 0px 0px #555; }
    .functionArea div input.btnEmail {
      background: #2b67c1;
      box-shadow: 0px 3px 0px 0px #1b54a9; }
    .functionArea div input.btnExcel {
      background: #47a408;
      box-shadow: 0px 3px 0px 0px #3b8708; }
    .functionArea div input.btnDE {
      background: #f5912d; }
    .functionArea div input.btnImport {
      background: #f5912d; }
    .functionArea div input.btnDel {
      background: #ccc; }
    .functionArea div p {
      margin: 5px 0px 0px 0px; }
    .functionArea div ul {
      display: inline-block;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0px 3px 0px 0px #cacaca;
      margin-top: 3px; }
      .functionArea div ul li {
        float: left;
        background-color: #FFF;
        border-left: 1px solid #ccc; }
        .functionArea div ul li input[type="button"] {
          display: inline-block;
          padding: 5px 15px 5px 15px;
          background-color: #FFF; }
          .functionArea div ul li input[type="button"]:hover {
            background-color: #f5912d;
            color: #FFF;
            cursor: pointer; }
        .functionArea div ul li:first-child {
          border-left: none; }
  .functionArea input[type="button"], .functionArea input[type="submit"] {
    border: none;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    line-height: none;
    border-radius: 0px; }
  .functionArea #closeShort {
    display: none;
    position: absolute;
    top: 0px;
    right: 20px;
    width: 20px;
    height: 25px;
    line-height: 25px;
    border-radius: 0px 0px 5px 5px;
    filter: alpha(opacity=80);
    opacity: 0.8;
    color: #FFF;
    text-align: right;
    padding-right: 10px; }
    .functionArea #closeShort:hover {
      cursor: pointer;
      filter: alpha(opacity=100);
      opacity: 1; }
  .functionArea span.close {
    position: absolute;
    top: 0px;
    right: 20px;
    padding-right: 5px;
    background: #bbbbbb;
    width: 100px;
    height: 25px;
    line-height: 25px;
    border-radius: 0px 0px 5px 5px;
    filter: alpha(opacity=80);
    opacity: 0.8;
    color: #FFF;
    text-align: center;
    font-size: 0.857em;
    font-weight: normal;
    text-shadow: none; }
    .functionArea span.close:before {
      position: relative;
      top: 3px;
      font-family: "sysmgr";
      content: "?";
      margin-right: 3px;
      font-size: 16px;
      line-height: 0; }
    .functionArea span.close:hover {
      cursor: pointer;
      filter: alpha(opacity=100);
      opacity: 1; }
  @media all and (max-width: 991px) {
    .functionArea {
      /*RWD .functionArea*/
      left: 0;
      right: 3%;
      margin: 0 0 0 10px; } }
  @media all and (max-width: 767px) {
    .functionArea {
      left: 0;
      margin: 0 1% 0 10px; }
      .functionArea span.close {
        display: none; }
      .functionArea span#closeShort {
        display: block; }
        .functionArea span#closeShort:before {
          left: 5px; }
        .functionArea div input.btnBack, .functionArea div input.btnAdd, .functionArea div input.btnSearch, .functionArea div input.btnReset, .functionArea div input.btnEmail, .functionArea div input.btnExcel, .functionArea div input[type="button"].btnDE, .functionArea div input.btnImport, .functionArea div input.btnDel, .functionArea div input {
        /*2018.07.03 Evy Edit */
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        color: #fff; }
      .functionArea #closeShort {
        right: 0;
        border-radius: 0px 0px 0px 5px;
        /*2018.07.03 Evy Edit */
        overflow: hidden; } }
  @media all and (max-width: 480px) {
    .functionArea {
      left: 0;
      right: 0;
       /*2018.07.03 Evy Edit */
      margin: 0;
      border-radius: 0px; }
      .functionArea div {
        margin: 5px 0px 5px 5px; }
        .functionArea div:first-child {
          margin-left: 0px; }
        .functionArea div input.btnSort, .functionArea div input.btnDelete, .functionArea div input.btnBackto, .functionArea div input.btnDelete, .functionArea div input.btnBack, .functionArea div input.btnAdd, .functionArea div input.btnSearch, .functionArea div input.btnReset, .functionArea div input.btnEmail, .functionArea div input.btnExcel, .functionArea div input.btnDE, .functionArea div input.btnImport, .functionArea div input.btnDel, .functionArea div input.btnAdd, .functionArea div input.btnSearch, .functionArea div input.btnReset, .functionArea div input.btnEmail {
          width: auto;
          min-width: 36px; } }

.nav-sm .container .functionArea {
  left: 70px; }

select.selectmenu {
  position: relative;
  top: 10px; }

/*----------------------------------------------------------------------------------------------
|-> Side Menu
----------------------------------------------------------------------------------------------*/
.nav_title {
  width: 230px;
  background: #0f3143;
  color: #FFF;
  border-radius: 0;
  text-align: center; }
  .nav_title a {
    color: #FFF; }
    .nav_title a:visited {
      color: #FFF; }
    .nav_title a:hover {
      color: #CCC; }

.nav.side-menu > li {
  position: relative;
  display: block;
  cursor: pointer;
  border-bottom: 1px solid #224355; }

.nav.side-menu > li > a:hover {
  color: #fff !important; }

.nav.side-menu > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background: #265066; }

.nav.child_menu {
  display: none; }

.nav.child_menu li, .nav.child_menu dd {
  border-bottom: 1px solid #42697e;
  background: #265066; }

.nav.child_menu .child_menu dd {
  font-size: 14px; }

.nav.child_menu li:hover,
.nav.child_menu li.active,
.nav.child_menu li.select {
  background-color: #E6E9ED !important; }
  .nav.child_menu li:hover a,
  .nav.child_menu li.active a,
  .nav.child_menu li.select a {
    color: #333 ; }

.nav.child_menu .child_menu dd:hover,
.nav.child_menu .child_menu dd.active,
.nav.child_menu .child_menu dd.select {
  background-color: #fff; }
  .nav.child_menu .child_menu dd:hover a, .nav.child_menu .child_menu dd:hover a:visited,
  .nav.child_menu .child_menu dd.active a,
  .nav.child_menu .child_menu dd.active a:visited,
  .nav.child_menu .child_menu dd.select a,
  .nav.child_menu .child_menu dd.select a:visited {
    color: #333; }

.nav.child_menu li, .nav.child_menu dd {
  padding-left: 36px; }

.nav-md ul.nav.child_menu li:before, .nav-md dl.nav.child_menu dd:before {
  background: #ccc;
  bottom: auto;
  content: "";
  height: 8px;
  left: 23px;
  margin-top: 15px;
  position: absolute;
  right: auto;
  width: 8px;
  z-index: 1;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%; }

.nav-md ul.nav.child_menu li:after, .nav-md dl.nav.child_menu dd:after {
  border-left: 1px solid #ccc;
  bottom: 0;
  content: "";
  left: 27px;
  position: absolute;
  top: 0; }

.nav-md ul.nav.child_menu li:last-child::after {
  bottom: 50%; }

.nav.child_menu .active a span.fa {
  color: #47738a; }

.nav.child_menu .child_menu {
  margin-left: -36px; }
  .nav.child_menu .child_menu li, .nav.child_menu .child_menu dd {
    background: #47738a;
    padding-left: 50px; }
    .nav.child_menu .child_menu li:hover, .nav.child_menu .child_menu dd:hover {
      background: #fff; }
    .nav.child_menu .child_menu li a, .nav.child_menu .child_menu dd a {
      color: #fff; }
      .nav.child_menu .child_menu li a:visited, .nav.child_menu .child_menu dd a:visited {
        color: #fff; }
      .nav.child_menu .child_menu li a:hover, .nav.child_menu .child_menu dd a:hover {
        color: #333; }

.nav.child_menu li.active dl, .nav.child_menu li.select dl {
  display: block; }

.nav.side-menu > li > a {
  color: #fff;
  font-weight: 500; }

.nav.child_menu li li:hover,
.nav.child_menu li li.active {
  background: none; }

.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
  color: #fff; }

.nav > li > a {
  position: relative;
  display: block;
  padding: 13px 12px 12px; }

.nav > dd > a {
  position: relative;
  display: block;
  padding: 13px 5px 12px; }
  .nav > dd > a:visited {
    color: #FFF; }
  .nav > dd > a:hover {
    color: #FFF; }

.nav.side-menu > li.current-page,
.nav.side-menu > li.active {
  border-right: 3px solid #d80a49; }

.nav li.current-page {
  background: rgba(255, 255, 255, 0.05); }

.nav li li li.current-page {
  background: none; }

.nav li li.current-page a {
  color: #fff; }

.nav.side-menu > li.active > a {
  text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
  background: #265066;
  border-bottom: 1px solid #42697e; }

.navbar-brand,.navbar-nav > li > a {
  font-weight: 500;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 32px; }

.logo {
  width: 40px;
  height: auto; }

.site_title {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  line-height: 59px;
  display: block;
  height: 55px;
  margin: 0; }
  .site_title span {
    margin-left: 5px; }

.site_title:hover,
.site_title:focus {
  text-decoration: none;
  color: #fff; }

.nav.navbar-nav > li > a {
  color: #515356 !important; }

.nav.top_menu > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #34495E !important; }

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: transparent; }

.sidebar-footer {
  bottom: 0px;
  clear: both;
  display: block;
  padding: 1px 0 0 0;
  position: fixed;
  width: 230px;
  background: #E6E9ED; }

.sidebar-footer a {
  padding: 7px 0 3px;
  text-align: center;
  width: 25%;
  font-size: 17px;
  display: block;
  float: left;
  background: #0f3143; }

.sidebar-footer a:hover {
  background: #f5912d; }

.menu_section h3 {
  padding: 18px 18px 0 18px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 0; }

.menu_section > ul {
  margin-top: 10px; }

.main_menu span.fa {
  float: right;
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
  min-width: inherit;
  color: #C4CFDA; }

.active a span.fa {
  text-align: center !important;
  /*2018.05.18 Evy Edit*/ }


.nav-sm .menu_section {
  margin: 0; }

.nav-sm span.fa,
.nav-sm .menu_section h3 {
  display: none; }

.nav-sm li li span.fa {
  display: inline-block; }

.nav.child_menu > li > a {
  color: #FFF;
  font-size: 14px;
  padding: 9px; }

.nav-sm .navbar.nav_title {
  width: 70px; }

.nav-sm .navbar.nav_title a span {
  display: none; }

.nav-sm .navbar.nav_title a i {
  font-size: 27px;
  margin: 13px 0 0 3px; }

.nav-sm .hidden-small {
  visibility: hidden; }

.nav-sm .container.body .right_col {
  padding: 58px 20px 70px;
  margin-left: 70px;
  z-index: 2;
  border-left: 1px solid #E6E9ED; }

.nav-sm .main_container .top_nav {
  display: block;
  margin-left: 70px; }

.nav-sm .nav.side-menu li a {
  text-align: center;
  font-weight: 400;
  font-size: 10px;
  padding: 10px 5px;
  line-height: 1.4em; }

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
  border-right: 3px solid #ef7800; }

.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {
  position: static;
  width: 200px;
  background: none; }

.nav-sm > .nav.side-menu > li.active-sm > a {
  color: #1ABB9C !important; }

.nav-sm .nav.side-menu li a i.toggle-up {
  display: none !important; }

.nav-sm .nav.side-menu li a i {
  font-size: 25px !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 5px; }

.nav-sm ul.nav.child_menu {
  left: 100%;
  margin-left: 3px;
  position: absolute;
  top: 0;
  width: 210px;
  z-index: 4000;
  background: #3E5367;
  display: none; }

.nav-sm ul.nav.child_menu li {
  padding: 0; }

.nav-sm ul.nav.child_menu li a {
  padding: 10px 10px; }

.nav-sm ul.nav.child_menu li a {
  text-align: left !important;
  font-size: 16px; }

.nav-sm .nav.child_menu .child_menu dd {
  padding-left: 10px; }

.nav-sm .profile {
  display: none; }

.nav-md .container.body .right_col {
  position: relative;
  background: #fff;
  padding: 0 20px;
  margin-left: 230px;
  border-left: 1px solid #E6E9ED; }

.nav-sm .container.body .right_col {
  background: #fff; }

.nav-md .container.body .col-md-3.left_col {
  min-height: 100%;
  width: 230px;
  padding: 0;
  position: absolute;
  display: flex;
  z-index: 98; }

.nav-md .container.body .col-md-3.left_col.menu_fixed {
  height: 100%;
  position: fixed; }

.nav-sm .container.body .col-md-3.left_col {
  min-height: 100%;
  width: 70px;
  padding: 0;
  z-index: 98;
  position: absolute; }

.nav-sm .container.body .col-md-3.left_col.menu_fixed {
  position: fixed;
  height: 100%; }

.nav-sm .nav.child_menu .child_menu {
  margin-left: 0; }

.main_menu .fa {
  width: 26px;
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  margin-right: 8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .main_menu .fa.fa-chevron-down {
    margin-right: 0; }

.main_menu i.fa:before {
  font-size: 16px; }

/* Page number */
.numberArea {
  width: 100%;
  margin: 25px 0px; }
  .numberArea p {
    text-align: center;
    color: #666;
    font-size: 0.857em;
    line-height: 2em;
    margin-bottom: 10px; }
  .numberArea ul {
    width: 100%;
    min-height: 30px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.8em; }
    .numberArea ul li {
      display: inline-block;
      *float: left;
      /*ie7*/ }
      .numberArea ul li.first a:after {
        position: relative;
        left: -2px;
        font-family: "sysmgr";
        display: block;
        content: "e"; }
      .numberArea ul li.last a:after {
        position: relative;
        left: -2px;
        display: block;
        font-family: "sysmgr";
        content: "d"; }
      .numberArea ul li a {
        text-decoration: none;
        display: inline-block;
        text-align: center;
        letter-spacing: -1px;
        margin: 3px;
        padding: 0px 10px 0px 10px;
        line-height: 24px;
        color: #666;
        background-color: #f5f5f5;
        border: 1px solid #f5f5f5;
        border-radius: 5px; }
        .numberArea ul li a:hover {
          color: #fff;
          text-decoration: none;
          background-color: #f5912d;
          border: 1px solid #f5912d; }
    .numberArea ul li.press a {
      text-decoration: none;
      cursor: default;
      color: #fff;
      text-decoration: none;
      background-color: #f5912d;
      border: 1px solid #f5912d;
      font-weight: bold; }
  @media all and (max-width: 480px) {
    .numberArea {
      /*RWD .numberArea*/
      max-width: 480px; } }

/*-- Editor --*/
.bbsArticle {
  margin-bottom: 30px; }
  .bbsArticle h1 {
    font-size: 26px;
    padding: 20px 0; }
  .bbsArticle h2 {
    font-size: 23.1088px;
    padding: 10px 0; }
  .bbsArticle h3 {
    font-size: 21.6px;
    padding: 10px 0; }
  .bbsArticle h4 {
    font-size: 19.2px;
    padding: 5px 0; }
  .bbsArticle h5 {
    font-size: 17.6px;
    padding: 5px 0; }
  .bbsArticle h6 {
    font-size: 16px;
    padding: 5px 0; }
  .bbsArticle p {
    margin-bottom: 15px; }
    .bbsArticle p a {
      color: #333;
      text-decoration: underline; }
      .bbsArticle p a:visited {
        color: #333; }
      .bbsArticle p a:hover {
        color: #f5912d; }
  .bbsArticle ul {
    margin: 20px; }
    .bbsArticle ul li {
      margin-bottom: 10px;
      padding-left: 0px;
      color: #333;
      list-style-position: outside;
      list-style-type: disc;
      border: 0px; }
  .bbsArticle ol li {
    margin-bottom: 10px;
    margin-left: 20px;
    color: #333;
    list-style-position: outside;
    list-style-type: decimal; }

.fa-home:before {
  font-size: 18px; }

.checkbox input[type=checkbox] {
  margin-left: auto; }

input[type=file].inlineInput {
    display: inline-block;
    margin-bottom: 10px;
}
.icon-on + span, span.icon-off + span {
  margin-left: 10px; }

.container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0; }

.toggle {
  float: left;
  margin: 0;
  padding-top: 16px;
  width: 70px; }

.toggle a {
  padding: 15px 15px 0;
  margin: 0;
  cursor: pointer; }

.toggle a i {
  font-size: 26px; }

/*------------------------------ Content ------------------------------*/
.contentArea {
  position: relative;
  display: block;
  z-index: 1;
  /*------- Inside Content -------*/ }
  .contentArea h1 span {
    margin-left: 5px; }
  .contentArea h4 {
    font-size: 16.2px; }
  .contentArea .detailGroup {
    border: 1px solid #eaeaea;
    border-radius: 5px;
    margin-bottom: 25px;
    overflow: hidden; }
    .contentArea .detailGroup .selectArea ul {
      padding: 0px; }
      .contentArea .detailGroup .selectArea ul li {
        margin: 0px; }
    .contentArea .detailGroup h3 {
      padding: 10px;
      background-color: #eaeaea;
      color: #000; }
      .contentArea .detailGroup h3 a.openItem {
        float: right;
        text-decoration: none;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .contentArea .detailGroup h3 a.openItem:before {
          font-family: "sysmgr";
          content: "a"; }
        .contentArea .detailGroup h3 a.openItem:hover {
          transform-origin: center center;
          -moz-transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
        @media all and (max-width: 480px) {
          .contentArea .detailGroup h3 a.openItem:hover {
            transform-origin: center center;
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg); } }
      .contentArea .detailGroup h3 a.openItem.press {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; }
        .contentArea .detailGroup h3 a.openItem.press:hover {
          transform-origin: center center;
          -moz-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg); }
        @media all and (max-width: 480px) {
          .contentArea .detailGroup h3 a.openItem.press:hover {
            transform-origin: center center;
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg); } }
    .contentArea .detailGroup> ul {
      padding: 10px; }
      .contentArea .detailGroup> ul li {
        position: relative;
        line-height: 28px;
        margin: 10px 5px 10px 20px; }
        .contentArea .detailGroup> ul > li:before {
          position: absolute;
          top: 0;
          left: -20px;
          font-family: "sysmgr";
          content: ">";
          color: #f5912d; }
        .contentArea .detailGroup ul li ul li {
          background: none;
          margin: 5px; }
        .contentArea .detailGroup ul li .mark {
          color: #dd4d4d; }
        .contentArea .detailGroup ul li p.title {
          display: inline-block;
          vertical-align: top;
          min-width: 90px; }
        .contentArea .detailGroup ul li .info {
          /*2018.05.18 Evy Edit*/
          display: inline-block;
          vertical-align: top; }
    .contentArea .detailGroup dl {
      padding: 10px; }
      .contentArea .detailGroup dl dd {
        margin: 10px 5px 10px 5px; }
        .contentArea .detailGroup dl dd mark {
          margin-left: 5px; }
        .contentArea .detailGroup dl dd section {
          display: inline-block;
          margin-left: 5px; }
    .contentArea .detailGroup img {
      max-width: 800px;
      margin-right: 15px; }
    .contentArea .detailGroup figure {
      position: relative;
      display: inline-block;
      margin: 10px 0px 10px 0px; }
      .contentArea .detailGroup figure input {
        position: absolute;
        z-index: 15px;
        top: -15px;
        right: 0px; }
.contentArea .detailGroup input[type="text"], .contentArea .detailGroup input[type="email"] {
    background-color: #f5f5f5;
    border: none;
    padding: 5px 5px 5px 5px;
    margin-right: 5px;
    min-width: 100px;
    margin-bottom: 10px;
}
    .contentArea .detailGroup input[type="password"] {
      background-color: #f5f5f5;
      border: none;
      padding: 5px 5px 5px 5px;
      margin-right: 5px;
      min-width: 100px; }
    .contentArea .detailGroup input[type="radio"] {
      margin: 5px; }
    .contentArea .detailGroup input[type="button"] {
      margin-left: 15px;
      margin-bottom: 10px;
      padding: 0 20px 0 20px;
      background-color: #aaa;
      color: #fff;
      border: none;
      cursor: pointer;
      filter: alpha(opacity=80);
      opacity: 0.8; }
      .contentArea .detailGroup input[type="button"]:hover {
        filter: alpha(opacity=100);
        opacity: 1; }
    .contentArea .detailGroup table {
      width: 100%;
      font-size: 16px; }
      .responsive .contentArea .detailGroup table {
        font-size: 16px; }
      .contentArea .detailGroup table td a {
        font-size: 16px; }
      .contentArea .detailGroup table td:first-child {
        width: 100px; }
  .contentArea .detailClose ul {
    display: none; }
  .contentArea h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0px 0px 20px 0px; }
    .contentArea h1 span {
      font-size: 0.714em;
      font-weight: normal;
      color: 666; }
  .contentArea .btnArea {
    position: absolute;
    top: 80px;
    right: 15px; }
    .contentArea .btnArea a {
      font-size: "微軟正黑體";
      margin-right: 10px;
      display: inline-block;
      padding: 5px 15px 5px 15px;
      border-radius: 5px;
      filter: alpha(opacity=80);
      opacity: 0.8;
      text-decoration: none;
      color: #FFF;
      background-repeat: no-repeat;
      background-position: 5px 0px; }
      .contentArea .btnArea a .icon-search {
        position: relative;
        top: 2px;
        margin-right: 5px; }
      .contentArea .btnArea a .icon-plus {
        position: relative;
        top: 1px;
        font-size: 12px;
        margin-right: 5px; }
      .contentArea .btnArea a:visited {
        color: #FFF; }
      .contentArea .btnArea a:hover {
        filter: alpha(opacity=100);
        opacity: 1; }
      .contentArea .btnArea a.add {
        background: #f5912d; }
      .contentArea .btnArea a.search {
        background: #2b67c1; }
      .contentArea .btnArea a.delete, .contentArea .btnArea a.deleteall {
        background: #ccc; }
      .contentArea .btnArea a.excel {
        background: #47a408; }

/*------- Tip -------*/
.tip {
  position: relative;
  z-index: 20;
  top: 5px;
  width: 23px;
  height: 23px;
  display: inline-block; }
  .tip:before {
    font-family: "sysmgr";
    content: "G";
    color: #aaa;
    font-size: 18px;
    cursor: pointer; }
  .tip .tipBox {
    display: none;
    position: absolute;
    z-index: 10;
    top: 30px;
    left: -50px;
    width: 600px;
    font-size: 0.929em;
    color: #FFF;
    font-weight: normal;
    background-color: #999;
    padding: 10px 10px 10px 28px;
    border-radius: 5px;
    cursor: default; }
    .tip .tipBox ul li {
      list-style-type: disc;
      list-style-position: outside;
      line-height: 1.714em; }
    .tip .tipBox span {
      position: absolute;
      left: 50px;
      top: -12px;
      width: 25px;
      height: 25px;
      background: url(../images/tip_arr.png) no-repeat left top; }
  @media all and (max-width: 1023px) {
    .tip {
      /*RWD .tip*/ }
      .tip #ui-datepicker-div {
        margin-left: 0px; }
      .tip .header h2 {
        display: none; }
      .tip .tipBox {
        width: 450px; } }
  @media all and (max-width: 480px) {
    .tip {
      display: none; } }

/*------- Table -------*/
.tableArea .mark {
  margin: 10px;
  text-align: center;
  display: block; }

.tableArea .function {
  background-color: #ccc;
  display: inline-block;
  padding: 3px;
  border-radius: 25px; }
  .tableArea .function a {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin: 0px 0px 0px 0px;
    vertical-align: middle;
    text-decoration: none;
    outline: none;
    /* for Firefox Google Chrome  */
    behavior: expression(this.onFocus=this.blur());
    /* for IE */ }
    .tableArea .function a[class*=icon]:before{
        position: absolute;
        line-height: 30px;
        top: 0;
        left: 6px;
        font-size: 18px;
        color: #FFF;
    }
    .tableArea .function a:hover {
      background-color: #f5912d; }
    .tableArea .function a.icon-trash-bin:before {
      font-size: 19.8px;
      left: 5px; }

.tableArea span {
  vertical-align: middle; }
  .tableArea span:hover {
    color: #FFF; }

.tableArea figure {
  overflow: hidden;
  border: 0px solid #ccc;
  border-radius: 5px; }
  .tableArea figure img {
    max-width: 80px;
    height: auto;
    border-radius: 5px; }

.tableArea tr td {
  padding: 5px;
  text-align: center;
  line-height: 1.4em;
  border-right: 1px solid #eaeaea; }
    .tableArea tr td input[type="text"],
    .tableArea tr td input[type="password"] {
        border: 1px solid #ccc;
        width: 100px;
        padding: 5px;
    }
        .tableArea tr td input[type="text"]:focus,
        .tableArea tr td input[type="password"]:focus {
            background: #FFF;
        }
  .tableArea tr td:first-child input[type="text"] {
    width: 90%; }
  .tableArea tr td span {
    margin-left: 5px; }
  .tableArea tr td img {
    max-width: 80px; }
  .tableArea tr td .sort {
    border: 1px solid #CCC;
    width: 25px;
    padding: 5px;
    text-align: center; }
  .tableArea tr td.indexFirst {
    width: 15%; }
  .tableArea tr td.no {
    width: 5%; }
  .tableArea tr td.main {
    width: auto; }
  .tableArea tr td.time {
    min-width: 70px; }
  .tableArea tr td.btn {
    min-width: 100px; }
  .tableArea tr td.functionTd {
    width: 130px; }
  .tableArea tr td.functionTd2 {
    min-width: 80px; }
  .tableArea tr td.checkbox {
    width: auto;
    text-align: center; }
  .tableArea tr td.minWidth {
    width: 80px;
    min-width: 80px; }
  .tableArea tr td.num {
    font-size: 0.857em; }
  .tableArea tr td.url {
    white-space: normal;
    word-break: break-all;
    width: 50%; }

.tableArea tr.titlebar {
  background-color: #eaeaea;
  font-size: 0.98em;
  color: #999; }
  .tableArea tr.titlebar td {
    position: relative; }
    .tableArea tr.titlebar td a {
      position: relative;
      display: inline-block;
      text-decoration: none;
      color: #6C6067;
      padding-bottom: 8px;
      min-width: 40px; }
      .tableArea tr.titlebar td a:visited {
        color: #6C6067; }
      .tableArea tr.titlebar td a.sortUp:after, .tableArea tr.titlebar td a:hover:after, .tableArea tr.titlebar td a.sortDown:after, .tableArea tr.titlebar td a.sortUp:hover:after, .tableArea tr.titlebar td a.sortDown:hover:after {
        position: absolute;
        bottom: -5px;
        left: 40%;
        font-family: "sysmgr";
        content: "<"; }
      .tableArea tr.titlebar td a:hover {
        color: #666; }
        .tableArea tr.titlebar td a:hover:after {
          content: "?"; }
      .tableArea tr.titlebar td a.sortDown, .tableArea tr.titlebar td a:visited:hover, .tableArea tr.titlebar td a.sortUp:hover, .tableArea tr.titlebar td a:hover, .tableArea tr.titlebar td a.sortDown:hover {
        font-weight: bold; }
        .tableArea tr.titlebar td a.sortDown:after, .tableArea tr.titlebar td a.sortUp:hover:after {
            content: "?";
        }

.tableArea table {
  width: 100%;
  border: 1px solid #ececec; }
  .tableArea table tbody tr:nth-child(even) {
    background: #f5f5f5; }
  .tableArea table tbody tr:hover {
    background-color: #ccc;
    color: #FFF; }
    .tableArea table tbody tr:hover input[type="text"], .tableArea table tbody tr:hover input[type="password"], .tableArea table tbody tr:hover select {
        color: #333;
    }
    .tableArea table tbody tr:hover a {
      color: #FFF; }
      .tableArea table tbody tr:hover a:visited {
        color: #FFF; }
  .tableArea table thead td {
    padding: 10px 5px 5px 5px; }
  /*.tableArea table thead tr td:nth-child(1), .tableArea table thead tr td:nth-child(2), .tableArea table tbody tr td:nth-child(1), .tableArea table tbody tr td:nth-child(2) {
    width: 40px; }*/

.tableArea a {
  text-decoration: underline;
  color: #015b91; }
  .tableArea a:visited {
    text-decoration: underline; }

@media all and (max-width: 480px) {
  .tableArea table.responsive td,
  .tableArea table.responsive th {
    white-space: inherit; }
  .tableArea table.responsive td.main {
    width: 200px;
    display: inline-table; } }

.record {
  font-size: 1em;
  text-align: center;
  margin: 10px 0px 10px 0px; }

.record span {
  font-size: 0.929em;
  color: #C30; }

ul.searchTerms {
  margin-bottom: 10px; }
  ul.searchTerms h4 {
    display: inline-block;
    font-size: 1.143em; }
  ul.searchTerms li {
    display: inline-block;
    line-height: 20px;
    margin: 5px 5px 5px 0; }
    ul.searchTerms li:before {
      font-family: "sysmgr";
      content: ">";
      color: #f5912d; }
    ul.searchTerms li .mark {
      color: #dd4d4d;
      font-size: 1em; }

.systemGroup {
  margin-bottom: 10px;
  text-align: center;
  line-height: 1.714em; }
  .systemGroup .mark {
    font-size: 1em; }

.widgetArea {
  margin-bottom: 10px; }
  .widgetArea ul {
    text-align: center; }
    .widgetArea ul li {
      position: relative;
      height: 46px;
      line-height: 46px;
      padding-left: 50px;
      display: inline-block;
      margin: 10px; }
      .widgetArea ul li:hover {
        cursor: pointer;
        color: #f5912d;
        font-weight: bold; }
      .widgetArea ul li.press {
        cursor: pointer;
        color: #f5912d;
        font-weight: bold;
        cursor: default; }
      .widgetArea ul li span {
        font-size: 12px;
        font-weight: normal;
        background-color: #d16262;
        border-radius: 15px;
        position: absolute;
        top: -5px;
        left: 30px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: #FFF; }
      .widgetArea ul li.press a {
        color: #f5912d; }
      .widgetArea ul li a {
        color: #333;
        text-decoration: none; }
        .widgetArea ul li a:visited {
          color: #333;
          text-decoration: none; }
        .widgetArea ul li a:hover {
          color: #f5912d; }
  @media all and (max-width: 480px) {
    .widgetArea {
      /*RWD .widgetArea*/ }
      .widgetArea ul li {
        display: inline-block;
        margin: 0px;
        font-size: 0.8em; } }

/*------Select Style------*/
.selectArea {
  margin-bottom: 5px;
  position: relative; }
  .selectArea input[type="button"] {
    margin-left: 15px;
    padding: 7px 20px 7px 20px;
    background-color: #aaa;
    color: #fff;
    border: none;
    filter: alpha(opacity=80);
    opacity: 0.8; }
    .selectArea input[type="button"]:hover {
      filter: alpha(opacity=100);
      opacity: 1;
      cursor: pointer; }
  .selectArea input[type="submit"] {
    margin-left: 15px;
    padding: 7px 20px 7px 20px;
    background-color: #aaa;
    color: #fff;
    border: none;
    filter: alpha(opacity=80);
    opacity: 0.8; }
    .selectArea input[type="submit"]:hover {
      filter: alpha(opacity=100);
      opacity: 1;
      cursor: pointer; }

.selectMenu {
  display: inline-block;
  position: relative;
  z-index: 3;
  min-width: 120px;
  height: 30px;
  margin-bottom: 5px; }
  .selectMenu p {
    display: inline-block; }
    .selectMenu p:before {
      font-family: "sysmgr";
      content: ">";
      color: #f5912d; }
  .selectMenu ul {
    display: block;
    min-width: 160px; }
    .selectMenu ul.more {
      display: none;
      width: 260px; }
    .selectMenu ul.auto {
      display: inline-block;
      width: auto;
      min-width: 80px; }
    .selectMenu ul li {
      position: relative;
      display: block;
      background: #f5f5f5;
      border-radius: 5px;
      text-align: left;
      padding: 0px 40px 0px 10px;
      line-height: 32px;
      z-index: 3;
      cursor: pointer; }
      .selectMenu ul li:hover ul {
        display: block;
        overflow-y: auto; }
      .selectMenu ul li ul {
        display: none;
        position: absolute;
        top: 32px;
        left: 2%;
        list-style: none;
        max-height: 300px;
        width: 96%;
        overflow-y: visible;
        overflow-x: hidden;
        background-color: #dfdfdf;
        border-radius: 0px 0px 5px 5px;
        overflow: hidden; }
        .selectMenu ul li ul li {
          background-image: none;
          background-color: #dfdfdf;
          display: block;
          border-radius: 0px;
          border: 3px solid #dfdfdf;
          width: auto;
          line-height: 1.5em;
          padding: 5px; }
          .selectMenu ul li ul li:hover {
            background-color: #fff;
            color: #333;
            border-radius: 8px;
            cursor: pointer; }
  .selectMenu input.inputText {
    display: inline-block;
    position: static;
    z-index: 5;
    background-color: #f5f5f5;
    border: none;
    padding: 5px 5px;
    margin-right: 5px;
    width: 130px; }
  .selectMenu input[type="text"] {
    min-width: 120px;
    border: 1px solid #ccc;
    padding: 5px; }

.itemMargin div {
  margin: 5px 0px 5px 0px; }

/*------------------------------ jquery-ui ------------------------------*/
select {
  min-width: 100px;
  font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc; }

.ui-widget-content {
  font-family: "微軟正黑體", Arial, Helvetica, sans-serif; }

.ui-selectmenu-button span.ui-selectmenu-text {
  font-size: 80%;
  font-family: "微軟正黑體", Arial, Helvetica, sans-serif; }

.ui-selectmenu-menu .ui-menu {
  font-size: 100%;
  font-family: "微軟正黑體", Arial, Helvetica, sans-serif; }

.ui-selectmenu-button {
  position: relative;
  top: 8px; }

.ui-icon-alert {
  position: relative;
  top: 3px;
  display: inline-block; }

/*------------------------------ 文字顏色標註 ------------------------------*/
.markred {
  color: #C00; }

.markgreen {
  color: #393; }

.markblue {
  color: #09C; }

.markorg {
  color: #F60; }

.markgary {
  color: #999; }

.markwhite {
  color: #fff; }

/*------kendoui------*/
.k-datetimepicker input[type="text"] {
  padding: 5px 0px 5px 0px; }

.detailGroup input[type="text"].k-input {
  padding: 5px 0px 5px 0px; }

input.dateBox.k-input {
  padding: 5px 0px 5px 0px; }

.k-dropdown-wrap.k-state-default.k-state-hover {
  background-color: #FFF; }

.k-invalid-msg {
  margin-left: 50px; }

.k-widget.k-tooltip {
  background-color: #999;
  color: #FFF;
  line-height: 25px; }

input.numberBox.k-input {
  padding: 5px 0px 5px 0px;
  min-width: 10px; }

input.numberBox.k-input .k-numerictextbox {
  width: 50px; }

.detailGroup .k-autocomplete {
  border: 0px; }

.k-list {
  padding: 0px;
  margin: 0px; }

.k-editor-toolbar-wrap {
  padding: 0px;
  margin: 0px; }

span.k-numerictextbox {
  width: 100px; }

img.ui-datepicker-trigger {
  position: relative;
  top: 5px;
  left: -27px;
  margin-right: -20px;
  z-index: 100; }

#ui-datepicker-div {
  font-size: 70%; }

.hasDatepicker {
  position: relative;
  z-index: 90; }

.formErrorContent {
  line-height: 26px; }

/*----- JQuery UI edit -----*/
.ui-widget-overlay {
  background: #000;
  opacity: .3; }

.ui-widget button {
  font-family: Arial,"Microsoft JhengHei";
  font-size: 1em; }

.hidden.ui-dialog-content.ui-widget-content {
  display: block !important; }

.ui-dialog .ui-dialog-titlebar-close:before {
  position: relative;
  font-family: sysmgr;
  content: "n";
  top: -3px;
  left: -1px;
  color: #999; }

.formError {
  z-index: 90; }

.formError .formErrorContent {
  z-index: 90; }

.checkbox input[type=checkbox] {
  position: relative;
  margin: 0; }

/*------Bootstrap Switch------*/
.bootstrap-switch, .switch {
  outline: none; }

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
  padding: 6px 6px;
  font-size: 11px;
  min-width: 36px; }

.strongWord {
  position: relative;
  top: 5px;
  margin-right: 5px;
  /*2018.05.18 Evy Add*/ }

/*------Bootstrap [2018.05.18 Evy Add]------*/
.radio, .checkbox {
  margin: 5px 0 0 0;
  display: inline-block;
  vertical-align: top; }
  .radio label, .checkbox label {
    min-height: 0;
    padding-left: 0;
    margin-right: 10px; }
  .radio input[type=radio], .checkbox input[type=radio] {
    position: relative; }
  .radio input[type=checkbox], .checkbox input[type=checkbox] {
    margin-right: 3px; }
  .radio + .checkbox, .radio + .radio, .checkbox + .checkbox, .checkbox + .radio {
    margin-top: 5px; }

/*2018.07.03 Evy Add */
.radio label, .checkbox label {
  min-width: 40px; }

.tableArea table tbody tr:hover select, .tableArea table tbody tr:hover label {
  color: #333; }

.row .tableArea table tbody tr td:nth-child(2) {
  width: 40%; }

.row .tableArea tr td input[type="text"].money {
  width: 70px; }

.btn-danger:active, .btn-danger:visited {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a; }

.limmedList section {
  margin-bottom: 15px; }

.contentArea .detailGroup ul.addressList li {
  margin-left: 0; }
  .contentArea .detailGroup ul.addressList li:before {
    content: none; }
  .contentArea .detailGroup ul.addressList li input[type="text"] {
    width: 70%; }
  .contentArea .detailGroup ul.addressList li .icon-pin:before {
    position: relative;
    top: 6px;
    font-size: 20px;
    color: #457fce;
    margin: 0 5px; }

.contentArea .detailGroup button[type="button"].icon-add {
  background: none;
  border: none;
  color: #457fce;
  outline: none; }
  .contentArea .detailGroup button[type="button"].icon-add:before {
    position: relative;
    top: 8px;
    font-size: 26px; }

.contentArea .detailGroup ul.sortList {
  padding: 0;
  margin-top: 10px; }
  .contentArea .detailGroup ul.sortList button[type="button"] {
    background: none;
    border: none;
    color: #457fce;
    outline: none; }
    .contentArea .detailGroup ul.sortList button[type="button"]:before {
      position: relative;
      top: 8px;
      font-size: 22px; }
  .contentArea .detailGroup ul.sortList.cancel .icon-arrows {
    display: none; }
  .contentArea .detailGroup ul.sortList .addressContent {
    display: inline-block;
    line-height: 34px;
    padding: 0 50px 0 10px;
    width: 80%;
    background: #eaeaea;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
  .contentArea .detailGroup ul.sortList input[type="text"] {
    display: none;
    width: 80%;
    background: #eaeaea;
    border: 1px solid #fff; }
  .contentArea .detailGroup ul.sortList li {
    position: relative;
    padding-left: 40px;
    min-height: 40px;
    text-align: left; }
    .contentArea .detailGroup ul.sortList li .icon-pencil, .contentArea .detailGroup ul.sortList li .icon-close {
      position: absolute;
      width: 38px;
      height: 36px;
      line-height: 36px;
      display: inline-block;
      vertical-align: top;
      margin: 0;
      opacity: 0.8; }
      .contentArea .detailGroup ul.sortList li .icon-pencil:before, .contentArea .detailGroup ul.sortList li .icon-close:before {
        position: relative;
        top: 0;
        line-height: 36px;
        margin: 0; }
      .contentArea .detailGroup ul.sortList li .icon-pencil:hover, .contentArea .detailGroup ul.sortList li .icon-close:hover {
        opacity: 1;
        cursor: pointer; }
    .contentArea .detailGroup ul.sortList li .icon-pencil {
      margin-right: 40px;
      right: 0; }
    .contentArea .detailGroup ul.sortList li .icon-close {
      right: 0; }
    .contentArea .detailGroup ul.sortList li.edit input[type="text"] {
      display: inline-block;
      background: #fff;
      border: 1px solid #ccc;
      padding: 0 36px 0 10px;
      line-height: 34px; }
    .contentArea .detailGroup ul.sortList li.edit .addressContent {
      display: none; }
    .contentArea .detailGroup ul.sortList li.edit .icon-pencil {
      background: #457fce;
      margin: 2px 43px 2px 3px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      -webkit-border-radius: 16px;
      border-radius: 16px; }
      .contentArea .detailGroup ul.sortList li.edit .icon-pencil:before {
        color: #fff;
        line-height: 0;
        font-size: 20px;
        top: 4px; }
    .contentArea .detailGroup ul.sortList li.edit .icon-arrows {
      width: 36px; }
    .contentArea .detailGroup ul.sortList li .icon-arrows {
      position: absolute;
      z-index: 10;
      right: 19.5%;
      width: 80%;
      height: 36px;
      line-height: 36px;
      text-align: right; }
      .contentArea .detailGroup ul.sortList li .icon-arrows:before {
        color: #666;
        top: 4px; }
    .contentArea .detailGroup ul.sortList li:before {
      position: absolute;
      z-index: 5;
      top: 0;
      left: 0;
      text-align: center;
      content: "";
      background: #fff;
      color: #457fce;
      font-family: "Arial Black", Arial;
      font-weight: bold;
      display: block;
      width: 30px;
      height: 30px;
      line-height: 24px;
      -webkit-border-radius: 18px;
      border-radius: 18px;
      border: 3px solid #457fce; }
    .contentArea .detailGroup ul.sortList li:after {
      position: absolute;
      z-index: 3;
      left: -4.6px;
      top: 16px;
      font-size: 20px;
      color: #457fce;
      font-family: "sysmgr";
      width: 30px;
      height: 5px;
      text-align: center;
      content: "?";
      -moz-transform-origin: 0;
      -moz-transform: scaleX(1.3);
      -webkit-transform-origin: 0;
      -webkit-transform: scaleX(1.3);
      -o-transform-origin: 0;
      -o-transform: scaleX(1.3);
      -ms-transform-origin: 0;
      -ms-transform: scaleX(1.3);
      transform-origin: 0;
      transform: scaleX(1.3); }
    .contentArea .detailGroup ul.sortList li:nth-child(1):before {
      content: "1"; }
    .contentArea .detailGroup ul.sortList li:nth-child(2):before {
      content: "2"; }
    .contentArea .detailGroup ul.sortList li:nth-child(3):before {
      content: "3"; }
    .contentArea .detailGroup ul.sortList li:nth-child(4):before {
      content: "4"; }
    .contentArea .detailGroup ul.sortList li:nth-child(5):before {
      content: "5"; }
    .contentArea .detailGroup ul.sortList li:nth-child(6):before {
      content: "6"; }
    .contentArea .detailGroup ul.sortList li:nth-child(7):before {
      content: "7"; }
    .contentArea .detailGroup ul.sortList li:nth-child(8):before {
      content: "8"; }
    .contentArea .detailGroup ul.sortList li:nth-child(9):before {
      content: "9"; }
    .contentArea .detailGroup ul.sortList li:nth-child(10):before {
      content: "10"; }
    .contentArea .detailGroup ul.sortList li:nth-child(11):before {
      content: "11"; }
    .contentArea .detailGroup ul.sortList li:nth-child(12):before {
      content: "12"; }
    .contentArea .detailGroup ul.sortList li:nth-child(13):before {
      content: "13"; }
    .contentArea .detailGroup ul.sortList li:nth-child(14):before {
      content: "14"; }
    .contentArea .detailGroup ul.sortList li:nth-child(15):before {
      content: "15"; }
    .contentArea .detailGroup ul.sortList li:nth-child(16):before {
      content: "16"; }
    .contentArea .detailGroup ul.sortList li:nth-child(17):before {
      content: "17"; }
    .contentArea .detailGroup ul.sortList li:nth-child(18):before {
      content: "18"; }
    .contentArea .detailGroup ul.sortList li:nth-child(19):before {
      content: "19"; }
    .contentArea .detailGroup ul.sortList li:nth-child(20):before {
      content: "20"; }

@media all and (max-width: 680px) {
  .contentArea .detailGroup ul.addressList li input[type="text"] {
    width: 60%; }
  .contentArea .detailGroup ul.sortList li {
    margin-bottom: 10px; }
    .contentArea .detailGroup ul.sortList li input[type="text"] {
      border: none;
      padding-left: 40px;
      min-height: 40px;
      padding-right: 40px; }
    .contentArea .detailGroup ul.sortList li.edit input[type="text"] {
      padding: 0 0 0 50px; }
    .contentArea .detailGroup ul.sortList li .addressContent {
      padding: 5px 35px 5px 45px;
      min-height: 40px;
      line-height: 1.4em; }
    .contentArea .detailGroup ul.sortList li .icon-arrows {
      width: auto;
      height: 100%;
      right: 19.5%;
      left: 80px; }
      .contentArea .detailGroup ul.sortList li .icon-arrows:before {
        position: absolute;
        right: 3px;
        top: 50%;
        line-height: 0; }
    .contentArea .detailGroup ul.sortList li .icon-pencil {
      z-index: 15;
      left: 40px;
      right: auto;
      height: 100%;
      margin-right: 0;
      border-right: 1px solid #ccc; }
      .contentArea .detailGroup ul.sortList li .icon-pencil:before {
        position: absolute;
        top: 50%;
        left: 8px;
        line-height: 0;
        color: #666; }
    .contentArea .detailGroup ul.sortList li .icon-close {
      right: 0; }
    .contentArea .detailGroup ul.sortList li.edit input[type="text"] {
      position: relative;
      z-index: 14;
      padding-right: 0; }
    .contentArea .detailGroup ul.sortList li.edit .icon-pencil {
      margin: 4px 0 2px 4px; }
      .contentArea .detailGroup ul.sortList li.edit .icon-pencil:before {
        top: 16px;
        line-height: 0px; }
  .contentArea .detailGroup ul.sortList p {
    line-height: 1.4em;
    padding: 5px 0; } }


/*----------------------------------------------------------------------------------------------
|-> RWD
----------------------------------------------------------------------------------------------*/
@media (max-width: 991px) {
  .nav-md .container.body .col-md-3.left_col {
    display: none; }
  .nav-md .container.body .right_col {
    margin-left: 0; }
  .nav-sm .container.body .right_col {
    margin-left: 70px; }
  .nav-md .container.body .right_col, .nav-md .container.body .top_nav {
    width: 100%;
    margin: 0; }
  .nav-md .container.body .right_col {
    width: 100%;
    padding-right: 0; }
  .DTFC_RightHeadWrapper .table.dataTable .last.sorting {
    width: 38px;
    overflow: hidden; }
  .right_col {
    padding: 10px !important; }
  .form-group {
    padding-bottom: 15px; }
  .btn.btn-app {
    min-width: 50px; }
    .btn.btn-app span {
      font-size: 12px; }
  .functionBox {
    bottom: 0;
    text-align: center;
    background: #0f3143; }
    .functionBox .btn-group {
      position: relative;
      min-width: 0; }
      .functionBox .btn-group.group0 {
        width: 100%; }
      .functionBox .btn-group:first-child {
        float: left; }
    .functionBox .btn-group + .btn-group {
      margin-left: -4px; }
    .functionBox .btn-group.group0 > .btn:first-child {
      margin-left: -150px; }
    .functionBox .collapseBtn, .functionBox .phoneCollapse {
      position: absolute;
      left: 50%;
      margin-top: -44px;
      width: 300px;
      -webkit-border-radius: 5px 5px 0 0;
      border-radius: 5px 5px 0 0; }
    .functionBox .collapseBtn.btn.btn-app > .fa, .functionBox .phoneCollapse > .fa {
      display: inline-block; }
    .functionBox .collapseBtn.btn.btn-app span, .functionBox .phoneCollapse span {
      display: inline-block;
      margin-left: 10px; }
  .dateWord {
    display: block;
    margin: 0 10px 0 0; }
  .table .btn-group .btn,
  .table .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
  .table .btn-group > .btn:last-child:not(:first-child),
  .table .btn-group > .dropdown-toggle:not(:first-child),
  .table .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    -webkit-border-radius: 5px;
    border-radius: 5px; }
  .dataTables_info, .dataTables_length {
    width: 100%;
    text-align: left;
    margin: 0; }
  .dataTables_filter {
    float: none; }
  div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
    margin: 5px 0; }
  .btn-group + label {
    margin-top: 20px; }
  table.dataTable thead > tr > th:last-child.sorting {
    padding-right: 0; }
  table.dataTable thead > tr > th.last.sorting {
    padding-right: 0; } }

@media (max-width: 991px) {
  .contentArea .btnArea {
    right: 5px; } }

@media (max-width: 767px) {
  .contentArea .scrollable {
    font-size: 14px; }
  .contentArea .btnArea {
    position: relative;
    display: block;
    width: 100%;
    top: 0px;
    right: -10px;
    margin-bottom: 10px;
    text-align: right; }
    .contentArea .btnArea a {
      position: relative;
      width: 0px;
      height: 32px;
      line-height: 0;
      color: #f5912d;
      padding: 4px 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
      .contentArea .btnArea a:before {
        top: 0;
        line-height: 25px; }
      .contentArea .btnArea a span {
        width: 0; }
        .contentArea .btnArea a span.icon-plus {
          position: absolute;
          color: #FFF;
          top: 10px;
          left: 10px; }
      .contentArea .btnArea a:visited {
        color: #f5912d; }
      .contentArea .btnArea a.add {
        color: #f5912d; }
      .contentArea .btnArea a.delete {
        color: #ccc; }
      .contentArea .btnArea a.excel {
        color: #47a408; } }

@media (min-width: 480px) {
  .nav_menu {
    position: static; }
  .top_nav .navbar-right li {
    position: relative; } }

@media all and (max-width: 480px) {
  .contentArea {
    float: none;
    margin: 0 auto; }
    .contentArea .btnArea {
      top: 0; }
  .tableArea table.responsive td.main {
    min-width: 200px;
    /*2018.05.18 Evy Edit*/ } }