@charset "utf-8";
@import url("mo.css");
@import url("ta.css");
@import url("de.css");
html {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(169,169,169,0.4);
}
*{margin:0px; padding:0px;}
body {
    font-family: Tahoma, Verdana, Arial;
    font-size:11px;
    color:#000;
    background: #ECECEC url(../layout/bgbody.jpg) repeat-x 0% 0%;
}
table {
    min-width: 100%;
}
a, a:visited {
    color:#005FA3;
    text-decoration:none;
}
a:hover {
    color:#005FA3;
    text-decoration:underline;
}
a img { border: none; }
label { cursor: pointer; }
fieldset {
    padding: 6px;
    border: 1px solid #CCCCCC;
    margin-bottom: 10px;
}
legend {
    padding: 6px;
    font-size: 1.2em;
    font-weight: bold;
    color: #666666;

}
/*---------------------------------------------------------------------*/
#content-wrapper {
    width: 95%;
    margin:0 auto;
}
.content-wrapper:before {
    content: ' ';
    clear: both
}
.content-wrapper {
    padding: 10px
}
.content-wrapper:after {
    content: ' ';
    clear: both
}
#header {
    padding: 0.6em;
    overflow:hidden;
}
#header .logoicon {
    float:left;
    padding-right: 15px;
}
#header .homelink {
    font-weight: bold;
    font-size: 26px;
    padding-right: 10px;
}

#menubar {
    width: 100%;
}
#menubar:after {
    content: '';
    clear: both;
    display: block;
}
ul.systemMenu, ul.systemMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    /*text-align: right;*/
}

ul.systemMenu li {
    display: block;
    padding: 10px;
    color: #333;
    position: relative;
}
ul.systemMenu li.first {
    float: left;
}
ul.systemMenu li.last {
    float: right;
}
ul.systemMenu li a, ul.systemMenu li a:visited {
    text-decoration:none;
}
ul.systemMenu li a:hover {
    text-decoration: none;
}
ul.systemMenu li span {
    font-weight: bold;
    color: #930
}
ul.systemMenu li li {
    display: block;
    padding: 5px 0;
    text-align: right;
    border-bottom: 1px solid #CCCCCC;
    width: 100%;
}
ul.systemMenu li li:hover {
    background: #05386D
}
ul.systemMenu li li a {
    display: block;
    padding: 5px 10px;
    font-weight: bold;
    color: #333333;
}
ul.systemMenu li li a:hover, ul.systemMenu li li:hover a {
    color: #FFFFFF;
    text-decoration: none;
}
ul.systemMenu li ul {
    border: 1px solid #CCCCCC;
    display: none;
    top: 33px;
    right: 0;
    position: absolute;
    z-index: 2;
    background: #f3f3f3;
    padding-top: 0px;
}
ul.systemMenu li:hover ul {
    display: block;
}
ul.systemMenu li ul#list_notice {
    border: none;
}
ul.systemMenu ul span {
    color: #666666;
}
ul.systemMenu li li a:hover span, ul.systemMenu li li:hover a span {
    color: white;
}
/*--------- Notification ------------*/
.notice-title {
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #0000FF;
}
.notice-content {
    padding: 15px 0;
    line-height: 180%;
}
.notice-confirm {
    color: #FF0000;
}
.notice-author {
    font-style: italic;
    font-weight: bold;
}

/*--------- Login ------------*/
.login {
    width: fit-content;
    position: relative;
    margin: 0 auto;
    background: white;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5),
      0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  .login h1 {
    font-size: 24px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #05386D;
    text-shadow: none;
    text-transform: uppercase;
    text-align: center;
    margin: 20px 0;
  }
  
  .login-container {
    background: #dedef1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: fit-content;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    position: relative;
    z-index: 2;
    padding: 20px;
  }
  
  .login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-form-input {
    margin: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .login .error-box {
    color: #ff0000;
  }
  .login input[type="text"],
  .login input[type="password"] {
    width: 278px;
  }
  .login p.remember_me label {
    font-size: 12px;
    color: #666666;
    font-weight: 600;
  }
  .login p.remember_me input {
    position: relative;
    bottom: 1px;
    margin-right: 4px;
    vertical-align: middle;
  }
  .login p.submit {
    text-align: right;
  }
  
  .login-help {
    margin: 20px 0;
    font-size: 11px;
    color: #666666;
    text-align: center;
    /*text-shadow: 0 1px #2a85a1;*/
  }
  .login-help a {
    /*color: #cce7fa;*/
    color: #666666;
    text-decoration: none;
  }
  .login-help a:hover {
    text-decoration: underline;
  }
  .login input {
    font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
    font-size: 14px;
  }
  
  .login input[type="text"],
  .login input[type="password"] {
    margin: 5px;
    padding: 0 10px;
    /*width: 200px;*/
    height: 34px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #05386D;
    outline: none;
    border-radius: 5px;
    color: #000 ;
  }
  .login input[type="text"]:focus,
  .login input[type="password"]:focus {
  
    outline-offset: 0;
  }
  
  .login input[type="submit"] {
    padding: 0 18px;
    height: 29px;
    font-size: 12px;
    font-weight: bold;
    background: #05386D;
    color: #ffffff;
    border-radius: 5px;
    border: none;
  }
  .login input[type="submit"]:active {
    background: #cde5ef;
    border-color: #9eb9c2 #b3c0c8 #b4ccce;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  }
/*--------- MainMenu ------------*/
.jqueryslidemenu {
    background: none repeat scroll 0 0 #414141;
    width: 100%;
}
.jqueryslidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.jqueryslidemenu ul li {
    list-style-type: none;
    margin: 0 2px 0 0;
    padding: 0;
    position: relative;
    /*z-index: 5;*/
}
.jqueryslidemenu li a.TopMenuItem {
    height: 28px;
}
.jqueryslidemenu li a {
    color: #000000;
    display: block;
    font-weight: normal;
    outline: medium none;
    text-decoration: none;
}
.jqueryslidemenu li {
    background: url("../layout/menu_admin.gif") repeat-x scroll 0 -28px transparent;
}
.jqueryslidemenu li:hover {
    background-position: 0 -112px;
}
.jqueryslidemenu li a .CornerLeft {
    background: url("../layout/menu_admin.gif") no-repeat scroll 0 0 transparent;
    display: block;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 12px;
}
.jqueryslidemenu li:hover .CornerLeft {
    background-position: 0 -84px;
}
.jqueryslidemenu li a .MenuText {
    background-position: 0 8px;
    background-repeat: no-repeat;
    color: #000000;
    display: block;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    height: 28px;
    line-height: 28px;
    margin-left: 12px;
    margin-right: 12px;
    padding-left: 22px;
    padding-right: 14px;
}
.jqueryslidemenu li:hover .MenuText {
    color: #FFFFFF;
}
.jqueryslidemenu li a .CornerRight {
    background: url("../layout/menu_admin.gif") no-repeat scroll 0 -56px transparent;
    display: block;
    height: 28px;
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
}
.jqueryslidemenu li:hover .CornerRight {
    background-position: 0 -140px;
}
.jqueryslidemenu li a .Arrow {
    background: url("../layout/down.gif") no-repeat scroll 0 0 transparent;
    height: 4px;
    position: absolute;
    right: 0;
    top: 13px;
    width: 20px;
}
.jqueryslidemenu li:hover .Arrow {
    background: url("../layout/on_down.gif") no-repeat scroll 0 0 transparent;
}
.jqueryslidemenu .MenuImageIcon {
    background-repeat: no-repeat;
    display: block;
    height: 16px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 16px;
}
* html .jqueryslidemenu ul li a {
    display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
    color: #464646;
}
.jqueryslidemenu ul li a:hover {
    color: #005FB1;
}
.jqueryslidemenu ul li ul {
    display: block;
    left: 0;
    position: absolute;
    visibility: hidden;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.jqueryslidemenu ul li ul li a {
    padding: 6px 10px;
}
.jqueryslidemenu ul li ul li {
    background: none repeat scroll 0 0 #FFFFFF;
    border-right: 1px solid #C5C5BD;
    border-bottom: 1px solid #C5C5BD;
    border-left: 1px solid #C5C5BD;
    float: none;
    margin: 0;
}
.jqueryslidemenu ul li ul li:first-child {
    /*border-top: 1px solid #C5C5BD;*/
}
/*.jqueryslidemenu ul li ul li ul {
    top: 0;
    position: absolute
}*/
.jqueryslidemenu ul li ul li a {
    background-image: none;
    border-top-width: 0;
    font-weight: normal;
    margin: 0;
    /*width: 184px;*/
}
.jqueryslidemenu ul li ul li a span {
    text-decoration: none;
}
.jqueryslidemenu ul li ul li:hover {
    background: none repeat scroll 0 0 #05386D;
    border-right: 1px solid #05386D;
    border-bottom: 1px solid #05386D;
    border-left: 1px solid #05386D;
}
.jqueryslidemenu ul > li ul > li:hover > a,
.jqueryslidemenu ul li ul li a:hover {
    color: #FFFFFF;
}
.downarrowclass {
    position: absolute;
    right: 7px;
    top: 12px;
}
.rightarrowclass {
    position: absolute;
    right: 5px;
    top: 18px;
}
#myslidemenu li li strong {
}
#myslidemenu ul li ul li .SubMenuText {
}
#myslidemenu li li span {
    padding: 3px 0;
}
#myslidemenu li li strong, #myslidemenu li li span {
    display: block;
    line-height: 1.2;
}
.jqueryslidemenu ul ul ul {
    top: 0;
    left: 100%;
}
.jqueryslidemenu ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}
div.line-border-bottom {
    height: 5px; width: 100%; background-color: #05386D; float:left
}

