/*
POStw index default.css
*/
#postw_layout {
  position: relative;
  padding-left: 250px;
/*  padding-bottom: 1em;
  left: 0;
*/}
#postw_layout #postw_menu {
  display: block;
  width: 250px;
}
#postw_layout #postw_menuLink {
  padding: 0.3em;
  position: fixed;
  z-index: 120;
  left: 250px;
}
#postw_layout .header {
  left: 250px;
  background: #fff;
  top: 0;
  padding: 0 2.5em;
  position: fixed;
  width: 90%;
  height: 2.8em;
  z-index: 100;
  border-bottom: 1px solid #eee;
}

#postw_layout .postw-title-display {
  background: #fff no-repeat;
  width: 98%;
  height: 2.8em;
  z-index: 110;
}

#postw_layout.active {
  padding-left: 0;
  left: 0;
}
#postw_layout.active #postw_menu {
  display: none;
}
#postw_layout.active #postw_menuLink {
  left: 0;
}
#postw_layout.active .header {
  left: 0;
}

#postw_main {
  padding-top: 2em;
}

#sectionFunctionTitle {
  text-align: center;
}

#divSearch a {
  padding-left: 0.5em;
}

#divSearch img {
  height: 1.8em;
  /*padding: 0.5em;*/
}

#query_SearchSummary {
  font-size: 1.3em;
}

#query_SearchSummary span {
  padding: 0 0.2em;
  margin: 0 0.5em;
  border: 3px gray solid;
}

/*
The content `<div>` is where all your content goes.
*/
.content {
  text-align: left;
  padding: 0.5em;
  overflow: auto;
  /*border-bottom: 1px solid #eee;*/
}

.content h1 {
  font-weight: 500;
  font-size: 2.5em;
  margin: 0.2em 0;
  color: #0e86d4;
}

.content h2 {
  /*margin: 0.5em;*/
  color: #0e86d4;
}
.content h2.msgError {
  color: #f85c70;
  font-weight: 500;
}

.content p.msgError {
  color: #f85c70;
  font-weight: 400;
}
.content p {
  font-size: 1.1em;
  font-weight: 300;
}

.content-header {
  margin: 0;
  color: #0e86d4;
  text-align: center;
  padding: 0 2em;
  border-bottom: 1px solid #eee;
}
.content-header h1 {
  font-weight: 500;
  font-size: 2.5em;
  margin: 0.2em 0 0.5em 0;
}
.content-header h2 {
  font-weight: 300;
  font-size: 2em;
  padding: 0;
  margin-top: 0;
}

/*.content-form {
  text-align: left;
  border: none;
}
*/
.postw-field-message-detail {
  font-size: 16px;
}

.postw-field-message,
.postw-field-message-default {
  margin-left: 0.5em;
}

/*
The `#postw_menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

input:invalid {
  border: none;
  outline: 2px solid red;
}

.pure-u input.postw-autosize,
.pure-u-1 input.postw-autosize,
.inputContentShow {
  width: 30em;
}

#postw_menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background: #fff;
  overflow-y: auto;
  /*-webkit-overflow-scrolling: touch;*/
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
/*
    All anchors inside the menu should be styled like this.
    */
#postw_menu a {
  color: #999;
  font-weight: 300;
  padding: 0.6em 0 0.6em 0.6em;
}

#postw_menu .postw_menu_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
}

#postw_menu .pure-menu,
#postw_menu .pure-menu ul {
/*  border: none;
  background: transparent;
*/}

#postw_menu .pure-menu ul + a {
  border-top: solid 1px #eee;
}

#postw_menu .pure-menu li a:hover,
#postw_menu .pure-menu li a:focus,
#postw_menu .pure-menu-selected a {
  background-color: #eee;
}

/* This styles the menu heading. */
#postw_menu .pure-menu-heading {
  font-size: 1.1em;
  color: #fff;
  font-weight: 300;
  background: #0e86d4;
  margin: 0;
}

