/*!
* e-invoice CSS
*
*/

/* ---- .bot ---- */
ul {
    display: block;
    list-style-type: none
}


/* ---- .login ---- */


.modal-header {
    background-color: #5bc0de;
    text-align : center;
    color: #fff;
}

.shadow {
    box-shadow : 2px 2px 1px #aaaaaa;
}

.dcd-grp {
    padding-right: 5px;
    text-align : right;
}

.right-spacing{
    margin-right: 2px;
}

.lead {
    margin-top: 6px;
}

/*#notify input.readonly {
    width: 60px
}*/

.text-alert {
    color:  #D14;
}

/* ---- .pages ---- */
.page-wrapper {
    width : 95%;
    margin:  80px 0 0 2.5%;
}

.page-wrapper h3 {
    font-size:20px;
}

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

.navbar-default a {
    color: #ffffff;
}

.navbar-default a:hover, .navbar-default a:focus{
    color: #777;
}

.navbar-main-brand {
    background-color: #31b0d5

}
.navbar-default .navbar-main-brand:hover {
    background-color: #31b0d5
}

@media(max-width:767px) {
   .page-wrapper {
        width : 95%;
        margin:  160px 0 0 2.5%;
    }

   .navbar-main-brand {
         width: 100%;
    }
}


/* ---- common component ---- */

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.mandatory::before{
    content: "*";
    color:red;
}

.inc-tax::after{
    content: "(含稅)";
}

.exc-tax::after{
    content: "(未含稅)";
}

.btn-blck{
    color : #ffffff;
    font-size : 1.2em;
    margin : 5px 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-shadow : 2px 2px 1px #aaaaaa;
    padding: 3px;
}

.btn-blck:active,
.btn-blck.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

@media(max-width:767px) {
    .btn-blck{
        font-size : 1.2em;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
    }
}

.page-wrapper h3.text-pos{
    font-size:36px;
}

.page-pos {
    font-size:36px;
}

.text-pos {
    font-size:36px;
}

.btn-pos {
    min-height:50px;
    font-size:36px;
}

 

.btn-1 {
background-color : #5bc0de;
color:#fff;
}

.btn-2 {
    background-color : #34c6c8;
    color:#fff;
}

.btn-3 {
    background-color : #f39c9c;
    color:#fff;
}

.btn-4 {
    background-color : #f4ce74;
    color:#fff;
    }

.btn-1:active , .btn-1:hover {
    background-color : #31b0d6;
    color:#fff;
}

.btn-2:active , .btn-2:hover{
    background-color : #2fb2b4;
    color:#fff;
}

.btn-3:active , .btn-3:hover {
    background-color : #f08585;
    color:#fff;
}

.btn-4:active , .btn-4:hover{
    background-color : #eeb52d;
    color:#fff;
}

.btn-1:visited, .btn-1:focus {
    color:#fff;
}
.btn-2:visited, .btn-2:focus {
    color:#fff;
}
.btn-3:visited, .btn-3:focus {
    color:#fff;
}
.btn-4:visited, .btn-4:focus {
    color:#fff;
}

.panel-1 {
    border-color: #ddd;
}

.panel-1 > .panel-heading {
    color: #fff;
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.panel-1 > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #5bc0de;
}

.panel-1 > .panel-heading .badge {
    color: #fcf8e3;
    background-color: #5bc0de;
}

.panel-1 > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #5bc0de;
}

.panel-2 {
    border-color: #ddd;
}

.panel-2 > .panel-heading {
    color: #fff;
    background-color: #34c6c8;
    border-color: #34c6c8;
}

.panel-2 > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #34c6c8;
}

.panel-2 > .panel-heading .badge {
    color: #fcf8e3;
    background-color: #34c6c8;
}

.panel-2 > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #34c6c8;
}

.panel-3 {
    border-color: #ddd;
}

.panel-3 > .panel-heading {
    color: #fff;
    background-color: #f39c9c;
    border-color: #f39c9c;
}

.panel-3 > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #f39c9c;
}

.panel-3 > .panel-heading .badge {
    color: #fcf8e3;
    background-color: #f39c9c;
}

.panel-3 > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #f39c9c;
}

.panel-4 {
    border-color: #ddd;
}

.panel-4 > .panel-heading {
    color: #fff;
    background-color: #f4ce74;
    border-color: #f4ce74;
}

.panel-4 > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #f4ce74;
}

.panel-4 > .panel-heading .badge {
    color: #fcf8e3;
    background-color: #f4ce74;
}

.panel-4 > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #f4ce74;
}