/*------- Layout ----------*/
#content, #center-content {
    clear:both;
    margin: 0;
    padding-top: 6px;
    /*border: #CCC solid 1px;
    border-radius: 3px; */
}
/*------- End Layout ----------*/

/*--------- User ------------*/
.user-wrapper {
    width: 100%;
    margin: 0 auto;
}
.userGroup {
    font-weight: bold;
    padding: 6px;
}
.userList {
    padding-bottom: 10px;
    display: block;
    overflow: hidden;
}
.user-account {
    padding: 5px;
}
.location-content {
    width: 24%;
    padding: 5px 0;
    float: left;
}
.user-avatar {
    margin-right: 15px;
}
.user-box-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
}
.user-info {
    width: 100%;
    display: block;
}
.user-content {
    line-height: 25px;
    display: flex;
}
.field-name {
    width: 95px;
    font-weight: bold;
}
.field-value {
    margin-left: 10px;
}

/* ------- System Admin --------*/
input.txtOrder {
    width: 50px
}
input.txtUsername {
    width: 100px;
}
/*----- Current path --------*/
.path, .subMenuBox, .toolboxButton, .content-box, .content-wrapper {
    border: #DDDDDD solid 1px;
    background-color: #FFFFFF;
    border-radius: 3px;
    margin-bottom: 6px;
}
.path {
    height: 24px;
}
.path ul, .path ul li {
    margin: 0;
    padding: 0;
    list-style: none
}
.path ul li {
    display: inline;
    height: 24px;
    float: left;
    background: url("../layout/breadcrumb_grid.png") no-repeat scroll right -35px #FFFFFF;
}
.path ul li.SecondLast {
    background: url("../layout/breadcrumb_grid.png") no-repeat scroll right -4px transparent;
}
.path ul li.Last {
    background: url("../layout/breadcrumb_grid.png") no-repeat scroll right -35px #F4F5F7;
}
.path ul li a, .path ul li span {
    color: #005FA3;
    display: block;
    font-weight: normal;
    margin-right: 10px;
    padding: 5px 10px 6px;
    text-decoration: none;
}
.path ul li span {
    color: #333
}

/*----- Sub menu list --------*/
.subMenuBox {
    min-height: 25px;
    overflow: hidden;
}

ul.submenu {
    padding: 0 5px;
    float: right
}
ul.submenu li {
    list-style: none;
    float: left;
    margin: 6px 0;
    padding: 0;
}

