body {
  background-color: #ffffff;
}
/* 瀑布流列的寬度設定 */
.ab-waterfall-col {
  width: 20%;
  padding: 8px;
  box-sizing: border-box;
}
/* 當螢幕小於 768px 時縮小列的寬度 */
@media (max-width: 768px) {
  .ab-waterfall-col {
    width: 33%;
  }
}
/* 當螢幕小於 576px 時縮小列的寬度 */
@media (max-width: 576px) {
  .ab-waterfall-col {
    width: 50%;
  }
}

.ab-logo-wrapper {
  width: 154px; /* 自訂寬度 */
  height: auto; /* 讓高度根據寬度自動縮放 */
}

.collapse .navbar-collapse {
  justify-content: flex-end;
}

/* 大頭貼 */
.ab-avatar-container {
  width: 50px; /* 調整容器的寬度和高度以符合您的需求 */
  height: 50px;
  border-radius: 50%; /* 將容器設定為圓形 */
  overflow: hidden; /* 隱藏溢出的部分，實現圓形效果 */
  background-color: #f1f1f1; /* 可選:如果圖片為透明背景，您可以設定一個背景色以保持一致性 */
}

.ab-avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持圖片填滿容器而不變形 */
  object-position: center center; /* 可選:如果需要自定義圖片在容器中的位置，可以調整這個屬性的值 */
}

.dropdown-menu.show {
  border-radius: 1rem;
}

/* 首頁瀑布流設定頭貼一定不會被擠到變形 */
.ab-card-selfie-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f1f1f1;
  /* 設定頭貼一定不會被擠到變形 */
  flex-shrink: 0;
}

.ab-card-selfie-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持圖片填滿容器而不變形 */
  object-position: center center; /* 可選:如果需要自定義圖片在容器中的位置，可以調整這個屬性的值 */
}

.ab-tag {
  padding: 4px 8px;
  background-color: var(--main-color);
  border-radius: 0.25rem;
  color: #ffffff;
}

/* .ab-card-text-ellipsis {
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis; 
} */

/* 自訂大頭貼圖片大小為 40px x 40px，保持圓形 */
.ab-card-avatar {
  width: 40px;
  height: 40px;
}

/* 上傳照片  */
.preview-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 200px; /* 設置最大寬度來控制在一行內排列 */
}

/* 預覽照片設定 */
.square {
  position: relative;
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 1rem;
}

.preview-row img {
  /* width: 100%; */
  /* height: 100%; */
  object-fit: cover;
  object-position: center center;
}

.preview-row {
  margin-top: 1rem;
}

/* form-group設定 */
.form-group label,
.ab-min-width {
  min-width: 100px; /* 調整寬度的值，根據需要自行調整 */
}

.ab-btn-minwidth {
  min-width: 80px;
}

/* 所有input在768px以下時100%顯示 */
@media (max-width: 768px) {
  .form-group {
    width: 100% !important;
  }
}

.form-group {
  word-break: break-all; /* 在任意字元處換行，以適應容器寬度 */
}
.form-group-h {
  height: 100px;
}

.ab-upload-max-pic-size {
  /* max-width: 800px; */
  /* height: 400px; */
  /* overflow: hidden; */
}

.ab-upload-max-pic-size img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

/* project頂部的icon */
.large-icon {
  font-size: 28px;
}

/* .ab-max-costing-w{
  width: 300px;
} */

/* 
我的專案帳務資訊 */
@media (max-width: 767px) {
  /* 使用适当的断点 */
  .table-responsive {
    overflow-x: auto; /* 横向滚动，以显示溢出内容 */
  }
  .table th,
  .table td {
    white-space: nowrap; /* 防止文字换行 */
    min-width: 100px; /* 设置最小宽度 */
  }
}

/* ------ */

/* search bar-搜尋按鈕的圓形外觀 */
.circle-btn-40 {
  width: 40px; /* 設定寬度和高度相同，使其成為圓形 */
  height: 40px;
  padding: 0; /* 去除內部填充 */
  border-radius: 50%; /* 圓形的邊框半徑 */
}

/* search bar-搜尋按鈕的圓形外觀 */
.circle-btn-30 {
  width: 30px; /* 設定寬度和高度相同，使其成為圓形 */
  height: 30px;
  padding: 0; /* 去除內部填充 */
  border-radius: 50%; /* 圓形的邊框半徑 */
}

/* data table自定義樣式 左上角顯示框 */
.dataTables_wrapper div.dataTables_length select {
  width: 60px !important;
}

.ab-w-10 {
  width: 100px;
}
.ab-w-15 {
  width: 150px;
}
.ab-w-22 {
  width: 220px;
}

/* 個人資料 */
.ab-selfie-size {
  max-width: 250px !important; /* 設定最大寬度，你可以根據需要調整 */
  max-height: 250px !important; /* 設定最大高度，你可以根據需要調整 */
  overflow: hidden !important;
}

.ab-selfie-size img {
  object-fit: contain;
  object-position: center;
}

/* 分析報表 */
.chart-size {
  max-width: 500px;
  max-height: 500px;
}

/* log in page */
.login-wrapper form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

.login-wrapper img {
  position: absolute;
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

@media (max-width: 576px) {
  /* 使用适当的断点 */
  .login-wrapper form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
  }
}

.ab-input-width {
  width: 400px;
}
.selected {
  background-color: #6c757d !important;
  color: #ffffff !important;
}

.max-height-100 {
  max-height: 100px;
}

/* abbie revised 3/15*/
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: rgb(0, 0, 0);
  font-weight: bold;
}

.dataTables_info {
  display: none;
}

/* 隐藏筛选图标 */
.dataTables_filter {
  display: none !important;
}

.ab-border-end {
  border-right: 1px solid;
}
.ab-border-start {
  border-left: 1px solid;
}

@media (max-width: 768px) {
  .ab-border-end,
  .ab-border-start {
    border: none !important;
  }
}

/* nav -後台管理*/
.dropdown-submenu {
  position: relative;
}

/* .dropdown-submenu > .dropdown-menu {
  top: 0;
 right: 100%;
  margin-top: -1px;
} */

/* abbie revise 12/27 */
/* 手機版（預設設定） */
.dropdown-submenu > .dropdown-menu {
  top: 0;
  right: -50%;
  margin-top: -1px;
}

/* 桌機版（螢幕寬度大於等於 768px 時套用） */
@media (min-width: 768px) {
  .dropdown-submenu > .dropdown-menu {
    margin-top: 40px;
  }
}

.dropdown-submenu .dropdown-menu.show {
  display: block;
}

.dropdown-menu {
  min-width: 1.5rem !important; /* 使下拉選單寬度與按鈕一致 */
}

/* autocomplete */

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.ui-autocomplete > li > div {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  cursor: pointer;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* 1/7 add */
.label-width-custom {
  max-width: 12.2% !important;
}

/* 手機版樣式 */
@media (max-width: 500px) {
  .label-width-custom {
    max-width: none;
  }
}

/* for https://ideadepots.com.tw/ideaDepots-add -modal 1/16-*/
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 550px;
    margin: 1.75rem auto;
  }
}

/* .projectNumber:hover .text-dark,
.projectNumber:hover .text-secondary {
  color: #ffffff !important;
}

.selected {
  background-color: #6c757d !important;
  color: #ffffff !important;
} */

.projectNumber:not(:last-child)::after {
  content: "|";
  color: #6c757d;
  margin: 0 0.5rem;
}