.component-form #picname {
  margin-left: 0 !important;
}

.component-form .sales-record-address a.btn {
  background: #000;
  color: #fff;
  padding: 10px 15px !important;
  font-size: 12px !important;
  font-weight: 500;
  border-radius: 0 !important;
}

.component-form .sales-record-address a.btn:hover,
.component-form .sales-record-address a.btn:focus {
  background: #162e70;
}

.component-form .sales-record-address {
  text-align: right;
  margin-bottom: 15px;
}

.component-form .sales-record-address a.btn i {
  font-size: 10px;
}

.component-form .subform-repeatable-group {
  margin-top: 15px;
  border: 1px solid #ddd;
  padding: 15px 15px 0;
  background: rgb(255 255 255 / 50%);
  backdrop-filter: blur(5px);
}

.component-form .subform-repeatable > .btn-toolbar {
  margin-bottom: 0 !important;
}

/*search filter*/

.component-table .js-stools-container-bar button.btn.hasTooltip {
  height: 34px;
  color: #fff;
  background: #000 !important;
  padding: 0 15px !important;
  font-size: 13px;
  line-height: 34px;
  border-radius: 0 !important;
  border: 0;
}

.component-table .js-stools-field-filter .input-append {
  margin-bottom: 0 !important;
  /* display: block; */
}

.component-table .js-stools-field-filter .control-group {
  margin-bottom: 0;
}

.component-table .js-stools-field-filter input {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff;
  border-color: #ccc;
}

.component-table .js-stools .chzn-container {
  display: none;
}

.component-table .js-stools .chzn-container-multi {
  /* display: block !important; */
  display: inline-block;
  box-shadow: none !important;
}

.component-table .js-stools select#filter_paymentmethod {
    display: none !important;
}

.component-table .js-stools div#filter_paymentmethod_chzn ul.chzn-choices {
    border-color: #ccc !important;
    background-image: none;
    box-shadow: none;
}

.component-table .js-stools select#filter_salesman {
    display: none !important;
}

.component-table .js-stools div#filter_salesman ul.chzn-choices {
    border-color: #ccc !important;
    background-image: none;
    box-shadow: none;
}

.component-table .js-stools select#filter_source_statistic {
    display: none !important;
}

.component-table .js-stools div#filter_source_statistic ul.chzn-choices {
    border-color: #ccc !important;
    background-image: none;
    box-shadow: none;
}

.component-table .js-stools select#filter_pic {
  display: none !important;
}

.component-table .js-stools div#filter_pic ul.chzn-choices {
  border-color: #ccc !important;
  background-image: none;
  box-shadow: none;
}

.component-table .js-stools select {
  display: block !important;
  border-radius: 0 !important;
  padding: 0 15px 0 10px;
  box-shadow: none;
  margin-bottom: 5px;
}

.component-table .js-stools-field-filter .field-calendar button.btn {
  height: 34px;
  padding: 0 10px 0 15px;
  background: #000;
  border-radius: 0 !important;
  font-size: 12px;
  line-height: 1;
}

.component-table .js-stools-container-bar button.btn.hasTooltip:hover,
.component-table .js-stools-container-bar button.btn.hasTooltip:focus,
.component-table .js-stools-field-filter .field-calendar button.btn:hover,
.component-table .js-stools-field-filter .field-calendar button.btn:focus {
  background: #162e70 !important;
  color: #fff;
}

@media (max-width: 767px) {
  .component-table .js-stools .btn-wrapper:first-child {
    display: block; /* margin-bottom: 8px; */
  }
  .component-table .js-stools .btn-wrapper:not(:first-child) {
    margin-top: 8px;
  }
}

/*end of search filter*/

/*action button*/

.component-table .addback {
  padding-top: 10px;
}

.component-table .addback button {
  font-size: 12px;
  font-weight: 500;
  border-radius: 0;
  padding: 10px 15px;
  background: #273e8a;
  margin-bottom: 8px;
}

.component-table .addback button:hover,
.component-table .addback button:focus {
  background: #09163f;
  color: #fff;
}

.component-table .addback a.btn.backbtn {
  font-size: 12px;
  font-weight: 500;
  border-radius: 0;
  padding: 10px 15px;
  background: #000;
  margin-right: 5px;
  margin-bottom: 8px;
}

.component-table .addback a.btn.backbtn:hover,
.component-table .addback a.btn.backbtn:focus {
  background: #162e70;
  color: #fff;
}

.component-table .addback a.addbtn {
  font-size: 12px;
  font-weight: 500;
  border-radius: 0;
  padding: 10px 15px;
  margin-bottom: 8px;
}

.component-table .addback a.addbtn i.icon-plus {
  font-size: 10px;
}

/*end of action button*/

/*table*/

.component-table .table-responsive {
  margin-top: 20px;
  border: 0;
}

.component-table .table-responsive table th {
  border: 0;
  font-size: 12px;
  line-height: 1.3;
}

.component-table .table-responsive table td {
  font-size: 12px;
  max-width: 300px;
  white-space: unset !important;
}

.component-table .table-responsive table td.record-no-data {
    text-align: center;
    font-size: 14px;
    font-style: italic;
    padding: 20px;
}