ul.submenu li a, ul.submenu li a:visited {
    border-right: 1px solid #CCCCCC;
    color: #0B6F9D;
    cursor: pointer;
    font-weight: bold;
    padding: 0 10px;
}
ul.submenu li a.active {
    color: #993300
}
/*--------- Toolbox -----------*/
.toolboxButton {
    padding: 5px;
}
.toolboxButton:after {
    content: '';
    display: block;
    clear: both;
}
.toolboxButton .header {
    float: left;
    color: #666666;
    max-width: 50%;
}
.toolboxButton .header img {
    vertical-align: middle
}
.toolboxButton .header span {
    color: #666666;
}
.toolboxButton .toolbar-table {
    float: right;
    max-width: 50%;
    overflow-x: scroll;
    scrollbar-width: none;
}
table.toolbar {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
table.toolbar td {
    color: #666666;
    height: 48px;
    padding: 1px 1px 1px 4px;
    text-align: center;
}
table.toolbar a {
    border: 1px solid transparent;
    color: #0B55C4;
    cursor: pointer;
    display: block;
    float: left;
    padding: 1px 5px;
    white-space: nowrap;
}
table.toolbar a:hover {
    background-image: url("../layout/icon_bg.gif");
    background-position: center bottom;
    background-repeat: repeat-x;
    border-color: #EEEEEE #CCCCCC #CCCCCC #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-style: solid;
    border-width: 1px;
    color: #0B55C4;
    text-decoration: none;
}
table.toolbar span {
    display: block;
    float: none;
    height: 32px;
    margin: 0 auto;
    width: 32px;
}
/*-- Toolbox button --*/
.icon-button, .icon-button-16 {
    background-color: Transparent;
    background-position: left top;
    transition: all 0.8s ease 0s;
    border: 0 none;
    cursor: pointer;
    height: 32px;
    width: 32px;
    display: table;
}
a:hover .icon-button, .icon-button:hover {
    background-position: left top;
    transition: all 0.3s ease 0s;
}
.icon-disabled {
    background-position: left bottom;
}
.icon-button-16 {
    height: 16px;
    width: 16px;
}
.Icon-32-Add {
    background-image: url("../button/add-32.png");
}
.Icon-32-Apply {
    background-image: url("../button/apply-32.png");
}
.Icon-32-Approve {
    background-image: url("../button/approve-32.png");
}
.Icon-32-Archive {
    background-image: url("../button/archive-32.png");
}
.Icon-32-Back {
    background-image: url("../button/back-32.png");
}
.Icon-32-Cache {
    background-image: url("../button/cache-32.png");
}
.Icon-32-Calendar {
    background-image: url("../button/calendar-32.png");
}
.Icon-32-Cancel {
    background-image: url("../button/cancel-32.png");
}
.Icon-32-Copy {
    background-image: url("../button/copy-32.png");
}
.Icon-32-Config {
    background-image: url("../button/config-32.png");
}
.Icon-32-Confirm {
    background-image: url("../button/confirm-32.png");
}
.Icon-32-Custom {
    background-image: url("../button/custom-32.png");
}
.Icon-32-Delete {
    background-image: url("../button/delete-32.png");
}
.Icon-32-Dispute {
    background-image: url("../button/dispute-32.png");
}
.Icon-32-Edit {
    background-image: url("../button/edit-32.png");
}
.Icon-32-Excel {
    background-image: url("../button/excel-32.png");
}
.Icon-32-Finish {
    background-image: url("../button/finish-32.png");
}
.Icon-32-Forward {
    background-image: url("../button/forward-32.png");
}
.Icon-32-Invoice {
    background-image: url("../button/invoice-32.png");
}
.Icon-32-Help {
    background-image: url("../button/help-32.png");
}
.Icon-32-Headline {
    background-image: url("../button/default-32.png");
}
.Icon-32-List {
    background-image: url("../button/list-32.png");
}
.Icon-32-Merge {
    background-image: url("../button/merge-32.png");
}
.Icon-32-Move {
    background-image: url("../button/move-32.png");
}
.Icon-32-Optimize {
    background-image: url("../button/optimize-32.png");
}
.Icon-32-Paid {
    background-image: url("../button/paid-32.png");
}
.Icon-32-Pdf {
    background-image: url("../button/pdf-32.png");
}
.Icon-32-Pending {
    background-image: url("../button/unpublish-32.png");
}
.Icon-32-Read {
    background-image: url("../button/read-32.png");
}
.Icon-32-Restore {
    background-image: url("../button/restore-32.png");
}
.Icon-32-Print {
    background-image: url("../button/printer-32.png");
}
.Icon-32-Process {
    background-image: url("../button/process-32.png");
}
.Icon-32-Publish {
    background-image: url("../button/publish-32.png");
}
.Icon-32-Racking {
    background-image: url("../button/racking-32.png");
}
.Icon-32-Return {
    background-image: url("../button/return-goods-32.png");
}
.Icon-32-Revert {
    background-image: url("../button/revert-32.png");
}
.Icon-32-Review {
    background-image: url("../button/copy-32.png");
}
.Icon-32-Save {
    background-image: url("../button/save-32.png");
}
.Icon-32-SaveAndAdd {
    background-image: url("../button/save-32.png");
}
.Icon-32-Search {
    background-image: url("../button/search-32.png");
}
.Icon-32-Send {
    background-image: url("../button/send-32.png");
}
.Icon-32-Statistic {
    background-image: url("../button/statistic-32.png");
}
.Icon-32-Transfer {
    background-image: url("../button/transfer-32.png");
}
.Icon-32-Unlock {
    background-image: url("../button/unlock-32.png");
}
.Icon-32-UnReview {
    background-image: url("../button/copy-32.png");
}
.Icon-32-UnArchive {
    background-image: url("../button/unarchive-32.png");
}
.Icon-32-UnPublish {
    background-image: url("../button/unpublish-32.png");
}
.icon-16-button {
    background-color: Transparent;
    background-position: left top;
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 16px;
    width: 16px;
    display: table-cell;
    /*padding-left: 20px;*/
}
.Icon-16-Add {
    background-image: url("../button/add-16.png");
}
.Icon-16-Cancel {
    background-image: url("../button/cancel-16.png");
}
.Icon-16-Collapse {
    background-image: url("../button/collapse-16.png");
}
.Icon-16-Edit {
    background-image: url("../button/edit-16.png");
}
.Icon-16-Expand {
    background-image: url("../button/expand-16.png");
}
.Icon-16-Delete {
    background-image: url("../button/delete-16.png");
}
.Icon-16-Calendar {
    background-image: url("../button/calendar-16.png");
}
.Icon-16-List {
    background-image: url("../button/list-16.png");
}
.Icon-16-Restore {
    background-image: url("../button/restore-16.png");
}

.icon-48-button {
    background-color: Transparent;
    background-position: left top;
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 48px;
    width: 48px;
    /*padding-left: 20px;*/
}
.icon-48-button span {
    display: block
}
.Icon-48-Payment {
    background-image: url("../icon/payment-48.png");
}
.Icon-48-ProductAdd {
    background-image: url("../icon/product-48.png");
}
.Icon-48-ProductList {
    background-image: url("../icon/product-list-48.png");
}
.Icon-48-Content {
    background-image: url("../icon/article-48.png");
}
.Icon-48-List {
    background-image: url("../icon/list-48.png");
}
.Icon-48-Category {
    background-image: url("../icon/tree-48.png");
}
.Icon-48-Config {
    background-image: url("../icon/config-48.png");
}
.Icon-48-Interface {
    background-image: url("../icon/themes-48.png");
}
.Icon-48-OrderList {
    background-image: url("../icon/info-48.png");
}
.Icon-48-StockIn {
    background-image: url("../icon/stock-in-48.png");
}
.Icon-48-StockOut {
    background-image: url("../icon/stock-out-48.png");
}
.Icon-48-Customer {
    background-image: url("../icon/customer-48.png");
}
.Icon-48-Calendar {
    background-image: url("../icon/calendar-48.png");
}
.Icon-48-Account {
    background-image: url("../icon/user-48.png");
}
.Icon-48-Grant {
    background-image: url("../icon/grant-48.png");
}
.Icon-48-User {
    background-image: url("../icon/user-48.png");
}

/*-- End Toolbox button --*/
/*----------------------------*/

/*---- Form search ----*/
.content-box {
    padding: 2px;
    margin: 5px 0px;
}
.content-box #advance-search,
.content-box #auto-fill-box,
.content-box #email-box {
    display: none
}
#email-box input.txtMail {
    width: 85%;
}
#email-box span#email_cc, #email-box span#email_bcc {
    margin-left: 5px;
    cursor: pointer;
}
#email-box span#ccbcc:hover {
    color: #005FB1
}
#email-box tr#email_cc, #email-box tr#email_bcc {
    display: none;
    margin: 3px 0
}

