/**
 * ====================================================================================================
 * Layout
 * ====================================================================================================
 */
html {font-size:1em;}
body {display: block; font-family:Verdana,Arial,sans-serif; height:100%; margin:0; padding:0; min-width:975px; background-color:#efefef;}
.container {background:none repeat scroll 0 0; margin:0 auto; max-width:100%; min-height:100%; position:relative;}
.bodycontainer {margin:0 auto; min-width:975px; max-width:100%; min-height:300px;}
.fwidth {background-color:#efefef;}
.fwidth-block, .fwidth-block-white {min-width:975px; max-width:1200px; margin:0 auto; overflow:visible;}
.fwidth-block-white {background-color:#fff;}
.content {padding:5px 20px 20px 20px; min-height:500px;}


/**
 * ====================================================================================================
 * Common elements
 * ====================================================================================================
 */
h1 {font-size:1.6em;}
h2 {font-size:1.4em;}
h3 {font-size:1.2em;}


/**
 * ====================================================================================================
 * header & footer
 * ====================================================================================================
 */
.header {
  width:100%; height:72px;
  background:-webkit-linear-gradient(top,rgba(238,183,4,0.11),rgba(238,183,4,0.9));
  background:-moz-linear-gradient(top,rgba(238,183,4,0.11),rgba(238,183,4,0.9)); 
  background:-o-linear-gradient(top,rgba(238,183,4,0.11),rgba(238,183,4,0.9));
  background:linear-gradient(rgba(238,183,4,0.11),rgba(238,183,4,0.9));
}
.footer {margin:5px 0 20px 0; padding:10px 0; text-align:center; font-size:0.8em; background-color:#eaeaea; color:#7a7a7a;}
.logo {display:table-cell; padding-left:30px; height:72px; vertical-align:middle;}
.logo img {display:block; width:110px;}


/**
 * ====================================================================================================
 * Navigation and pop up menu
 * ====================================================================================================
 */
.nav {padding:2px 0 3px 0; background-color:#eaeaea;}
.nav-inner {background-color:#8d8d8d; padding-left:20px; color:#fff;}
.nav-inner .tb {display:table; box-sizing:border-box;}
.nav-inner .td {display:table-cell; width:135px; box-sizing:border-box; vertical-align:top; text-align:left;}
.nav-inner .menu {line-height:30px;}
.nav-inner .menu-btn span {padding:5px 8px; cursor:pointer;}
.nav-inner .menu-pop {position:relative; z-index:100; display:none;}
.nav-inner .menu-pop .inner {position:absolute; top:0px; left:0px; box-sizing:border-box; background-color:#8d8d8d; border-bottom-left-radius:3px; border-bottom-right-radius:3px; box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.nav-inner .menu-pop ul {list-style:none; padding:0; margin:0; color:#fff;}
.nav-inner .menu-pop ul li {padding:0 8px; line-height:30px;}
.nav-inner .menu-pop ul li:hover {background-color:rgba(0,0,0,0.1); cursor:pointer;}
.nav-inner .active {text-decoration:none; color:#fff;}
.nav-inner .inactive {color:rgba(255,255,255,0.5); cursor:default;}


/**
 * ====================================================================================================
 * Bloodhound Typeahead
 * ====================================================================================================
 */
.twitter-typeahead {width:100%!important;}
.tt-menu { /* Note: max-height:200px; overflow-y:auto; are for scrollable drop down menu. */
    width:100%; margin-top:5px; padding:0; text-align:left; background:#fff; max-height:200px; overflow:auto; white-space:nowrap; border:none;
    box-shadow:0 5px 10px rgba(0,0,0,.2); -webkit-box-shadow:0 5px 10px rgba(0,0,0,.2); -moz-box-shadow:0 5px 10px rgba(0,0,0,.2); -webkit-overflow-scrolling:touch}
.tt-suggestion {line-height:25px; padding-left:10px; font-size:13px; color:#000; cursor:pointer; /*border-bottom:1px solid #d2d2d2;*/}
.tt-suggestion:hover {background-color:rgba(200, 200, 200, 0.5);}
.tt-footer-message {color:#888; font-size:0.75em; font-style:italic;}

 
 /**
 * ====================================================================================================
 * Drop down list
 * ====================================================================================================
 */
 .dropdown-list {position:relative; display:inline-block;}
 .dropdown-list .inpt {display:table-cell;}
 .dropdown-list .vbtn2 {display:table-cell; color:#999; font-size:0.8em; cursor:pointer;}
 .dropdown-list .dd-list {position:absolute; top:100%; left:0px; z-index:100; display:none;}
 .dropdown-list .tt-menu {max-height:300px;}
 .dropdown-list .tt-suggestion {line-height:20px; padding-left:3px;}
 
 
/**
 * ====================================================================================================
 * Buttons
 * ====================================================================================================
 */
.btn, .btn4 a span {
    display:inline-block; background-color:#449f95; border:1px solid #449f95; border-radius:2px;
    text-align:center; color:#ffffff; cursor:pointer; /*box-shadow:rgba(85,85,85,0.4) 0 1px 2px 1px;*/}
.btn:hover, .btn4 a span:hover {background:#6bbcb1; border-color:#6bbcb1;}
.btn2 {
    display:inline-block; background-color:#ffffff; border:1px solid #acacae; border-radius:2px;
    text-align:center; color:#333; cursor:pointer;}
.btn2:hover, .btn3 a span:hover {color:#999;}
.btn3 a span {
    display:inline-block; background-color:#ffffff; border:1px solid #acacae; border-radius:5px;
    text-align:center; color:#333333; cursor:pointer;}
.btn80  {width: 80px; padding:4px 0;}
.btn100 {width:100px; padding:4px 0;}
.btn178 {width:178px; padding:3px 0;}
.btn180 {width:180px; padding:4px 0;}
.btn250 {width:250px; padding:4px 0;}
 
 
/**
 * ====================================================================================================
 * 1. Basic input & textarea
 * 2. Input box with label, icon, X button and V button
 * Set input box width 100%:    .ixv div {width:100%;},      .ixv {display:table-cell; width:100%;},                  .line {display:table; width:100%; padding-top:15px;}
 * Set input box width maximum: .ixv div {max-width:500px;}, .ixv {display:table-cell; width:100%;},                  .line {display:table; width:100%; padding-top:15px;}
 * Set input box width fixed:   .ixv div {},                 .ixv {display:table-cell; width:500px; min-width:500px}, .line {display:table; padding-top:15px;}
 * ====================================================================================================
 */
/* Basic input & textarea */
input, textarea {
    font:1em Verdana, Arial, sans-serif; color:#333333; border:1px solid #bababa; border-radius:3px; outline:none;
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.ipt, .ipt50, .ipt100, .ipt120, .ipt150, .ipt200, .ipt250, .ipt300, .ipt350, .ipt400, .ipt450, .ipt500, .iptful {height:32px;}
.ipt50  {width:50px;}
.ipt100 {width:100px;}
.ipt120 {width:120px;}
.ipt150 {width:150px;}
.ipt200 {width:200px;}
.ipt250 {width:250px;}
.ipt300 {width:300px;}
.ipt350 {width:350px;}
.ipt400 {width:400px;}
.ipt450 {width:450px;}
.ipt500 {width:500px;}
.iptful {width:100%;}
.txt500 {width:500px; height:100px;}

/* Label */
.lbl {display:table-cell; vertical-align:top;}
.lbl span {display:block; width:130px; padding:5px 5px 0 0; box-sizing:border-box; text-align:right;}

/* Wrap Icon, Input box, X button and V button */
.ixv {display:table-cell; width:100%;}
.ixv div {max-width:500px;}

/* Icon */
.ixv .icon {
    display:table-cell; vertical-align:top; width:18px;}
.ixv .icon span {
    background:url(../images/indexsprite-v5.6@1x.png) no-repeat center center transparent;
    background-position:-100px -150px; width:18px; height:18px; position:absolute; margin:7px 2px 0 12px; z-index:1000;}
 
/* Input box */
.ixv .inpt {
    display:table-cell; vertical-align:top; width:100%; padding:5px 0 5px 5px; background-color:#ffffff;
    border:1px solid #bababa; border-right:none; border-radius:3px 0 0 3px;}
.ixv .inpt input:focus {border:none;}
.ixv .inpt input {width:100%; height:20px; padding:0 4px 0 6px; margin:0; border:none;}
.ixv .inpt input::-ms-clear, .ixv .inpt input::-ms-reveal {display:none;}

/* X button */
.ixv .xbtn {
    display:table-cell; vertical-align:top; padding:6px 10px 0 7px; cursor:pointer;
    border:1px solid #bababa; border-left:none; border-radius:0 3px 3px 0;}
.ixv .xbtn span {display:none;}
.ixv .xbtn span svg {width:10px; height:10px; stroke:#529D97; stroke-width:2px;}

/* V button */
.ixv .vbtn {
    display:table-cell; vertical-align:top; padding:6px 6px 0 6px; cursor:pointer;
    border:1px solid #bababa; border-left:none; border-radius:0 3px 3px 0;}
.ixv .vbtn span {display:block;}
.ixv .vbtn span svg {width:20px; height:20px; stroke:#a7a7a7; stroke-width:12;}

/* If has icon, add tk class with inpt class */
.ixv .inpt.tk {padding:5px 0 5px 30px;}

/* If has X button, add tk class with xbtn class */
.ixv .xbtn.tk {border-radius:0;}

/* S button */
.sbtn {display:table-cell; vertical-align:top; padding:3px 0 0 10px;}


/**
 * ====================================================================================================
 * Invoice table
 * ====================================================================================================
 */
.inv-items {border-collapse:collapse; font-size:0.9em;}
.inv-items, .inv-items td {border:1px solid #00a2c8;}
.inv-items th, .inv-items td {padding:5px;}
.inv-items th {background-color:#00a2c8; border:1px solid #00a2c8; color:#fff; text-align:left; font-weight:normal;}
.inv-items input, .inv-items select {border:none; padding:0; width:100%;}
.inv-items input.taxamt, .inv-items input.amount {background-color:#fff;}
.inv-items select {border:0px; outline:0px;}
.inv-items th.left-menu {padding:0;}
.inv-items td.left-menu {padding:0; background-color:#e7e7e7;}


/**
 * ====================================================================================================
 * table td width
 * ====================================================================================================
 */
.td6   {width:6px;}
.td30  {width:30px;}
.td40  {width:40px;}
.td50  {width:50px;}
.td80  {width:80px;}
.td100 {width:100px;}
.td120 {width:120px;}
.td150 {width:150px;}
.td200 {width:200px;}
.td250 {width:250px;}
.td300 {width:300px;}
.td350 {width:350px;}
.td400 {width:400px;}
.td450 {width:450px;}
.td500 {width:500px;}
.td550 {width:550px;}


/**
 * ====================================================================================================
 * pagination
 * ====================================================================================================
 */
.invoice-pagination {}
.pagination {padding-top:20px;}
.pagination a {padding:6px; background:#ffffff; border:1px solid #449f95; border-radius:3px; color:#333333; text-decoration:none; font-size:14px;}
.pagination a:hover:not(.active) {background:#6bbcb1; border-color:#6bbcb1;}
.pagination a.active {background:#449f95; color:#ffffff; cursor:default;}
 
 
/**
 * ====================================================================================================
 * Others
 * ====================================================================================================
 */
.pad010 {padding:0 10px;}
.pad510 {padding:5px 10px;}
.login {width:360px; margin:0 auto; padding:100px 0 400px 0;}
.line {display:table; width:100%; padding-top:15px;}
.txtleft   {text-align:left;}
.txtcenter {text-align:center;}
.txtright  {text-align:right;}
.invoice-button {clear:both; padding:4px 4px 20px 4px;}
.invoice-button div {margin-bottom:10px;}
.progress {vertical-align:middle; margin-left:20px; display:none;}
.msg-save {margin-left:20px; display:none;}


/**
 * ====================================================================================================
 * invoice-view style
 * ====================================================================================================
 */
.print .head-l, .print .head-m, .print .head-r,
.print .client-l, .print .client-r,
.print .pon, .print .pon1, .print .pon2,
.print .client-lbl, .print .client-info {
    display:table-cell;
 }
.print {width:800px; margin:0 auto; padding:20px 0; font-family:Arial; font-size:12px;}
.print .title {font-size:24px; font-weight:bold;}
.print .title-note {font-size:12px;}
.print .head-l {width:200px;}
.print .head-m {width:400px; text-align:center;}
.print .head-r {width:200px; text-align:right;}
.print .client   {padding:20px 0 0 0;}
.print .client-l, .print .client-r {width:400px;}
.print .pon  {width:240px;}
.print .pon1, .print .pon2 {border:1px solid #333333; box-sizing:border-box; border-bottom:none; text-align:center;}
.print .pon1 {width:60px; border-right:none;}
.print .pon2 {width:100px;}
.print .block1 {width:100%;}
.print .block2 {width:100%; border:1px solid #333333; box-sizing:border-box; clear:both;}
.print .row {line-height:20px;}
.print .client-l .client-lbl {width:120px;}
.print .client-r .client-lbl {width:100px;}
.print .rowpad {padding:2px 5px;}
.print .block2 .rowpad {text-align:right;}

.print .items {padding-top:20px;}
.print .items-tbl {border-collapse:collapse; border-spacing:0; border:1px solid #000000;}
.print tr {height:24px;}
.print th {border:1px solid #000000; height:28px;}
.print td {border-left:1px solid #000000; border-right:1px solid #000000;}
.print th, .print td {padding:0 5px;}

.print .total-tbl {border-collapse:collapse; border-spacing:0;}
.print .total-tbl tr {height:32px;}
.print .total-tbl td {padding:0 8px;}
.print .total-tbl .col2 {border-right:none;}
.print .total-tbl .col3 {border-left:none;}
.print .total-tbl .col2, .print .total-tbl .col3 {border-bottom:1px solid #000000;}
.print .sign, .print .sign2 {display:table-cell;}
.print .sign {width:160px; padding-right:5px; text-align:right;}
.print .sign2 {width:200px; border-bottom:1px solid #000000;}
.page-break {padding-top:30px;}

/**
 * ====================================================================================================
 * Style for print
 * ====================================================================================================
 */
@media print {
	.header, .footer, .fwidth-block, .noprint {display:none;}
    body, .container, .bodycontainer, .fwidth, .fwidth-block-white, .content {width:800px; min-width:800px; margin:0; padding:0;}
    .page-break {page-break-before:always;}
    .print tr {height:22px;}
}