#postw_menu .pure-menu-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* This styles the POStw group. */
.POStw-group {
    position: relative;
    border: solid 1px;
    padding: 0.5em;
    margin-bottom: 0.5em;
    float: left;
    letter-spacing: normal;
}

.POStw-group-list {
    position: relative;
    border: dotted 2px;
    margin: 0.2em;
    float: left;
    width: 210px;
    height: 200px;
}

.POStw-group-list:hover {
    border: double 2px;
}

.POStw-group-list img.imageBox {
    position: absolute;
    bottom: 0;
    width: 210px;
    height: 150px;
}

.POStw-group-list img.iconTopLeft {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #000000;
    background-color: #ffffff;
    padding: 1px;
}

p.postw-input-hint {
  font-size: 1em;
  font-weight: 200;
  margin: 2px 0 0 0;
}

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

.postw-overlay {
  position: fixed;
  border: 1px solid #000000;
  padding-left: 0.5em;
  background: rgba(255,255,255);
  z-index: 120;
  overflow:auto;
}

.postw-overlay .pure-table {
  width: 98%;
}

.postw-overlay .pure-table tr.highlight {
  background-color: #daf3f7 ;
}

.postw-overlay .pure-table td, .postw-overlay .pure-table th {
  padding: .5em .8em;
}

img.postw-icon-cancle {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #000000;
    background-color: #ffffff;
}

a.pure-menu-link {
  color: #0e86d4;
}

/* ---- Other ---- */

.FormMsgMsg {
  color: #055c9d;
}
.FormMsgMsgB {
  color: #055c9d;
  font-weight: bold;
  font-size: 1.1em;
}
.FormMsgWar {
  color: Gold;
}
.FormMsgWarB {
  color: Gold;
  font-size: 1.1em;
}
.FormMsgErr {
  color: #f85c70;
  font-weight: bold;
}
.bgFormMsgMsg,
td.bgFormMsgMsg,
tr.bgFormMsgMsg {
  background-color: #055c9d;
}
.bgFormMsgWar,
td.bgFormMsgWar,
tr.bgFormMsgWar {
  background-color: yellow;
}
.bgFormMsgErr,
td.bgFormMsgErr,
tr.bgFormMsgErr {
  background-color: #f85c70;
}

.borderDataRow {
  border: thick double lightgray;
}

.dataRowDescription {
  width: 100%;
  height: 3em;
  overflow: auto;
}

.numberOperationButtons {
  float: left;
  -webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
  -moz-appearance: none;     /* FireFox */
  appearance: none;
}
input[type=text].numberOperationButtons, input[type=number].numberOperationButtons {
  padding: 0.1em;
  width: 3em;
}
input[type=button].numberOperationButtons {
  margin: 0 0.3em;
  width: 2.5em;
}
span.numberOperationButtons {
  margin-top: 0.1em;
}

td.textRight {
  text-align: right;
}

.bgLevel0 {
  background-color: #ffffff;
}
table.bgLevel0 {
  width: 98%;
  border-top: thick groove #32a1ce;
  margin: 0 0 5px 5px;
}
table.bgLevel0 th {
  width: 30%;
  text-align: right;
}

.bgLevel1 {
  background-color: #e6ecfe;
}
table.bgLevel1 {
  width: 98%;
  border-top: thick double #32a1ce;
  margin: 0 0 5px 5px;
}
table.bgLevel1 th {
  width: 30%;
  text-align: right;
}

.bgLevel2 {
  background-color: #cddafe;
}
table.bgLevel2 {
  width: 98%;
  border-top: medium solid #32a1ce;
  margin: 0 0 5px 5px;
}
table.bgLevel2 th {
  width: 30%;
  text-align: right;
}

.bgLevel3 {
  background-color: #b5c8fe;
}
table.bgLevel3 {
  width: 98%;
  border-top: thin solid #32a1ce;
  margin: 0 0 5px 5px;
}
table.bgLevel3 th {
  width: 30%;
  text-align: right;
}