#advance-search {
    width: 80%;
    padding: 10px;
    margin: 0 auto;
}
#advance-search .advance-search-title {
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000000;
}
.proposer-wrapper {
    position: relative;
}
#proposer-box, #purchaser-box {
    position: relative;
}
.userlist-container {
    width: 180px;
    height: 160px;
    overflow-y: scroll;
    top: 3px;
    left: 0;
    position: absolute;
    background-color: #ffffff;
    border: #343434 solid 1px;
    z-index: 1;
}
.btnclose {
    border: #343434 solid 1px;
    width: 20px;
    border-radius: 15px;
    text-align: center;
    left: 164px;
    position: absolute;
    font-weight: bold;
    line-height: 20px;
    background-color: #fff;
    z-index: 2;
}
.ui-widget-overlay {
    background: #000;
    opacity: 0.8;
    filter: Alpha(Opacity=80)
}
/*---- End Form search ----*/

/*--- Content detail ---*/
table.admintable {
    /*background-color: #FFFFFF;*/
    border-spacing: 3px;
}
table.admintable td.key, table.admintable td.paramlist_key {
    background-color: #F6F6F6;
    border-bottom: 1px solid #E9E9E9;
    border-right: 1px solid #E9E9E9;
    color: #666666;
    font-weight: bold;
    padding: 4px;
    text-align: right;
    vertical-align: top;
    width: 200px;
    white-space: nowrap;
}
table.admintable td.sub-head {
    background: none repeat scroll 0 0 #EFEFEF;
    border-bottom: 1px solid #777777;
    color: #444444;
    font-weight: bold;
    height: 25px;
    padding: 2px 5px;
    text-align: left;
}
table.admintable td {
    padding: 2px 5px;
}
table.admintable td div#other_image_list div {
    line-height:32px;
    height:32px;
}
table.admintable td select.cbList {
    width: 200px;
}
table.admintable td textarea {
    width: 90%;
    height: 150px;
    background: none;
}
.diff-notice-box {
    font-weight: bold;
    color: #343434;
}
.diff-notice-box a:before {
    content: ' ';
    background: url("images/arrow-blink.gif") no-repeat 50% 50%;
    background-size: cover;
    padding-left: 20px;
}
.diff-notice-box a, .diff-notice-box a:visited {
    color: #FF0000;
}
.diff-notice-box a:hover {
    color: #0000FF;
    text-decoration: none;
    /*transition: ease-in all 0.3s;*/
    transition: all 0.8s ease 0s;
}
/*---- End content detail ----*/

/*--- Content list ---*/
.content-box .content-list {
    width: 100%;
    overflow: auto;
}
.content-box .content-block {
    background: #FFFFFF url("images/bg-block.png") no-repeat 50% 50%;
}
.content-box .content-normal {

}
.content-box .select-data-type {
    padding: 10px;
}
.content-box .select-data-type h2 {
    color: #444444;
    display: block
}
.content-box .select-data-type a {
    padding: 10px 0;
    margin: 0 15px;
    display: inline-block
}
.content-box .content-list-empty {
    padding: 25px 60px;
    font-size: 18px;
    font-weight: bold;
    color: #666666;
}
.content-box .content-list img.imagethumb {
    width: 130px;
}
.content-box .content-list .otherImageList {
    padding: 10px;
    float: left;
    text-align: center
}
.content-box .content-list .otherImageList img {
    display: block
}
.sub-title {
    font-size: 90%;
    font-style: italic;
    font-weight: normal;
}
.content-box .chart-box {
    padding: 25px 50px 0;
}
.content-box .content-list .feedback-wrapper {
    padding: 10px;
    display: block;
}
.feedback-wrapper .thread-title {
    color: #666666;
    padding: 1em 0px;
    font-size: 20px;
    font-weight: bold;
}
.feedback-wrapper .thread-info {
    position: relative;
    padding-bottom: 15px;
    display: flex;
    justify-content: flex-start;
}