.component-table .table-responsive table td p {
  margin: 0;
}

.component-table .table-responsive table td a {
  color: #386cb4;
  text-decoration: underline;
}

.component-table .table-responsive table a.btn {
  background: #273e8a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 0;
  padding: 8px 15px;
  text-decoration: none;
}

.component-table .table-responsive table button {
  background: #273e8a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 0;
  border: 0;
  padding: 8px 15px;
  text-decoration: none;
  transition: 0.5s;
}

.component-table .table-responsive table a.btn:hover,
.component-table .table-responsive table a.btn:focus,
.component-table .table-responsive table button:hover,
.component-table .table-responsive table button:focus {
  background: #09163f;
}

/*end of table*/

/*pagination*/

.component-table ul.pagination {
  text-align: left;
  border-radius: 0;
}

.component-table div.pagination ul li a {
  font-size: 12px;
  border-radius: 0 !important;
  text-decoration: none !important;
  padding: 5px 10px;
}

.component-table div.pagination ul li.active a {
  color: #fff;
}

.component-table div.pagination ul li {
  margin-right: 10px !important;
}

.component-table .pagination .chzn-container {
  display: none;
}

.component-table .pagination select#limit {
  display: block !important;
  padding: 2px 5px;
  float: right;
  margin: 0 0 0 5px;
}

.component-table .pagination .limit {
  display: flex;
  align-items: center;
}

/*end of pagination*/

/*form*/

.component-form a.backbtn {
  background: #000;
  color: #fff;
  border-radius: 0;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 500;
}

.component-form a.backbtn:hover,
.component-form a.backbtn:focus {
  background: #162e70;
}

.component-form h1 {
  font-size: 18px !important;
  font-weight: 600;
  text-transform: capitalize;
  padding: 10px 15px;
  background: #ebf2f5;
}

.component-form .form-horizontal .control-group {
  margin-bottom: 15px;
}

.component-form label {
  font-size: 14px;
  font-weight: 500;
}

.component-form input {
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 10px !important;
}

.component-form .chzn-container {
  display: none;
}

.component-form select {
  display: block !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0 10px !important;
}

.component-form textarea {
  height: 100px;
  border-radius: 0;
  box-shadow: none !important;
}

.component-form .star {
  color: red;
}

.component-form .field-calendar input {
  width: 160px !important;
}

.component-form .field-calendar button {
  height: 34px;
  padding: 0 10px 0 15px;
  background: #000;
  color: #fff;
  border-radius: 0 !important;
  font-size: 12px;
  line-height: 1;
}

.component-form .field-calendar button:hover,
.component-form .field-calendar button:focus {
  background: #162e70 !important;
}

.component-form input[type="radio"] {
  width: auto !important;
  margin: 0;
  bottom: 6px;
}

.component-form fieldset.radio {
  display: inline-block;
}

@media (min-width: 768px) {
  .component-form input,
  .component-form select,
  .component-form textarea {
    width: calc(100% - 160px) !important;
  }
}

.component-form .form-horizontal .control-group button[type="submit"],
.component-form .form-horizontal .control-group button#formsubmit,
.component-form .form-horizontal .control-group a.btn {
  padding: 10px 15px !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1;
  border: 0 !important;
}

.component-form .form-horizontal .control-group button[type="submit"]:after {
  display: none;
}

.component-form .form-horizontal .control-group button[type="submit"]:hover,
.component-form .form-horizontal .control-group button[type="submit"]:focus,
.component-form .form-horizontal .control-group button#formsubmit:hover,
.component-form .form-horizontal .control-group button#formsubmit:focus {
  transform: none;
  background: #162e70 !important;
}

/*end of form*/

/*detail*/

.component-detail .item_fields {
  padding-top: 15px;
}

.component-detail .item_fields table.table {
  font-size: 14px;
  letter-spacing: 0.5px;
}

.component-detail table tr:nth-child(2n + 1) {
  background: #eee;
}

.component-detail table tr th,
.component-detail table tr td {
  border-top: 0 !important;
  padding: 10px 12px !important;
}

.component-detail a.btn {
  padding: 10px 15px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  background: #000;
  color: #fff;
}

.component-detail a.btn:hover,
.component-detail a.btn:focus {
  background: #162e70;
}

.component-detail a.btn-danger {
  background: #e00;
}

.component-detail a.btn-danger:hover,
.component-detail a.btn-danger:focus {
  background: #f00;
}

/*end of detail*/

/*pagination*/

.component-table ul.pagination-list {
  display: flex;
  list-style-type: none;
}

.component-table ul.pagination-list li {
  padding: 0 2px;
  font-size: 14px;
  margin-top: 5px;
}

.component-table ul.pagination-list li a {
  text-decoration: none !important;
  padding: 2px 8px;
}

.component-table .pagination.pagination-toolbar.clearfix .pull-right {
  float: left !important;
}

/*end of pagination*/

.calendar-container tr.time select {
  width: 100% !important;
  padding: 0 5px !important;
  color: #4a4a4a;
}

.calendar-container .time td {
  padding: 10px 10px 5px 0;
}

.calendar-container table.table {
  overflow: hidden;
}