@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

*{
  font-weight: 400;
}
:root {
  --bs-body-line-height: 1.2;
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 20px;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-bg-type: rgba(0, 0, 0, 0.05);
}
.dropdown-item,
.table>:not(caption)>*>*{
  color: var(--fh-color-text-primary);
  /* font-weight: 300; */
  background-color: var(--fh-color-bg-secondary);
}
svg {
  fill: currentColor;
}

.bg-success {
  background-color: #28a745!important;
}
.table-bordered>:not(caption)>*{
  border: none;
}
.navbar {
  padding: 0.5rem 0rem;
}
#toolbar {
  padding-top: .725rem;
}
.fixed-table-toolbar {
  margin-top: .5rem;
}
.bootstrap-table.bootstrap5 .float-right {
  /* margin-top: 1.12rem; */
}
.bootstrap-table .fixed-table-toolbar .bs-bars {
  margin-top: 0px !important;
}

.disabled > .page-link,
.page-link {
  border-radius: 50%;
  margin: 0 2px;
  background-color: transparent;
  /* min-width: 36px;
  height: 36px; */
  text-align: center;
  border-width: 1px;
  color: #aaaaaa;
  border-color: transparent;
  font-weight: 400 !important;
}

.active > .page-link {
  background-color: transparent !important;
  /* border-color: var(--fh-color-primary); */
  color: var(--fh-color-primary) !important;
  border-color: transparent !important;
}

.disabled > .page-link:hover {
  background-color: unset;
}

.page-item.page-pre .page-link,
.page-item.page-next .page-link {
  border-radius: 50%;
  /* font-size: 1.5rem;
    line-height: 1rem; */
}

.fixed-table-pagination {
  color: #aaaaaa;
}

.pagination-detail .btn {
  background-color: transparent;
  border-width: 0;
  color: #aaaaaa;
  color: black;
}

.my-table .form-control {
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
  border-radius: 30px;
  color: #666666;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  opacity: 1;
}

.my-table .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border-color: #aaaaaa;
}

.bootstrap-table .fixed-table-container.fixed-height .table thead th,
.bootstrap-table .fixed-table-container.fixed-height .fixed-table-border,
.table td,
/* .table tr, */
.fixed-table-footer tr,
.fixed-table-header tr,
.table th {
  border: none;
  border-bottom: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.table > :not(:first-child) {
  border-top: none;
}

.fixed-table-loading {
  width: 100%;
}

.fixed-table-container {
  border: 0.5px solid #dee2e6;
}
.fixed-table-header {
  border-bottom: 0.5px solid #dee2e6;
}
.fixed-table-footer {
  border-top: 0.5px solid #dee2e6;
}

.fixed-table-border {
  height: auto;
}
.fixed-table-border {
  width: 100% !important;
  height: auto !important;
}

.btn.btn-secondary {
  background: transparent;
  color: black;
  border: none;
  /* border-radius: 2rem; */
}
.page-item.page-first-separator .page-link,
.page-item.page-last-separator .page-link {
  border: none;
}
/* .bootstrap-table .fixed-table-pagination>.pagination-detail .page-list {
    display: none;
} */
.pagination-detail .btn {
  font-size: 0.875rem;
}
.bootstrap-table .fixed-table-container .table thead th .desc {
  /* background-image: url(../assets/table/sort-down.svg) !important; */
}
.bootstrap-table .fixed-table-container .table thead th .asc {
  /* background-image: url(../assets/table/sort-up.svg) !important; */
}
.bootstrap-table .fixed-table-container .table thead th .both {
  /* background-image: none; */
}
.bootstrap-table .fixed-table-container .table thead th .both:hover {
  /* background-image: url(../assets/table/sort-down.svg); */
}
.pagination-info {
  font-weight: 300;
}
.bootstrap-table th .both {
  /* font-weight: 400 !important; */
}
.table-bordered {
  border: none;
}
.fixed-table-pagination {
  float: right;
  display: flex;
  gap: 1rem;
  height: 48px;
  font-size: .9rem !important;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.disabled,
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
  color: rgb(244, 232, 232);
}
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-nav .nav-link:hover {
  color: white;
}
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
  color: white;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
  color: white;
}
.nav-link.dropdown-toggle:hover {
  color: var(--fh-color-primary);
}