.feedback-wrapper .user-avatar {
    min-width: 40px;
    position: relative;
    width: 40px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin-right: 15px;
    background-color: #e0e0e0;
    border: 2px solid #0d6cb6;
}
.feedback-wrapper .user-info {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    background: none;
}
.feedback-wrapper .user-name {
    font-size: 1rem;
    text-rendering: optimizelegibility;
    color: #0d6cb6;
    font-weight: 700;
    margin-bottom: 3px;
}
.feedback-wrapper .date-comment-view {
    color: #7a7a7a;
    font-size: 0.8rem;
    flex-flow: wrap;
    display: flex;
}
.feedback-wrapper .feedback-date {
    margin: 0;
    padding: 0;
}
.feedback-wrapper .feedback-comment:before {
    content: '•';
    margin-right: 5px;
    padding-left: 0px;
}
.feedback-wrapper .feedback-comment {
    margin: 0 5px;
}
.feedback-wrapper .feedback-view {
    margin: 0 5px;
}
.feedback-wrapper .feedback-content {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3;
}
.feedback-wrapper .feedback-file {
    margin-top: 24px;
    position: relative;
    margin: 10px 0;
}
.feedback-wrapper .feedback-receiver {
    margin-top: 24px;
    position: relative;
    margin: 10px 0;
}
.feedback-wrapper .feddback-reply-list {
    position: relative;
    padding: 1rem 0 1rem 2rem;
    border-radius: 13px;
}
.feddback-reply-list .reply-container {
    position: relative;
    display: flex;
    padding-bottom: 1rem;
    border-bottom: aliceblue solid 1px;
    margin-bottom: 1rem;
}
.reply-container .reply-wrapper {
    padding: 5px 15px 0 0;
    overflow: hidden;
}
.reply-container .reply-button {
    display: flex;
    justify-content: space-between;
    width: 80px;
}
.reply-button .edit-reply, .reply-button .delete-reply, .reply-button .save-reply {
    padding: 4px 8px;
    border: #0d6cb6 solid 1px;
    border-radius: 5px;
}
.reply-button .edit-reply:hover, .reply-button .delete-reply:hover, .reply-button .save-reply:hover {
    background: #0d6cb6;
    text-decoration: none;
    color: #fff;
}
.reply-container .reply-control {
    display: flex;
}
.reply-container .reply-user {
    font-weight: 700;
    font-size: 13px;
    color: #0d6cb6;
}
.reply-container .reply-time {
    font-weight: normal;
    color: #ababab;
    font-size: 10px;
    padding: 0 20px;
}
.reply-container .reply-content {
    position: relative;
    margin-top: 1rem;
    font-size: 15px;
}
.feedback-wrapper .thread-action {
    padding: 1rem 0 1rem 2rem;
    margin: 10px 0;
    display: flex;
}
.feedback-wrapper .post-reply {
    width: 100%;
    border-radius: 8px;
    padding: 13px 15px;
    justify-content: center;
    position: relative;
    background-color: #eff1f3;
}
.feedback-wrapper .edit-reply-input {
    resize: none;
    width: 100%;
    font-size: 15px;
    display: block;
    line-height: 1.4;
    min-height: 100px;
}
.feedback-wrapper .post-reply-author, .feedback-wrapper .post-reply-content {
    resize: none;
    width: 100%;
    font-size: 15px;
    flex: 1;
    box-sizing: border-box;
    border-radius: 0;
    background: none;
    border: none;
    outline: none;
    outline-width: medium;
    box-shadow: none;
    display: block;
    line-height: 1.4;
    overflow: hidden;
}
.feedback-wrapper #add-recipients {
    padding: 10px 4px;
}
.feedback-wrapper .title-label {
    padding: 15px 4px 0;
}
.feedback-wrapper .post-reply-author {
    min-height: 30px;
    padding: 4px;
}
.feedback-wrapper .post-reply-content {
    min-height: 100px;
}
.feedback-wrapper .post-reply-button {
    display: flex;
    right: 30px;
    bottom: 25px;
    position: absolute;
    padding: 5px 20px;
    border-radius: 3px;
    background: #0d6cb6;
    color: #fff;
}
.content-box .content-list .show-less {
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    max-width: 85%;
    display: inline-block;
}
.content-box .content-list .list-user {
    margin-right: 5px;
}
.sub-header {
    color: #666666;
    padding: 15px 0;
    font-weight: bold;
    background-color: #f0f0f0;
    font-size: 15px;
}
table.adminlist {
    background-color: #E7E7E7;
    border-spacing: 1px;
    color: #666666;
    border-collapse: collapse;
}
table.adminlist th {
    background: none repeat scroll 0 0 #F0F0F0;
    border-color: #E7E7E7 #E7E7E7 #999999;
    border-style: solid;
    border-width: 1px;
    color: #666666;
    text-align: center;
    font-weight: bold;
    padding: 4px;
}
table.adminlist tr.single-row th {
    border-bottom: none
}
table.adminlist th.col_20 {
    width: 20px;
}
table.adminlist th.col_25 {
    width: 25px;
}
table.adminlist th.col_40 {
    width: 40px;
}
table.adminlist th.col_50 {
    width: 50px;
}
table.adminlist th.col_60 {
    width: 60px;
}
table.adminlist th.col_70 {
    width: 70px;
}
table.adminlist th.col_80 {
    width: 80px;
}
table.adminlist th.col_100 {
    width: 100px;
}
table.adminlist th.col_120 {
    width: 120px;
}
table.adminlist th.col_150 {
    width: 150px;
}
table.adminlist th.col_180 {
    width: 180px;
}
table.adminlist th.col_200 {
    width: 200px;
}
table.adminlist th.col_250 {
    width: 250px;
}
table.adminlist tbody tr.head td {
    background: #D8D8D8;
    font-weight: bold
}
table.adminlist tbody tr.head td a {
    color: inherit
}
table.adminlist tbody tr.head td a:hover {
    color: #005FA3;
}
table.adminlist tbody tr.empty td {
    text-align: center;
}
table.adminlist tbody tr td {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.07);
    border-style: solid;
    border-width: 0 1px 1px;
    height: 25px;
}
table.adminlist tbody tr td ol, table.adminlist tbody tr td li {
    list-style-position: inside;
}
table.adminlist tbody tr.row0 td {
    background: none repeat scroll 0 0 #F9F9F9;
}
table.adminlist tbody tr.row1 td {
    background: none repeat scroll 0 0 #EAEAEA;
    border-top: 1px solid #FFFFFF;
}
table.adminlist tbody tr.m-row td {
    background: none repeat scroll 0 0 #f7971d;
}
table.adminlist tbody tr.row0 td a.list-button:before, table.adminlist tbody tr.row1 td a.list-button:before {
    content: ' - ';
}
table.adminlist tbody tr.row0 td a.list-button:first-child:before, table.adminlist tbody tr.row1 td a.list-button:first-child:before {
    content: '';
}
table.adminlist tbody tr:hover td,
table.adminlist tbody tr.row0:hover td, table.adminlist tbody tr.row1:hover td,
table.adminlist tbody tr.row0:hover td a, table.adminlist tbody tr.row1:hover td a {
    background-color: #FFFFDD;
    color: #666666
}
table.adminlist tbody tr td table tr:hover td, table.adminlist tbody tr td table tr:hover td {
    background-color: #FFF;
}
table.adminlist tbody tr.pending td {

}
table.adminlist tbody tr.cancel td,
table.adminlist tbody tr.canceling td,
table.adminlist tbody tr.block td,
table.adminlist tbody tr.locked td {
    background: gray;
    color: white;
}
table.adminlist tbody tr.reject td,
table.adminlist tbody tr.request td {
    background: yellowgreen;
    /*color: red;*/
}
table.adminlist tbody tr.approved td {
    background: #d9d100;
}
table.adminlist tbody tr.printed td {
    background: #cc3300;
    color: #FFFFFF;
}
table.adminlist tbody tr.expire td,
table.adminlist tbody tr.processing td {
    background: #cc2200;
    color: #FFFFFF;
    /*color: navy;*/
}
table.adminlist tbody tr.instock td {
    background: #009600;
    color: #FFFFFF;
    /*color: navy;*/
}
table.adminlist tbody tr.printed td a,
table.adminlist tbody tr.cancel td a,
table.adminlist tbody tr.canceling td a,
table.adminlist tbody tr.expire td a,
table.adminlist tbody tr.processing td a,
table.adminlist tbody tr.instock td a,
table.adminlist tbody tr.block td a {
    color: #FFFFFF;
}
table.adminlist tbody tr.cancel td,
table.adminlist tbody tr.reject td,
table.adminlist tbody tr.deleted td{
    text-decoration: line-through;
}
table.adminlist tbody tr.delivered td {
    background: #009700;
    color: black;
}
table.adminlist tbody tr.finished td,
table.adminlist tbody tr.complete td,
table.adminlist tbody tr.imsyes td,
table.adminlist tbody tr.paid td {
    background: green;
    color: black;
}
table.adminlist tbody tr.delivered td a,
table.adminlist tbody tr.finished td a,
table.adminlist tbody tr.complete td a,
table.adminlist tbody tr.imsyes td a,
table.adminlist tbody tr.paid td a {
    color: black;
}
table.adminlist tbody tr.normal td {

}
table.adminlist tbody tr.hide td {
    color: #FF0000;
}
table.adminlist tbody tr.miss td,
table.adminlist tbody tr.miss td a,
table.adminlist tbody tr.supperurgent td,
table.adminlist tbody tr.row-empty td,
table.adminlist tbody tr.row-empty td a {
    color: #FF0000;
}
table.adminlist tbody tr.row-miss td,
table.adminlist tbody tr.row-miss td a {
    color: #f7971d;
}
table.adminlist tbody tr.missorder td,
table.adminlist tbody tr.missorder td a {
    color: #FF0000;
    font-weight: bold;
}
table.adminlist tbody tr.ontime td,
table.adminlist tbody tr.row-complete td,
table.adminlist tbody tr.row-complete td a {
    color: #008000;
}
table.adminlist tbody tr.urgent td,
table.adminlist tbody tr.hightlight td,
table.adminlist tbody tr.online td,
table.adminlist tbody tr.online td a {
    color: #0000FF;
}
table.adminlist tbody tr.offline td,
table.adminlist tbody tr.offline td a {
    /*    color: #0000FF;*/
}
table.adminlist tbody tr td span.qty-available {
    font-size: 10px;
}
table.adminlist tbody tr td span.ref {
    display: none;
}
table.adminlist tr td.col_left {
    text-align: left;
}
table.adminlist tr td.col_center {
    text-align: center;
}
table.adminlist tr td.col_right {
    text-align: right;
}
table.adminlist tr td.pro-price {
    text-align: right;
    color: #ff0000;
}
table.adminlist tr td.pro-qty {
    text-align: right;
    color: #ff0000;
}
table.adminlist td {
    padding: 6px 4px;
}
table.adminlist tr td textarea {
    height: 30px;
}
table.adminlist tr td.col_image {
    width: 100px;
}
table.adminlist tr td.col-finished {
    background: green !important;
    color: black;
}
table.adminlist tr td.col-processing {
    background: red !important;
    color: white;
}
table.adminlist tr td.col-finished a {
    color: black;
}
table.adminlist tr td.col-processing a {
    color: white;
}
table.adminlist tr:hover td.col-processing,
table.adminlist tr:hover td.col-finished {
    background: #FFFFDD !important;
    color: #666666;
}
table.adminlist td.amount, table.adminlist td.subtotal {
    font-weight: bold;
}
table.adminlist td img.thumblist {
    width: 30px;
}
table.adminlist td input[type="text"], table.adminlist td input[type="number"] {
    min-width: 25px;
    width: 90%;
}
table.adminlist td input.TextInputSmall {
    width: 50%;
}
table.adminlist td input.TinyText {
    width: 50%;
}
table.adminlist td select {
    width: 100%;
}
table.adminlist td .current-price {
    text-decoration: line-through
}
table.adminlist tr.rowhide, table.adminlist tr.add-item td {
    display: none
}
table.adminlist tfoot tr td {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.07);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    height: 25px;
}
table.adminlist tfoot tr td#subtotal_billing, table.adminlist tfoot tr td#subtotal_real {
    font-size: 120%;
    font-weight: bold
}
table.product-list .procat {
    position: relative;
}
table.product-list .popcat {
    top: 20px;
    position: absolute;
    z-index: 10;
    display: block;
}
table.product-list ul {
    background: #ffffff;
    list-style: none;
    width: 250px;
    text-align: left;
}
table.product-list li {
    padding: 5px 0;
    cursor: default;
}
table.product-list li:hover {
    background: #3399ff;
    color: #ffffff;
}
table.sub-table {
    border: none;
}
table.sub-table tr td {
    border-style: none !important;
    border-width: 0;
}
.headertext, .headertext:link, .headertext:hover, .headertext:visited {
    font-weight: bold;
}
.ordered-bound {
    position: relative;
}
.ordered-bound .ordered-list {
    top: 20px;
    box-shadow: 3px 3px 5px #888888;
    left: 269px;
    position: absolute;
    border: 1px solid #CCC;
    cursor: move;
}
.ordered-bound .ordered-list .close {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 22px;
    height: 16px;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 16px;
}
.ordered-bound .ordered-list .close a {
    display: block;
    text-decoration: none;
    line-height: 16px;
}
.ordered-bound .ordered-list .close a img {
    display: block;
    width: 16px;
    height: 16px;
}
.stockout-content {
    display: block;
    padding: 10px 0;
}
.txtDateTime, .local-supplier {
    display: block;
    padding-top: 5px;
}
/*---- End content list -----*/