a>.panel-title{
	color:#fff;
}

.icon-image{
    margin-left:-5%;
    width: 40px;
    height:40px;
}
/* ---- table style---- */

.bot-table>tbody>tr>td{
    text-align:left
}



.table>thead>tr {
    background-color: #5bc0de;
    color:#fff;
}

.span-header > th {
    background-color: #6aceeb;
    border: 1px solid #eee;
}

.table>tbody>tr:nth-child(even) {
    background-color: #F4FCFF;
}

.table>tbody>tr:nth-child(odd) {
    background-color: #FFF;
}

.panel-body .span-header>th{
      background-color: #ddd;
      border:1px solid #ccc;
}

.panel-body thead>tr {
    background-color: #eee;
    color:#000;
}

.panel-body .table-sub> thead>tr {
    background-color: #fff;
    color:#000;
}

.panel-body tbody>tr:nth-child(even) {
    background-color: #fff
}

.panel-body tbody>tr:nth-child(odd) {
    background-color: #fff
}

.batch-tool-bar {
    padding:5px;
    margin:5px;
    background-color:#eee
}

@media(max-width:767px) {
     .panel-body{
          padding:8px;
     }

    .table>thead>tr {
        display: none;
      }

      .panel-body tbody>tr:nth-child(odd) {
        background-color: #fff
     }

     .panel-body tbody>tr:nth-child(even) {
          background-color: #eee;
      }

     .table>tbody>tr>td:before {
          content: attr(data-th) " : ";
          font-weight: bold;
　      display: inline-block;
      }

     .table> tbody>tr>td {
        display: block;
      }

}
/* ---- invoice style---- */

 h4{
    font-weight: bold;
}

 .remark{
    font-weight: normal;
    color:#bbb;
}

 .panel{
    margin-top:1%;
}

 .form-group>p{
    font-weight: normal;
}

input.readonly {
    border-width: 0;
    border: none;
    background-color: transparent;
    width:80%
}

input.readonly[disabled] {
     background-color: transparent;
}

input[disabled], textarea[disabled]{
   -webkit-text-fill-color: rgba(0, 0, 0, 1); 
   -webkit-opacity: 1;
   -webkit-opacity: 1; 
   color: rgba(0, 0, 0, 1); 
}

 .form-control-invoice {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: transparent;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

@media(max-width:767px) {
     td .form-control-invoice {
         width: 70%;
       }

     input.readonly {
        width:60%
    }

     #CustomsClearance span {
         display: inline-block
    }
}


 .form-control-invoice[disabled]{
    border: 0px;
    text-align:center;
  }

 .numbering {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #5bc0de;
    border-radius: 14px;
    font-family: Arial;
}

.invBox {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding:10px;
    margin:10px 0;
}

.form-control-invoice-inline.readonly {
    width:10%
}

.form-control-invoice-inline {
    font-size: 14px;
    height: 30px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-control-invoice-time {
    width: 30%;
    font-size: 14px;
    height: 30px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.catg{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    color:#fff;
}

.ship-invoice .catg{
    background-color:  #f39c9c;
}

.order-invoice .catg{
    background-color:  #5bc0de;
}

#CustomsClearance{
	padding-left: 10px;
}

.btn-tbl{
    color:#fff;
    border: 0px solid #ccc;
    border-radius: 4px;
    width: 19px;
    height: 19px;
    background-color: #5bc0de;
    padding:0px;
}

.btn-tbl[disabled]{
    background-color:#ddd;
}

input[type="checkbox"] {
    display:inline-block;
    width:19px;
    height:19px;
   margin:0;
   vertical-align: text-bottom;
}

/* ---- autocomplete style---- */
.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.ui-autocomplete > li {
     padding: 3px 20px;
}

.ui-autocomplete > li.ui-state-focus {
    background-color: #DDD;
}

.ui-helper-hidden-accessible {
     display: none;
}

/* ---- allowance style---- */
.allowance-dialog {
    width:80%
}

/* --- print ---*/
.page-print	{ 
    display: none; 
}

/* --- pos ---*/
.big { 
/* 設定整個九宮格寬度大小 */ 
    width: 95%; 
    padding-left: 5%
}

.small {
    display: inline;
    float: left;
    width: 30%;
    height: 100%;
    padding: 1%;
}

/**POS**/

 .form-control-invoice-pos {
    width: 100%;
    height: 50px;
    padding: 6px 12px;
    font-size: 36px;
    line-height: 1.42857143;
    color: #555;
    background-color: transparent;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}