div.dropdown-multicol {
  width: 30em;
}
div.dropdown-row > a.dropdown-item {
  display: inline-block;
  width: 32%;
}

/* Columns */
div.dropdown-multicol2 {
  width: 30em;
}
div.dropdown-multicol2 > div.dropdown-col {
  display: inline-block;
  width: 32%;
}
.detail-view {
  /* background-color: #f9f9f9; */
}
.detail-view > td {
  padding: 0 !important;
}
.detail-view * {
  background-color: unset;
}
.w-100vw {
  max-width: 100vw;
}
tr.detail-view:hover,
.table-bg {
  background-color: white;
}
.table-content {
  padding: 1rem 3.225rem;
  background: white;
  font-weight: 300;
}
.table-content .content {
  max-width: calc(100vw - 8rem);
}
.table-content .content .tab-pane {
  padding: 1rem 0rem;
  /* border-top: 1px var(--fh-color-primary) solid; */
}

.nav-link,
.nav-underline .nav-link, 
.nav-underline .show>.nav-link {
  color: #333;
}
.nav-link:hover,
.nav-underline,
.nav-underline .nav-link.active, 
.nav-underline .nav-link:hover, 
.nav-underline .show>.nav-link {
  border-bottom-color: var(--fh-color-primary);
  border-width: 1px;
  color: var(--fh-color-primary);
  font-weight: 300;
}
.dropdown-item {
  padding-top: .625rem;
  padding-bottom: .625rem ;
}
h5, .offcanvas-title,
h1, .modal-title {
  font-weight: 400;
}
.label-link {
  color: #333;
  font-weight: 300;
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: 0.1rem;
  text-decoration-thickness: 0.055rem;
}
.label-link:hover {
  color: var(--fh-color-primary);
}
.fixed-table-toolbar .columns-right,
.fixed-table-toolbar .search  {
  margin-top: 1rem;
}
.form-check-input:checked {
  background-color: var(--fh-color-primary);
  border-color: var(--fh-color-primary);
}
.form-check-input:focus,
.form-select:focus,
.form-control:focus {
  box-shadow: none;
  border-color: var(--fh-color-primary);
}
.modal {
  --bs-modal-border-radius: 20px;
}

label,
.modal-title,
tr th .th-inner {
    /* font-weight: 500 !important; */
}

.bootstrap-table .fixed-table-container .table {
  border-radius: var(--fh-border-radius);
}

.bootstrap-table .fixed-table-container .table thead {
  background-color: var(--fh-color-bg-primary) !important;
  /* font-weight: 350 !important; */
  /* border-top: 1px solid rgba(0, 0, 0, 0.05); */
  
  /* text-transform: uppercase; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);

}
.bootstrap-table .fixed-table-container .table thead th * {
  color: var(--fh-color-text-secondary)
}
.bootstrap-table .fixed-table-container .table tbody tr {
  border-bottom: .2px solid rgba(0, 0, 0, 0.05);
  /* border-radius: var(--fh-border-radius); */

}
.bootstrap-table .fixed-table-container .fixed-table-body {
  border-radius: var(--fh-border-radius);
  border: var(--fh-border1);
}
td .fixed-table-body {
  border: none !important;
}

.dt-buttons {
  margin-top: 20px;
}


.table>:not(caption)>*>*,
td .badge {
    line-height: 130%;
    font-size: 1rem;
    font-weight: 400;
}

thead *,
tbody td {
    background-color: transparent !important;
}

table thead * {
  font-size: 0.9rem !important;
}

tbody * {
  font-size: 0.9rem !important;
  color: var(--fh-color-text-primary)
}

table {
    background-color: var(--fh-color-bg-secondary);
}

table th * {
  /* font-weight: bolder !important; */
  /* background-color: var(--fh-color-bg-primary) !important; */
  font-weight: bold;
  border-radius: 0 !important;
}

table thead tr {
  border-radius: var(--fh-border-radius);
  box-shadow: var(--fh-shadow);
  overflow: hidden;
}

.table tbody tr:hover{
  /* cursor: text; */
  /* background-color: #f6f6f6 !important; */
}
.table tbody tr:hover td {
   /* background-color: #f6f6f6 !important; */
}

.main-table .bootstrap-table-container {
  padding: 0 .5rem;
  /* margin-top: 1rem; */
  /* padding: 1rem !important; */
  background-color: var(--fh-color-bg-secondary);
  border-radius: var(--fh-border-radius);
  height: 100px;
  flex-grow: 1;
  /* min-height: 400px; */
}