/*--- Form Element style ---*/
input[type="submit"] {
    cursor: pointer;
    font-family: Tahoma;
    font-size: 11px;
    padding-left: 5px;
    padding-right: 5px;
}
input[type="text"], input[type="password"], input[type="number"] {
    border: 1px solid #C0C0C0;
    color: #333333;
    font-family: Tahoma;
    font-size: 11px;
    padding: 2px;
}
input[type="Checkbox"], input[type="radio"] {
    margin-left: 5px;
    margin-right: 5px;
}
.FormButton, input[type="submit"], input[type="button"], input[type="reset"], button {
    background: url("../layout/button-background-gray.gif") repeat-x scroll 0 0 #E3E3E3;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    font-family: helvetica;
    font-size: 12px;
    line-height: 16px;
    padding: 3px 5px;
}
.FormButton:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, button:disabled {
    color: #AAAAAA;
    cursor: not-allowed;
}
textarea {
    border: 1px solid #C0C0C0;
    padding: 4px;
    resize: none;
    font-family: inherit;
    font-size: inherit;
}
select {
    border: 1px solid #C0C0C0;
    font-family: Tahoma;
    font-size: 11px;
    padding: 2px;
}
select.cbStatYear {
    position: absolute;
    top: 5px;
    right: 35px;
}
textarea#introtext {
    width: 50%;
    height: 150px;
    padding: 5px;
}
.TextInput {
    width: 350px;
}
.SelectInput {
    width: 356px;
}
.dateTime {
    width: 60px;
}
input.highlight, select.highlight, textarea.highlight {
    border-color: #ef0fff;
}
/*--- End Form Element style ---*/

