/* ===========================================================

結構說明 - bootstrap-select (客製滿版樣式):

 div.bootstrap-select              → 最外層 wrapper，包住整個 select 組件
 ├─ button.dropdown-toggle         → 1. 可點擊式方框（實作 <select> 點擊框）
 │   └─ div.filter-option          →    可點擊式方框顯示文字區（顯示目前選取的項目）
 │
 └─ div.dropdown-menu              → 2. 下拉式選單區（客製為滿版選單，另此div同時為遮罩層）
     ├─ div.popover-header         →    下拉式選單大標題
     ├─ (div.bs-searchbox)         →    (搜尋框)
     └─ div.inner                  →    選項清單容器（可垂直捲動）
         └─ ul.dropdown-menu       →    選項清單（ul 結構）
            ├─ li.dropdown-header  →    分類小標題（對應 <optgroup> ）
            ├─ li                  →    單一選項（對應 <option> ）
            │  └─ a.dropdown-item.opt
            │     └─ span.text
            └─ li.dropdown-divider →    分隔線（選項群組間視覺區隔）

   =========================================================== */



/* ================================
   div.bootstrap-select
   ================================ */

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100%;
}

.bootstrap-select.with-icon {
  width: 306px !important;
}

.custom-select.with-icon~img,
.bootstrap-select.with-icon~img {
  margin: 0 auto;
}

/* ================================
   button.dropdown-toggle
   ================================ */

.bootstrap-select>.dropdown-toggle {
  color: #464646;
  background-color: #f0faff;
  border-radius: 0px;
  padding: 0px 12px 0px;
  line-height: normal;
  height: 52px;
}

