/* common */
body { background: linear-gradient(to left, #00dbde, #505cfd); }
caption {caption-side:top; text-align: center;color: #333;font-size: 20px}
.nav.nav-pills {border-bottom:1px dotted #ccc}
.nav.nav-pills li {margin-right: 10px;}
.nav.nav-pills li a {text-decoration: none}
.content-area h1 {color:#17a2b8!important;margin: 1em 0}
.content-area, .upload-content {background-color:#fdfdfd;margin: 30px 0;padding: 15px; min-height: 350px}


/* header */
/* .logo {margin: 25px auto 30px} */
.logo img {margin: 25px auto}
.service-title {color:#fff}

/* common section */
.loading-wrap,.content-wrap {text-align:center}
.content-wrap,.content-area {display:none}
.loading-wrap {color:#444;margin:60px 0;background-color:#fff;padding:100px 0}
#sponsor-levels,#upload-file-section,#uploading-section,#finish-upload-section,#signIn {display:none}
.container {max-width: 1024px;margin:0 auto;text-align:center}
.now {height: 25px;}

/* section */

/** SignIn **/
#signIn {color:#333;margin: 0 auto;}
.form-login h2 {margin: 30px 0 15px}
.form-login h4 {font-size: 20px}


/** rank **/
.main {max-width: 1024px;text-align: center;margin: 0 auto;margin-top: 30px}
.main .card-header {background-color: #fff}
.warn-label {background-color:#f5f5f5;padding: 3px 0;margin: 15px 5%; border-radius: 10px;}



/** upload **/
.tip {margin: 10px}
#fileList {text-align: left; margin: 15px auto}
#fileList li {list-style-type: none;border-bottom: 1px dotted #ccc;padding-bottom: 5px;}
#waiting h5 {display:none;font-size: 16px;margin-top: 10px}
#reset-pdf-btn {display:none}

/** result **/
#continue-upload-btn {margin-right: 10px}
#finish-upload-section {padding: 20px 0}

/** activation **/
#passwordSetting {display:none}
#passwordSetting h5 {font-size:16px; color: #444; margin-top: 18px;}

/** pannel **/
.linkset .btn-lg {width: 300px}


/**  uploadlist **/
.table-content table {width: 100%}
#rank-tab-set a {margin-right:10px}

/** customer **/
#customer-meno {margin-top: 40px; text-align: left}


#activation .content-area,#passwordSetting .content-area {display:block}

/* status list */
#status-list {width: 1200px !important;max-width: 1200px}
#status-list .clock {
  height:50px;
  line-height: 50px;
  font-size: 2em;
  border-radius: 0;
  box-shadow: 0 0 3px #666;
  background-color: #fff;
  color: #333;
  text-shadow: none
}

.infobar { position: absolute; right: 10px; top: 0; }
.userInfo {display:inline-block;margin-right: 10px;color:#fff;margin-right: 10px}
.user-email {margin-right: 5px}
.status-link {display:inline-block;color: #fff;background-color: #dc3545;font-size: 1.2em;border-bottom-right-radius: 10px;border-bottom-left-radius:10px;padding: 10px;}
.status-link a {color:#fff}

.not-allowed {cursor: not-allowed !important;}


.copyto { font-size: 9px; padding-left: 10px; }

#uploadvendor-section #content .btn {margin-right:20px}
#vendor-info-tbl {width: 90%; margin: 20px auto;text-align:left}
#vendor-info-tbl td { text-align: left;padding: 4px;}

.upload-notice {text-align: left; margin: 40px}

.env-title {color: #fff; background-color: #dc3545; border-radius: 10px; padding: 5px; font-size: 16px; font-weight: 600; width: 400px; margin: 5px auto 15px; }

#vendor-active,#vendor-inactive {margin:5px auto}

#upload-item-list h2 {margin-top: 60px}

.click-tab-to-show { margin-top: 50px; color: #999; }

#upload-item-list .table-content {margin-top: 20px}

#content h2#no-data-label {margin: 40px 0}
.load-more-section #load-more  {display: none}

.table-content {
  position: relative; /* 讓子元素 absolute 相對此定位 */
}

/* 第一個 td 提供空間與定位 */
tr.recnet-upload td:first-child {
  position: relative;
}

/* tag 主體 (::before) */
tr.recnet-upload td:first-child::before {
  content: "晚投標";
  position: absolute;
  left: -70px; /* 從 td 左邊開始，浮在表格外；調 -60 到 -80px 看效果 */
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffc107;
  color: white;
  padding: 2px 25px 2px 10px; /* 右側 padding 加大，給尾巴接縫 */
  border-radius: 6px 0 0 6px; /* 左圓右直，接尾巴 */
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 加陰影，讓 tag 更立體 */
}

/* 三角尾巴 (::after)：用 calc 動態接在 tag 右邊 */
tr.recnet-upload td:first-child::after {
  content: '';
  position: absolute;
  left: calc(-70px + 25px); /* 動態：tag 的 left (-70px) + 右 padding (25px)，讓尾巴正好接右緣 */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent; /* 上邊透明，調大小 10-15px */
  border-bottom: 12px solid transparent; /* 下邊透明 */
  border-left: 12px solid #ff6b6b; /* 左色塊，形成右指向三角 */
  z-index: 9; /* 低於 tag，讓它在後 */
  filter: drop-shadow(1px 0 1px rgba(0,0,0,0.1)); /* 加輕微陰影，避免邊緣模糊 */
}


.tb-filter {margin-top: 15px}
.tb-filter label {margin: 0 5px;font-size: 14px; font-weight: 600}
.tb-filter button {margin: 0 5px}

/* 晚投標標籤樣式（帶三角形尖尾） */
.table-content {
  overflow: visible;
}

.table-content table {
  position: relative;
}

td.late-upload {
  position: relative;
}

td.late-upload::before {
  content: '晚投標';
  position: absolute;
  left: -75px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #dc3545, #ff6b6b);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 25px 2px 10px;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  white-space: nowrap;
  z-index: 10;
}

td.late-upload::after {
  content: '';
  position: absolute;
  left: calc(-75px + 60px);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 11px solid #ff6b6b;
  z-index: 9;
}