.bgLevel4 {
  background-color: #9cb6fe;
}
table.bgLevel4 {
  width: 98%;
  border-top: thin solid #32a1ce;
  margin: 0 0 5px 5px;
}
table.bgLevel4 th {
  width: 30%;
  text-align: right;
}

.bgLevel5 {
  background-color: #84a4fe;
}
table.bgLevel5 {
  width: 98%;
  border-top: thin solid #32a1ce;
  margin: 0 0 5px 5px;
}
table.bgLevel5 th {
  width: 30%;
  text-align: right;
}

.pure-form .pure-u,
.pure-form .pure-u-1 {
  width: 400px;
  padding: 0.2em
}

.pure-form .pure-u-1 {
  width: 100%;
}
.pure-form .pure-u-1 .pure-table,
.pure-form .pure-u-1 .pure-table td,
.pure-form .pure-u-1 .pure-table th {
  border: 0 none;
}

.pure-form .pure-u-1 .pure-table th {
  text-align: right;
}

.pure-form .pure-u-1 th,
.pure-form .pure-u th {
  width: 5em;
}

.pure-form .pure-u .pure-table {
  width: 100%;
}

.pure-form .pure-u input[type='radio'] {
  margin-top: -5px;
  margin: -5px 5px 0 5px;
}
.pure-form .pure-u input[type='checkbox'] {
  margin-top: -5px;
}

.pure-form .pure-control-group .pure-u {
  margin-left: 42%;
}

.pure-form .pure-control-group label + .pure-u {
  margin-left: 0;
}

.pure-form .pure-control-group {
  padding: 0.5em;
  display: flex;
  align-items: flex-start;
}

.pure-form .pure-control-group label {
  display: inline-block;
  width: 40%;
  color: #777;
  margin: 0 1em 0 0;
  padding: 0;
  font-weight: bold;
}

.pure-form .pure-control-group .pure-u {
  display: inline-block;
  height: 100%;
}

.pure-form input:focus:invalid,
.pure-form textarea:focus:invalid,
.pure-form select:focus:invalid {
  color: #777;
  border: solid 1px #0e86d4;
}

/* 錯誤訊息樣式 */
.pure-form .postw-field-message {
  color: #f85c70;
  letter-spacing: 0.5px;
  font-size: 16px;
}

.pure-button-group .pure-button {
  margin: 0.1em;
}

/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
  .content {
    padding-left: 0.5em;
  }
  .content h1 {
    padding-left: 0;
  }
}

@media (max-width: 48em) {
  #postw_layout.active {
    padding-left: 250px;
    left: 0;
  }
  #postw_layout.active #postw_menu {
    display: block;
    width: 250px;
  }
  #postw_layout.active #postw_menuLink {
    left: 250px;
  }
  #postw_layout.active .header {
    left: 250px;
  }

  #postw_layout {
    padding-left: 0;
    /*left: 0;*/
  }
  #postw_layout #postw_menu {
    display: none;
  }
  #postw_layout #postw_menuLink {
    left: 0;
  }
  #postw_layout .header {
    left: 0;
  }

  .postw-field-message-detail {
    margin-left: 0em;
    width: 100%;
  }

  .pure-u input.postw-autosize,
  .pure-u-1 input.postw-autosize,
  .inputContentShow {
    width: 12em;
  }

  /*.content-form {
    padding: 0.5em;
  }
  */.pure-form .pure-control-group {
    flex-flow: column nowrap;
  }
  .pure-form .pure-u {
    width: 98%;
  }

  .pure-form .pure-control-group label {
    width: 100%;
    margin-bottom: 0.2em;
    text-align: left;
  }

  .pure-form .pure-control-group .pure-u {
    margin-left: 0%;
  }

  .pure-table td, .pure-table th {
    padding: .5em .8em;
  }

  .postw-overlay {
    width: 98%;
  }

  .dataRowDescription {
    height: auto;
  }
}