#footer {
    text-align: right;
    padding: 0;
    color: #666666;
    clear:both;
}

/*------- JQuery-UI Edit -----------*/
.ui-widget{font-family:Tahoma,Verdana,Arial,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Tahoma,Verdana,Arial,sans-serif;font-size:1em}
.ui-widget-content {
    border: none;
}
.ui-widget-header {
    background: none;
    border-color: #DDDDDD;
    border-width:0 0 1px 0;
    border-radius: 0
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color:#005FA3;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #F0F3F0
}
.ui-tabs .ui-tabs-panel {
    padding: 1em 0;
}
.ui-datepicker {
    background: #EAEAEA;
    box-shadow: 1px 1px 2px #EAEAEA;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #0000FF;
    color: #0000FF;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #0000FF;
    color: #0000FF;
    font-weight: bold
}
.ui-autocomplete {
    z-index: 103
}
.ui-dialog  {
    box-shadow: 3px 3px 5px #888888;
    border: 1px solid #CCC;
    cursor: move;
}
/*------- End JQuery-UI Edit --------*/

/*------- Admin home --------*/
.home-admin-wrapper {
    border: 5px solid #ECECEC;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 15px;
}
.home-admin-container {
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    padding: 15px 13px;
    position: relative;
    overflow: hidden
}
.home-admin-container h2 {
    font-size: 20px;
    padding-bottom: 20px;
}
.quick-menu .quick-button {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
}
table.home-admin-toolbar {
    margin: 0 auto
}
table.home-admin-toolbar a, table.home-admin-toolbar a:visited {
    color: #333333;
    font-weight: bold
}
table.home-admin-toolbar a:hover {
    color: #993300;
    text-decoration: none
}
table.home-admin-toolbar span {
    width: 48px;
    height: 48px;
    display: block
}

.home-admin-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.home-admin-list-item {
    max-width: 450px;
    flex: 1;
    display: flex;
    gap: 15px;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 20px !important;
    transition: all 0.3s ease-in-out;
    font-family: 'Poppins', sans-serif;
}
.home-admin-container .content-counter {
    display: flex;
    font-size: 14px;
    font-weight: 500;
}
.home-admin-container .content-counter a {
    width: 100%;
    display: flex;
    line-height: 20px;
    justify-content: space-between;
}
.home-admin-container .content-counter a:hover {
    transition: all 0.2s ease;
    color: #ad180e;
    scale: 1.03;
}
.home-admin-container .content-counter span {
    color: #333;
}

.home-admin-container .content-counter a:hover {
    text-decoration: none!important;
}
.home-admin-container .number {
    color: #ad180e !important;
    font-weight: 600;
}
.home-admin-container .number:hover {
    text-decoration: none !important;
}
.position-relative {
    position: relative !important
}
.position-absolute {
    position: absolute !important
}
.notification {
    color: #387A3A;
}
.notification i.fa.fa-bell{
    font-size: 17px;
}
.num-feedback {
    top: -13px;
    left: 9px;
    z-index: 1;
}
.num-notice {
    color: white !important;
    background: #930;
    padding: 1px 3px;
    border-radius: 5px;
}
.d-inline-block {
    display: inline-block;
}
.border {
    border: 1px solid #CCCCCC;
}
/*------- End Admin home --------*/

/*------- Change password --------*/
.change-pass-success {
    color: red;
    font-size: 30px;
    padding: 20px;
    text-align: center;
}
.change-pass-redirect {
    font-size: 16px;
    padding-bottom: 20px;
    text-align: center;
}
/*------- End change password --------*/
/*------- Reset Password --------*/
.reset-wrapper {
    display: block;
    font-size: 1.2em;
    padding: 0.5em;
}
.reset-content {
    border: #DDDDDD solid 1px;
    background-color: #FFFFFF;
    border-radius: 3px;
    margin: 30px auto;
}
.reset-content .reset-title {
    font-size: 1.5em;
}
.reset-content p {
    line-height: 1.4em;
}
.reset-content .reset-button {
    padding-top: 1.5em;
    text-align: center
}
.reset-content .reset-button input {
    margin-right: 1.5em;
}
/*------- End Reset password --------*/

/*------- Customer's Products --------*/
.search-customer {
    text-align: center;
    display: block;
    padding: 10px;
    font-size: 16px;
    /*font-weight: bold*/
}
.search-customer input {
    font-size: 16px;
    width: 60%;
}
/*------- End Customer's Products --------*/
/*------- Sales Amount --------*/
.sub-total {
    font-weight: bold;
}
.redcolor {
    color: #FF0000;
}
table.adminlist tr.company-info td {
    font-weight: bold;
    background-color: #B7B7B7;
}
/*------- End Sales Amount --------*/
/*------- Sales Target --------*/
table.sales-target {
    width: 2000px;
}
table.sales-target th.stc1 {
    width: 100px;
}
table.sales-target th.stc2,
table.sales-target th.stc3,
table.sales-target th.stc14,
table.sales-target th.stc15,
table.sales-target th.stc17 {
    width: 80px;
}
table.sales-target th.stc4,
table.sales-target th.stc5,
table.sales-target th.stc7,
table.sales-target th.stc9,
table.sales-target th.stc10 {
    width: 50px;
}
table.sales-target th.stc6,
table.sales-target th.stc8,
table.sales-target th.stc11,
table.sales-target th.stc12 {
    width: 160px;
}
table.sales-target th.stc13,
table.sales-target th.stc16,
table.sales-target th.stc18,
table.sales-target th.stc19,
table.sales-target th.stc20,
table.sales-target th.stc21,
table.sales-target th.stc22,
table.sales-target th.stc23 {
    width: 45px;
}
.cus-list .cusname {
    position: relative;
}
.cus-list a.rmc:before {
    animation: circle 1.3s ease-out infinite;
    background: rgba(247,151,29,0.5);
    border: 1px solid #f7971d;
    border-radius: 50%;
    content: "x";
    font-size: 10px;
    height: 10px;
    line-height: 7px;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 10px;
}
.cus-list a.rmc {
    transition: all 0.8s ease 0s;
    display: inline-block;
    background: #f7971d;
    border-radius: 50%;
    z-index: 10;
    margin-left: 4px;
    color: #333333;
}
.cus-list a.nm {
    /*display: inline-block;*/
    display: none;
}