.main-table .bootstrap-table {
  height: 100%;
}
.main-table .bootstrap-table table thead{
  position: sticky;
  top: 0;
}
.fixed-table-container {
  border: none !important;
  background-color: unset;
  height: calc(100% - 72px);
  overflow: hidden;
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
  z-index: 10;
}

.clearfix {
  /* height: fit-content;
  min-height: 50px; */
  display: none;
}


/* override bootstrap style */
* {
  --bs-table-hover-bg: #f6f6f6;
  /* --bs-table-bg: transparent !important; */
}

.bs-checkbox {
  line-height: 10px !important;
}

table i {
  color: var(--fh-color-text-primary) !important;
}

/* Đóng băng cột đầu tiên */
#my-table-template th:first-child, 
#my-table-template td:first-child {
  position: sticky;
  left: 0px;
  background-color: var(--fh-color-bg-primary) !important; 
  z-index: 0;
}
#my-table-template td:first-child {
  background-color: var(--fh-color-bg-secondary) !important; 
}
.bootstrap-table thead {
  z-index: 1;
}

/* Đóng băng cột thứ hai */
#my-table-template th:nth-child(2), 
#my-table-template td:nth-child(2) {
  position: sticky;
  left: 46px; 
  background-color: var(--fh-color-bg-primary) !important; 
}
#my-table-template td:nth-child(2) {
  background-color: var(--fh-color-bg-secondary) !important; 
}

.all-input {
  max-width: auto;
}
.date-input {
  max-width: 155px;
}
.date-input .mb-0 {
  padding-left: 4px;
}
.datetime-input {
  max-width: 200px;
}
.datetime-input .mb-0 {
  padding-left: 4px;
}
.money-input {
  min-width: 153px;
}
.money-input .mb-0 {
  padding-right: 4px;
}
.money-input input {
  text-align: right;
}
.number-input {
  min-width: 100px;
}
.number-input .mb-0 {
  padding-right: 4px;
}
.number-input input {
  text-align: right;
}
.qty-input {
  min-width: 190px;
}
.qty-input input {
  text-align: center;
}
.text-input {
  min-width: 300px;
}

.input-group-right input {
  padding: 0 !important;
  margin: 0 !important;
  
  text-align: right !important;
}
.input-group-right input[readonly="readonly"] {
  border: none !important;
}
.input-group-right input::-ms-clear { display: none; width : 0; height: 0; }
.input-group-right input::-ms-reveal { display: none; width : 0; height: 0; }
.input-group-right input::-webkit-search-decoration,
.input-group-right input::-webkit-search-cancel-button,
.input-group-right input::-webkit-search-results-button,
.input-group-right input::-webkit-search-results-decoration { display: none; }

.bootstrap-table input::-ms-clear { display: none; width : 0; height: 0; }
.bootstrap-table input::-ms-reveal { display: none; width : 0; height: 0; }
.bootstrap-table input::-webkit-search-decoration,
.bootstrap-table input::-webkit-search-cancel-button,
.bootstrap-table input::-webkit-search-results-button,
.bootstrap-table input::-webkit-search-results-decoration { display: none; }

.sys-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sys-actions:focus-within {
  outline: none;
  box-shadow: none;
}


.bootstrap-table .detail-icon i {
  font-size: 1.5rem !important; 
}

.main-table-detail-button, .my-detail-button {
  height: 30px;
  width: 30px;
  background-color: #ededed;
  border-radius: 50%;
  cursor: pointer;
  border: none;

}
.qrcode__icon {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.highlight-row * {
  background-color: var(--fh-color-bg-tertiary) !important;
  font-weight: bolder !important;
}
.grouped-row * {
  background-color: #f1fbfa !important;
  /* font-weight: bolder !important; */
}
.grouped-row:hover * {
  background-color: unset !important;
}
.my-drag-button:hover {
  cursor: grab;
  transform: translateX(2px);
}

.table-cell__textarea {
  min-width: 200px;
  min-height: 80px !important;
}
.table-cell__textarea-container, .table-cell__file {
  min-width: 250px;
}

.bootstrap-table .fixed-table-container .table thead th .th-inner {
  padding: .75rem 0;
}