/* 字體 */
	body { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, 微軟正黑體 !important; }

	/* 字距 */
	body, body button { letter-spacing: 1px; }

	body.登入{
		background-image: url("/images/background.jpg");
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position-x: right;
		background-position-y: top;
		background-size: cover;
	}

	body.登入.測試環境{
		background-image: url("/images/background(灰階).png");
	}

	body.測試環境 .content-wrapper{
		background-image: url("/images/供應商管理平台.png");
		background-repeat: repeat;
		background-size: 80px;
	}

	/***********************************************************************/

	/* 頁首 */
	.wrapper .main-header, .main-header .navbar .dropdown-menu {
		box-shadow: 0 5px 5px -3px rgba(88, 80, 80, 0.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
	}
	.wrapper .main-header {
		background-color: #FB8A04;
		border-bottom: 0;
	}
	.wrapper .main-header .nav-link { color: #FFFFFF; }

	/* 頁首 功能選單 */
	.wrapper .main-header .dropdown-menu .dropdown-item { color: #FB8A04; }
	.wrapper .main-header .dropdown-menu .dropdown-item:hover { color: #16181b !important; }
	.wrapper .main-header .dropdown-item.active,
	.wrapper .main-header .dropdown-item:active { background-color: #e9ecef; }

	/***********************************************************************/

	/* 左側選單 */
	.wrapper .main-sidebar { background-color: #353535; }
	.wrapper .main-sidebar .nav-sidebar { padding-bottom: 100px; }
	/* 左側選單 文字 寬高 */
	.wrapper .main-sidebar .nav-sidebar .nav-link { width: 250px; height: 40px; line-height: 40px; overflow: hidden; }
	/* 左側選單 文字 平均散開 */
	.wrapper .main-sidebar .nav-sidebar .nav-link > div { text-align: justify; } /* justify 文字向兩側對齊，但對最後一行無效，利用 after */
	.wrapper .main-sidebar .nav-sidebar .nav-link > div::after { width: 100%; content: ''; display: inline-block; }
	/* 左側選單 待辦筆數 badge 顏色 */
	.wrapper .main-sidebar .nav-sidebar .level-1 .badge-待辦筆數 { color: #FFFFFF; background-color: #FB8A04; }
	.wrapper .main-sidebar .nav-sidebar .level-2 .badge-待辦筆數 { color: #FFFFFF; background-color: #AA7700; }
	/* 左側選單 文字 縮減寬度  */
	.wrapper .main-sidebar .nav-sidebar .nav-link.level-1 { padding: 0 85px 0 25px; }
	.wrapper .main-sidebar .nav-sidebar .nav-link.level-2 { padding: 0 95px 0 35px; }

	/***********************************************************************/

	/* 主內容 */
	.wrapper .content-wrapper { background-color: #ecf0f5; }
	.wrapper .content-wrapper .content { padding-bottom: .5rem; }

	/* 主內容 超連結 */
	.wrapper .content-wrapper a:not(.btn) { color: #FB8A04; }
	.wrapper .content-wrapper a:not(.btn):hover { color: #16181b !important; }

	/* 主內容 card 陰影效果 */
	.wrapper .content-wrapper .card {
		box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
	}

	/* 主內容 card */
	.wrapper .content-wrapper .card-lcp.card-outline { border-top: 3px solid #FB8A04; } /* 上邊線顏色 */
	.wrapper .content-wrapper .card-lcp:not(.card-outline) > .card-header { color: #ffffff; background-color: #FB8A04; }
	.wrapper .content-wrapper .card-lcp:not(.card-outline) > .card-header .btn-tool { color: #ffffff; }
	.wrapper .content-wrapper .card-custom.card-outline { border-top: 3px solid #FB8A04; } /* 上邊線顏色 */
	.wrapper .content-wrapper .card-custom:not(.card-outline) > .card-header { color: #ffffff; background-color: #FB8A04; }
	.wrapper .content-wrapper .card-custom:not(.card-outline) > .card-header .btn-tool { color: #ffffff; }

	/* 主內容 card 查詢條件區塊 */
	.wrapper .content-wrapper .card-search { padding-bottom: 0.5rem; }

	/* 主內容 按鈕顏色 */
	.wrapper .content-wrapper .btn:hover { background-color: #e9ecef; color: #16181b !important; }
	.wrapper .content-wrapper .btn-lcp { background-color: #f8f9fa; border-color: #ddd; color: #FB8A04; }
	.wrapper .content-wrapper .btn-custom { background-color: #f8f9fa; border-color: #ddd; color: #FB8A04; }

	/* 主內容 文字顏色 */
	.wrapper .content-wrapper .text-lcp { color: #FB8A04; }
	.wrapper .content-wrapper .text-custom { color: #FB8A04; }

	/* 主內容 背景顏色 */
	.wrapper .content-wrapper .bg-lcp { background-color: #FB8A04; color: #FFFFFF !important; }
	.wrapper .content-wrapper .bg-custom { background-color: #FB8A04; color: #FFFFFF !important; }

	/* 主內容 清除(按鈕) */
	.wrapper .content-wrapper .btn-clear {
		/* color: #495057 !important; */
		background-color: #e9ecef;
		border-color: #ced4da;
	}

	/* 主內容 必填 Label */
	.wrapper .content-wrapper .必填 { padding-left: 10px; border-left: 3px solid #FB8A04; }

	/* 主內容 明細表格 功能選單 */
	.wrapper .content-wrapper .dropdown-menu .dropdown-item { color: #FB8A04; cursor: pointer; }
	.wrapper .content-wrapper .dropdown-menu .dropdown-item:hover { color: #16181b !important; }
	.wrapper .content-wrapper .dropdown-menu .dropdown-item.active,
	.wrapper .content-wrapper .dropdown-menu .dropdown-item:active { background-color: #FB8A04; color: #FFFFFF !important; }

	/* 主內容 明細表格 按鈕組 */
	.wrapper .content-wrapper .btn-buttons { text-align: right!important; }
	.wrapper .content-wrapper .btn-buttons .btn:not(:first-child){ margin-left: 3px; }

	/* 主內容 錯誤提示顏色 */
	.wrapper .content-wrapper .help-block { color: #dd2c00 !important; }

	/* 主內容 唯讀文字底色 */
	.wrapper .content-wrapper .form-control.readonly { background-color: #e9ecef; }

	/***********************************************************************/

	/* 主內容 Yii 表格 分頁控制 Pager */
	.wrapper .content-wrapper .pager a { border-color: #FB8A04; color: #FB8A04; font-size: 1rem; }
	.wrapper .content-wrapper .pager a:hover { border-color: #16181b !important; }
	.wrapper .content-wrapper .pager .selected a { background-color: #FB8A04; color: #FFFFFF !important; }

	/***********************************************************************/

	/* 主內容 jQuery 表格 DataTable */
    .wrapper .content-wrapper .dataTables_wrapper .pagination .active a { background-color: #FB8A04; color: #FFFFFF !important; }
    .wrapper .content-wrapper .dataTables_wrapper .pagination .active a:hover { color: #16181b !important; }
	.wrapper .content-wrapper .dataTables_wrapper .pagination .page-item.disabled { cursor: not-allowed; opacity: .65; box-shadow: none; }
    .wrapper .content-wrapper .dataTables_wrapper .dataTables_empty { text-align: left; font-style: italic; }

	/***********************************************************************/

	/* 主內容 頁籤 Tabs */
	.wrapper .content-wrapper .nav-tabs .nav-link.active { color: #495057; }
	.wrapper .content-wrapper .nav-tabs .nav-link.disabled { color: #6c757d; }

	/***********************************************************************/

	/* 主內容 開關按紐 switch */
	.wrapper .content-wrapper .custom-switch .custom-control-label::before { /* 底部大小位置 */
		width: 32px;
		border-radius: 10px;
		top: 2px;
		height: 20px;
	}
	.wrapper .content-wrapper .custom-switch .custom-control-label::after { /* 圓型大小位置 */
		top: calc(2px + 2px);
		width: calc(20px - 4px);
		height: calc(20px - 4px);
	}
	.wrapper .content-wrapper .custom-switch .custom-control-input:checked~.custom-control-label::before { /* 選中底部顏色 */
		border-color: #FB8A04;
		background-color: #FB8A04;
	}
	.wrapper .content-wrapper .custom-switch .custom-control-input:checked~.custom-control-label::after { /* 選中圓型顏色 */
		background-color: #fdfdfd;
	}

	/***********************************************************************/

	/* 主內容 複選 checkbox */
	.wrapper .content-wrapper .custom-checkbox .custom-control-label::after { /* 底部大小位置 */
		width: 18px;
		height: 18px;
		top: 1px;
		left: -25px;
	}
	.wrapper .content-wrapper .custom-checkbox .custom-control-label::before { /* 勾勾大小位置 */
		width: 18px;
		height: 18px;
		top: 1px;
		left: -25px;
	}
	.wrapper .content-wrapper .custom-checkbox .custom-control-input:checked~.custom-control-label::before { /* 選中底部顏色 */
		background-color: #FB8A04;
		border-color: #FB8A04;
	}
	.wrapper .content-wrapper .custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before { /* 選中底部顏色(disabled) */
		opacity: 0.5;
	}

	/***********************************************************************/

	/* 浮動選單 */
	.kc_fab_wrapper button { background: #FB8A04; }
	/* 浮動選單 主按鈕 */
	.kc_fab_wrapper .kc_fab_main_btn { bottom: 50px; font-size: 38px; }
	.kc_fab_wrapper .kc_fab_main_btn .fa-cog { line-height: 60px; display: block; }
	/* 浮動選單 子按鈕 */
	.kc_fab_wrapper .sub_fab_btns_wrapper { bottom: 129px; }
	.kc_fab_wrapper .sub_fab_btns_wrapper button[data-link-title]:hover:after { font-size: 16px; min-width: 200px; }

	/***********************************************************************/

	/* 頁尾 超連結 */
	.wrapper .main-footer a { color: #FB8A04 !important; }

	/***********************************************************************/
	/***********************************************************************/
	/***********************************************************************/

	/* 文字過多 省略... */
	.ellipsis {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		white-space: normal;
		text-align: left;
	}

	/* 小圖示 */
	i.fa-word{
		width: 16px;
		text-align: center;
	}

	/* 依版面大小，顯示隱藏 */
	.visible-sm-block,
	.visible-sm-inline,
	.visible-sm-inline-block,
	.visible-md-block,
	.visible-md-inline,
	.visible-md-inline-block,
	.visible-lg-block,
	.visible-lg-inline,
	.visible-lg-inline-block,
	.visible-xl-block,
	.visible-xl-inline,
	.visible-xl-inline-block {
		display: none !important;
	}

	/* 建議清單(邊打邊查) */
    .ui-autocomplete {
        max-height: 200px;     /* 最大高度限制 */
        overflow-y: auto;      /* 超出時顯示垂直捲軸 */
        overflow-x: hidden;    /* 水平捲軸隱藏（避免橫向跑版） */
        z-index: 9999 !important; /* 確保在 modal 等元件上層 */
    }

	@media (max-width: 767px) {
		.hidden-sm {
			display: none !important;
		}
		.visible-sm-inline-block {
			display: inline-block !important;
		}
		.visible-sm-inline {
			display: inline !important;
		}
		.visible-sm-block {
			display: block !important;
		}
		.visible-sm {
			display: block !important;
		}
	}
	@media (min-width: 768px) and (max-width: 991px) {
		.hidden-md {
			display: none !important;
		}
		.visible-md-inline-block {
			display: inline-block !important;
		}
		.visible-md-inline {
			display: inline !important;
		}
		.visible-md-block {
			display: block !important;
		}
		.visible-md {
			display: block !important;
		}
	}
	@media (min-width: 992px) and (max-width: 1199px) {
		.hidden-lg {
			display: none !important;
		}
		.visible-lg-inline-block {
			display: inline-block !important;
		}
		.visible-lg-inline {
			display: inline !important;
		}
		.visible-lg-block {
			display: block !important;
		}
		.visible-lg {
			display: block !important;
		}
	}
	@media (min-width: 1200px) {
		.hidden-xl {
			display: none !important;
		}
		.visible-xl-inline-block {
			display: inline-block !important;
		}
		.visible-xl-inline {
			display: inline !important;
		}
		.visible-xl-block {
			display: block !important;
		}
		.visible-xl {
			display: block !important;
		}
	}