/*------- End Sales Target --------*/
/*------- Customer product --------*/
.update-price {
    padding: 20px;
    font-size: 12px;
    display: none;
}
.update-price img {
    width: 100px;
    height: 100px;
}
table.statistic {
}
table.statistic td {
    padding: 3px;
    font-size: 12px;
}
/*------- End Customer product --------*/

/*------- Error --------*/
.error-box {
    padding: 10px;
    color: #ff0000;
}
.error-box ul li {
    list-style: disc inside;
    padding: 2px 0;
}
.error-box ul li, .error-box ul li a {
    color: #FF0000;
}
.error {
    background: #e5a1a1 !important;
    border: 1px solid #ff0000 !important;
}
.error-body {
    padding: 30px;
    font-size: 16px;
}
.error-body .main-title {
    font-weight: normal;
    font-size: 2.5em;
    font-weight: 300;
}
.error-body p {
    padding: 30px 0;
}
.error-body ul li {
    list-style: circle;
    margin: 0 0 1em 1em;
    padding: 0 0 0 0.5em;
}
/*------- End Error --------*/


/*--------- Paging --------*/
div#paging {
    clear: both;
    display: table;
}
div#paging span.paging-name {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
}
div#paging span {
    border: 1px solid #FF3300;
    color: #000000;
    padding: 3px 5px;
    display: table-cell;
    vertical-align: middle;
}
div#paging a, div#paging a:visited {
    background: none repeat scroll 0 0 #E5ECF4;
    border: 1px solid #CCCCCC;
    color: #333333;
    font-weight: 700;
    margin: 0 3px;
    padding: 3px 5px;
    display: table-cell;
    vertical-align: middle;
}
div#paging a:hover, div#paging a.prev-page:hover img, div#paging a.prev-page img:hover, div#paging a.next-page:hover img, div#paging a.next-page img:hover {
    border: 1px solid #FF3300;
    color: #FF3300;
    text-decoration: none;
}
div#paging a.prev-page, div#paging a.next-page {
    margin: 0;
    padding: 0;
    border: none;
}
div#paging a.prev-page img, div#paging a.next-page img {
    width: 24px;
    height: 21px;
    background-image: url('images/arrow.png');
    border: 1px solid #CCCCCC;
    vertical-align: middle;
}
div#paging a.prev-page img {
    background-position: 0 0;
}
div#paging a.next-page img {
    background-position: 24px 0px;
}
div#paging a.prev-page:hover img, div#paging a.prev-page img:hover {
    background-position: 0 21px;
}
div#paging a.next-page:hover img, div#paging a.next-page img:hover {
    background-position: 24px 21px;
}

/*---------- End paging ---------*/
.hideitem {
    display: none !important;
}
.fl {
    float: left !important;
}
.fr {
    float: right !important;
}
.clf {
    clear: both !important;
}
.clfl {
    clear: left !important;
}
.clfr {
    clear: right !important;
}
/*---------- Common ---------*/
.report-content {
    line-height: 20px;
}
.line-clamp-toggle {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}
.line-clamp-toggle.show {
    display: block;
}
.form-control {
    line-height: 1.93;
    border-radius: .25rem;
    padding: 2px 4px!important;
}
.d-inline-block {
    display: inline-block;
}
.border {
    border: 1px solid #CCCCCC;
}
a.btn {
    border: 1px solid;
    padding: 4px;
    background: #0f75bc;
    color: #fff;
    white-space: nowrap;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin: 1px;
}
a.btn-primary, .btn-primary {
    background: #0f75bc;
    color: #fff;
}
a.btn-secondary, .btn-secondary {
    background: #006666;
    color: #fff;
}
a.btn-green, .btn-green {
    background: #009600;
    color: #fff;
}
a.btn-red, .btn-red {
    background: #cc2200;
    color: #fff;
}
a.btn-grey, .btn-grey {
    background: #808080;
    color: #fff;
}
.select_file{
    border: 1px solid #ccc;
    background: #ddd;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    color: #333;
    margin: 5px 2px;
    display: inline-block;
}
.select_file::before {
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    content:"\f0ee";
    margin-right: 3px;
}
.d-none {
    display: none;
}
.text-white {
    color: white!important;
}
.text-left {
    text-align: left!important;
}
.text-right {
    text-align: right!important;
}
.text-center {
    text-align: center!important;
}
.text-justify {
    text-align: justify!important;
}
.text-nowrap {
    white-space: nowrap!important;
}
.small {
    font-size: 0.9em!important;
}
.font-weight-normal {
    font-weight: normal!important;
}
.font-weight-bold {
    font-weight: bold!important;
}
.text-red {
    color: #cc2200!important;
}
.text-green {
    color: green!important;
}
.text-yellow {
    color: yellow!important;
}
.text-blue {
    color: #005FA3!important;
}
.pb-1, .py-1 {
    padding-bottom: 0.25rem!important;
}
.pt-1, .py-1 {
    padding-top: 0.25rem!important;
}
.pl-1, .px-1 {
    padding-left: 0.25rem!important;
}
.pr-1, .px-1 {
    padding-right: 0.25rem!important;
}
.pb-2, .py-2 {
    padding-bottom: 0.5rem!important;
}
.pt-2, .py-2 {
    padding-top: 0.5rem!important;
}
.pl-2, .px-2 {
    padding-left: 0.5rem!important;
}
.pr-2, .px-2 {
    padding-right: 0.5rem!important;
}
.pb-3, .py-3 {
    padding-bottom: 1rem!important;
}
.pt-3, .py-3 {
    padding-top: 1rem!important;
}
.pl-3, .px-3 {
    padding-left: 1rem!important;
}
.pr-3, .px-3 {
    padding-right: 1rem!important;
}