.bootstrap-select .dropdown-toggle:focus {
  outline: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder {
  color: #464646;
  background-color: #f0faff;
  border-radius: 0px;
  padding: 0px 12px 0px;
  line-height: normal;
  height: 52px;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder:hover,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active {
  color: #464646;
  background-color: #f0faff;
  border-radius: 0px;
  padding: 0px 12px 0px;
  line-height: normal;
  height: 52px;
}

.select-header~.dropdown-toggle {
  background-color: white !important;
  color: #208bb4 !important;
  border: 1px solid transparent !important;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
}

/* ================================
   div.filter-option 
   ================================ */

.bootstrap-select .dropdown-toggle .filter-option {
  line-height: 52px;
}

.header-select .dropdown-toggle .filter-option {
  line-height: 32px;
}

.filter-option-inner-inner span.top,
.filter-option-inner-inner span.down {
  margin-left: 0px !important;
}

/* ================================
   div.dropdown-menu
   ================================ */

/* 展開滿版選單時，背景之原畫面不允許捲動 */
body.disable-scroll {
  overflow: hidden !important;
  height: 100% !important; /* 避免 iOS 滾動穿透 */
}

/* 容器位置、長寬設定 */
div.dropdown-menu {
  /* 遮罩色 */
  background-color: rgba(0, 0, 0, 0.6);

  /* 移除 JS 動態 transform 定位 */
  transform: translate3d(0px, 0px, 0px) !important;

  /* 元素定位在視窗(viewport), 而非父元素, 不會隨頁面滾動而移動 */
  position: fixed !important;
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  z-index: 100;
  /* 遮罩不需padding,margin */
  padding-bottom: 0px;
  margin-bottom: 0px;
  height: 100% !important;
  /* bootstrap-select自動算下拉式選單max-height, min-height，因為客製為滿版，改為100% */
  max-height: none !important;
  min-height: 0 !important;
}

/*
div.dropdown-menu {
  position: fixed !important;
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  background-color: rgba(0, 0, 0, 0.6);
  transform: translate3d(0px, 0px, 0px) !important;
  align-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  background-attachment: scroll !important;
  z-index: 100;
}
*/

/* flex container設定 */
div.dropdown-menu.show {
  display: flex !important;
  flex-wrap: wrap;/* 換行 */
  align-content: flex-end;/* 每行置底，不撐開 */
}

/*
div.dropdown-menu.show {
  display: flex;
  padding-bottom: 0px;
  height: 100%;
  margin-bottom: 0px;
}
*/

/* flex-item格局設定 */
div.dropdown-menu div {
  flex: 1 1 100%;/* 一列一個，寬度 100% */
}

.popover-header {
  text-align: center;
  padding: 18px 15px;
  font-size: 1.33rem;
  background-color: #fff;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgba(70, 70, 70, 0.6);
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  z-index: 110;
}

/* popover大標題"x"按鈕 */
.popover-header .close {
  position: absolute;
  left: 20px;
  font-size: 40px;
  line-height: 35px;
  padding: 0;
  background-color: transparent;
  border: 0;
  appearance: none;
  opacity: .5;
  font-weight: 700;
}

.popover-header .submit {
  position: absolute;
  right: 15px;
}

div.dropdown-menu div.inner {
  /* bootstrap-select自動算下拉式選單選項清單max-height, min-height，因為我們客製為滿版，不限高 */
  max-height: none !important;
  min-height: 0 !important;
  z-index: 110;
}

/* ================================
   ul.dropdown-menu
   ================================ */

div.dropdown-menu div ul {
  /* 撐爆螢幕時改捲軸 */
  overflow-y: auto;

  /* 捲軸捲到最底時, 底部留白 */
  padding-bottom: 14px !important;
  margin-bottom: 0px !important;
}

/* 無搜尋框時，設高度上限，選項少則置底顯示，選項多則出現捲軸 */
div.dropdown-menu div ul.without-bs-searchbox {
  /* popover-header大標題高度73px */
  max-height: calc(100vh - 73px);
}

/* 有搜尋框時，無論選項多寡皆高度滿版，搜尋時才不會隨搜尋筆數變更高度 */
div.dropdown-menu div ul.with-bs-searchbox {
  /* popover-header大標題高度73px + 搜尋框66px */
  height: calc(100vh - 139px);
}

/*
div.dropdown-menu div ul {
  padding-bottom: 14px !important;
  max-height: calc(100vh - 73px );
  overflow: scroll;
}
*/

/*
.bootstrap-select .dropdown-menu.inner {
  background-attachment: scroll !important;
  margin-bottom: 0px !important;
  z-index: 115;
}
*/

/* ================================
   li
   li.dropdown-header
   li.dropdown-divider
   ================================ */

div.dropdown-menu div ul li {
  margin-left: 15px;
  padding-right: 15px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

div.dropdown-menu div ul li:last-child {
  border-bottom-width: 0px;
}

.dropdown-header {
  border: none !important;
  color: #208bb4 !important;
  font-size: 0.875rem !important;
  padding-bottom: 0px !important;
}

.dropdown-header span {
  color: inherit !important;
}

.dropdown-divider {
  display: none;
}

/*
.dropdown-divider {
  margin: 0px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  border: none !important;
}
*/

/* ================================
   a.dropdown-item.opt
   ================================ */

div.dropdown-menu div ul li a {
  padding: 14px 0px !important;
}

.bootstrap-select .dropdown-menu li a.opt {
  margin: 15px 0px 15px 5px;
}

.select-group div.dropdown-menu div ul li a {
  padding: 0px 0px !important;
}

.dropdown-item {
  padding: 0px !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: inherit;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: inherit !important;
  font-weight: bold;
}

/* 多選客製勾勾 */
a.selected:after {
  content: url(../image/icons_check.svg);
  position: absolute;
  right: 15px;
  top: calc(50% - 16px);
}

/* ================================
   span.bs-ok-default.check-mark (原生勾勾)
   span.text
   span.text span.top
   span.text span.down
   ================================ */

/* 不顯示多選原生勾勾 */
.bootstrap-select .bs-ok-default::after {
  display: none !important;
}

/* 原生勾勾樣式修改 */
/*
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  top: auto;
}
.bootstrap-select .bs-ok-default:after {
  width: 13px;
  height: 25px;
  border-width: 0 3px 3px 0;
  color: #208bb4;
}
*/

/* 被勾選的選項文字置左 */
.group .item .bs-ok-default.check-mark~span:nth-child(2) {
  text-align: left;
}

li.select-title span.text {
  font-size: 0.77rem !important;
  position: relative;
  left: -20px;
  display: block;
  margin-top: 13px;
  margin-bottom: 13px;
}

.group .item .dropdown-item span.text {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: 500;
  width: 90%;
}

.bootstrap-select.show-tick .dropdown-menu li a span.text {
  margin-right: 0px !important;
}

.select-header .dropdown-menu li a span.text {
  color: #208bb4 !important;
}

.bootstrap-select .dropdown-menu li a span.text {
  color: #505050;
}

/* ================================
	程式邏輯相關
   ================================ */

.dropdown.bootstrap-select.show .transfer_traflag{
  display: block;
}

.dropdown.bootstrap-select:not(.show) .transfer_traflag{
  display: none;
}