html, body {
  height: 100%;
  margin: 0;
}

.background-color{
	background-color: #fff;
}

input::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.3) !important; /* 讓字顏色變淡 */
}

.bootstrap-touchspin-up, .bootstrap-touchspin-down{
	height: 38px !important; 
}

#person-circle,#bar-chart{
	color: #54667a;
}		
#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#wrapper > .d-flex {
  flex: 1;
  display: flex;
}

#page-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
}

#content {
  flex-grow: 1;
}

#sidebar {
  width: 250px;
  flex-shrink: 0;
}

#sidebar .p-3 {
    width: 100%; /* 滿版 sidebar */
}

#side-left-menu .form-select {
	width: 100%;
}

.rpt_time{
	width: 180px; 
	flex-shrink: 0
}

.rpt_div{
	width: 100%;
}

.rpt_span{
	width: 40px; 
	flex-shrink: 0;
}

.rpt_a{
	flex: 0 0 auto;
}

.rpt_input{
	width: 130px; 
	flex: 0 0 auto;
}

.hide-item {
  display: inline-block !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 當 sidebar 收合時，用這個 class 隱藏文字但保留空間 */
#sidebar.collapsed .hide-item {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}

.btn-white-text {
  color: white;
  min-width: 100px;
}
.btn-white-text:hover {
  color: white !important;
}

.loginUser>a{
	margin-left: 0.45rem;
	color: #54667a; 
	display: block; 
	width: 100%;
}

.am_style{
	cursor: pointer; 
	padding-left: 2rem !important;
}

.flb15{
	flex-basis: 15%;
}

.flb20{
	flex-basis: 20%;
}

.search_align{
	align-items: end;
}

.csr-point{
	cursor: pointer;
}

.fitWidth-li{
	width: 219px !important;
}

#XrayImage_Name{
	display: none;
}
/* Hover 到 nav-item 時，顯示該項目內的 .hide-menu */
#sidebar.collapsed .nav-item:hover .hide-item,
#sidebar.collapsed .loginUser:hover .hide-item,
#sidebar.collapsed .autoLogout:hover .hide-item {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

#sidebar.collapsed {
  width: 85px; 
  z-index: 99999 !important;
}

#sidebar.collapsed .nav-item {
  width: 100%;
}

#sidebar.collapsed .nav-item:hover {
  outline: 1px solid red;
}

#sidebar.collapsed .nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#side-left-menu li a {
    color: #54667a;
    border-left: 0 solid #fff
}

#side-left-menu>li>a:hover {
    background: rgba(0, 0, 0, .03);
}
#side-left-menu>li>a:focus {
    background: transparent;
}
#side-left-menu>li>a.active {
    color: #96a2b4;
    font-weight: 500;
}

#menu_control, #LoginUser, 
#side-left-menu ul>li>a:hover,
#side-left-menu>li>a.active i {
    color: #54667a
}

#menu_control:hover{
	background-color:#f2f2f2 !important;
}

#user_management span, #group_management span, #lan_management span {
    position: absolute;
    left: 50px;
    white-space: nowrap; /* 防止換行 */
}

#group_management, #user_management, #lan_management{
	position: relative;
	width: 100%;
}

#group_management:hover, #user_management:hover, #lan_management:hover{
	background: #f2f2f2 !important;
	width: 219px !important;
}

#module_management span {
    white-space: nowrap; /* 防止換行 */
	z-index:9999 !important;
}

#module_management{
	width: 100%;
	z-index:9999 !important;
}

.li_module {
    position: relative;
}

/* 預設 collapse 的 submenu 隱藏 */
#sidebar.collapsed #allow_module {
    display: none;
    position: absolute;
    top: 50px;
    left: 25%;
    z-index: 1000;
    background: #f2f2f2;
    min-width: 148px;
    padding: 0.5rem;
}

/* 當 sidebar 有 collapsed，並 hover 到 .li_module 時，顯示 submenu */
#sidebar.collapsed .li_module:hover #allow_module {
    display: block !important;
}

#allow_module.collapsing {
	/*display: block !important;*/
	height: auto !important;
	overflow: hidden;
	transition: height 0.35s ease;
}

/* 展開後恢復正常 flex column */
#allow_module.collapse,
#allow_module.collapsing,
#allow_module.show {
	flex-direction: column;
}

#module-caret {
	display: inline-block;
	transition: transform 0.3s ease;
}

#module-arrow {
	display: inline-block;
	transition: transform 0.3s ease;
	margin-left: 4px;
	visibility: visible !important;
}

#lan_management::after {
	display: none !important;
}

#unit-label {
	display: inline-flex;
	align-items: center;
}

#unit-text {
	display: inline-block;
}

.rotate-down {
  transform: rotate(90deg);
}

.user-profile .user-pro-body .dropdown-menu {
    width: fit-content !important;
}

.autoLogout, .loginUser{
	text-align: center;
}

.autoLogout {
  white-space: nowrap;
}

.dropdown-menu.centered {
	left: 50% !important;
	transform: translateX(-50%) !important;
	top: 45% !important; /* 稍微往下偏一點 */
}
  
/* open-close：用於控制按鈕開關外觀 */
.open-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  font-size: 1.25rem;
  color: #555;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

#page-wrapper{
	width: 75%;
}

.open-close:hover {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); /* 陰影外框 */
  background-color: #F2F2F2; 
}

/* waves-effect + waves-light：點擊時模擬波紋效果 */
.waves-effect {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.waves-effect::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.4);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

.waves-effect:active::after {
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) scale(1);
}

/* 使用 light 色系背景時適合搭配 */
.waves-light::after {
  background: rgba(255, 255, 255, 0.4);
}

/* 波紋動畫 */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.has-error {
  border-left: 3px solid red;
  padding-left: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: transparent !important;
}
.dataTables_wrapper {
	max-width: 99% !important;
}
.paginate_button {
  background-color: #f0f0f0 !important;
  border: 1px solid rgba(0, 0, 0, 0.125) !important;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pagination>li>a,.pagination>li>span {
    
	text-decoration: none !important; 
}

.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
    
	background-color: transparent !important;
}

.pagination>.active>a, .pagination>.active>a:hover {
    background-color:transparent !important;
    border-color: transparent !important;
}

.form-control-underline {
	border: none;
	border-bottom: 1px solid #ccc;
	border-radius: 0;
	box-shadow: none;
}

.form-control-underline:focus {
	border-bottom: 2px solid #007bff; 
	outline: none;
	box-shadow: none;
}
  
#side-left-menu ul>li>a.active {
    color: #96a2b4;
    font-weight: 500
}

.sidebar #side-left-menu .user-pro .nav-second-level a:hover {
    color: #008efa
}

#menu_control,
#side-left-menu>li>a {
    padding: 15px 30px 15px 20px
}

.li_module:hover{
	background: #f2f2f2 !important;
	width: 219px !important;
}

.content-wrapper .sidebar #side-left-menu ul>li>a:hover,
.content-wrapper .sidebar #side-left-menu>li:hover {
    background: #F2F2F2;
}

.caret {
    vertical-align: baseline !important;
    border-top: 9px solid;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent
}

.dropdown-menu {
	min-width: fit-content;
}

#unDrop{
	margin-left:45px !important;	
}

.dropdown-toggle.none-collapse::after {
  content: none !important;
}

.sidebar {
    overflow-y: auto
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-left: 0;
    padding-right: 0
}

.sidebar .fa-fw {
    width: 20px;
    text-align: left !important;
    display: inline-block;
    font-size: 16px
}

.sidebar .label {
    font-size: 10px;
    border-radius: 60px;
    padding: 6px 8px;
    min-width: 30px;
    height: 20px
}

.sidebar #side-left-menu .user-pro .arrow {
    top: 23px;
    right: 20px
}

.sidebar #side-left-menu .user-pro>a {
    padding: 17px 30px 16px 15px !important
}

.sidebar #side-left-menu .user-pro .img-circle {
    width: 30px;
    margin-right: 10px
}

.sidebar .sidebar-search {
    padding: 15px
}

#side-left-menu ul>li>a:hover {
    color: #ff6849;
	background: rgba(0, 0, 0, .03);
	width:100%;
}
#side-left-menu ul>li>a {
    width:100%;
}

#side-left-menu li>ul>li>a {
   z-index:9999;
}

.sidebar .arrow {
    position: absolute;
    right: 15px;
    top: 18px
}

.lbwidth{
	min-width: 60px;
}

#pb_preview_img{
	max-width: 100%;
	max-height: 100%;
    /*display: none;*/
}

.image-upload-box {
	border: 2px dashed #ccc;
	padding: 20px;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	position: relative;
	width: 100%;
}

.image-upload-box.dragover {
	border-color: #007bff;
	background-color: #f0f8ff;
}

.sidebar .nav-second-level .arrow {
    right: 15px;
    top: 12px
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
    border-bottom: none !important
}

.sidebar .nav-second-level li a {
    padding-left: 43px
}

.sidebar .nav-third-level li a {
    padding-left: 52px
}

.btn_mt {
    margin-top: 0px !important;
}

@media (min-width:768px) {
    
    .content-wrapper.fix-sidebar .sidebar,
    .fix-sidebar.content-wrapper .sidebar {
        position: fixed
    }

    .sidebar {
        z-index: 10;
        position: absolute;
        width: 250px;
        height: 100%
    }
/*
    .content-wrapper .sidebar .nav-small-cap,
    .content-wrapper .sidebar li span span,
    .content-wrapper .user-profile .user-pro-body .u-dropdown {
        display: none
    }
*/
    .content-wrapper .user-profile .user-pro-body img {
        width: 40px
    }

    .content-wrapper .sidebar,
    .content-wrapper .sidebar .user-profile,
    .content-wrapper .top-left-part {
        width: 60px
    }

    .content-wrapper .sidebar .hide-item {
        /*display: none;*/
        width: 180px;
        left: 60px
    }

    .content-wrapper .sidebar .sidebar-nav {
        position: absolute;
        overflow: hidden
    }

    .content-wrapper .sidebar .sidebar-nav .nav-second-level {
        position: absolute;
        z-index: 999999
    }

    .content-wrapper .sidebar #side-left-menu>li:hover {
        width: 200px;
        background: #f7fafc
    }

    .content-wrapper .sidebar li:hover .hide-item {
        display: inline
    }

    .content-wrapper .sidebar #side-left-menu>li>a {
        padding: 15px 17px 15px 20px;
        background: 0 0;
    }

    .content-wrapper .sidebar li:hover .nav-second-level,
    .content-wrapper .sidebar li:hover .nav-second-level.collapse li,
    .content-wrapper .sidebar li:hover .nav-second-level.in {
        display: block
    }

    .content-wrapper .sidebar .nav-second-level {
        position: absolute;
        left: 60px;
        background: #f7fafc;
        width: 240px;
        opacity: 1;
        padding-bottom: 20px;
        /*display: none;*/
    }
    .content-wrapper .sidebar .nav-second-level>li>a {
        padding-left: 30px;
        background: #f7fafc
    }

    .content-wrapper.fix-sidebar .navbar-left,
    .fix-sidebar.content-wrapper .navbar-left {
        margin-left: 60px !important
    }

    .content-wrapper.fix-sidebar .sidebar .sidebar-nav,
    .fix-sidebar.content-wrapper .sidebar .sidebar-nav {
        position: absolute
    }

    .content-wrapper.fix-sidebar .sidebar .sidebar-nav .nav-second-level,
    .fix-sidebar.content-wrapper .sidebar .sidebar-nav .nav-second-level {
        position: absolute;
        z-index: 99999
    }
}

@media (max-width:768px) {
    .navbar-collapse {
        border-top: 0;
        box-shadow: none
    }

    .content-wrapper .sidebar .sidebar-nav .nav-second-level {
        z-index: 999999
    }

    .content-wrapper .sidebar .nav-second-level {
        position: absolute;
        left: 60px;
        background: #f7fafc;
        width: 240px;
        opacity: 1;
        padding-bottom: 20px;
        /*display: none;*/
    }

    .content-wrapper .sidebar .nav-second-level>li>a {
        padding-left: 30px;
        background: #f7fafc
    }

    .chat-main-box .chat-left-aside .open-panel,
    .content-wrapper .sidebar li:hover .nav-second-level,
    .content-wrapper .sidebar li:hover .nav-second-level.collapse li,
    .content-wrapper .sidebar li:hover .nav-second-level.in,
    .wizard-steps>li {
        display: block
    }
/*
    .content-wrapper .sidebar .nav-small-cap,
    .content-wrapper .sidebar li span span,
    .content-wrapper .user-profile .user-pro-body .u-dropdown {
        display: none
    }
*/
    .navbar-top-links {
        display: inline-block
    }

    .navbar-top-links .profile-pic img,
    .navbar-top-links li:last-child {
        margin-right: 0
    }

    .content-wrapper .sidebar,
    .content-wrapper .sidebar .user-profile,
    .content-wrapper .top-left-part,
    .top-left-part {
        width: 60px
    }

    .navbar-top-links .dropdown-alerts,
    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks {
        width: 260px
    }

    .dropdown .dropdown-tasks,
    .dropdown .mailbox {
        left: -94px
    }

    .content-wrapper .sidebar .sidebar-nav,
    .sidebar {
        position: absolute !important;
    }

    .fix-header .sidebar {
        position: fixed;
        height: 350px;
        top: 60px;
        z-index: 100;
        overflow: auto !important;
        box-shadow: 0 10px 35px rgba(0, 0, 0, .2)
    }

    .sidebar {
        z-index: 10;
        height: 100%
    }
    .content-wrapper .sidebar li:hover .hide-item {
        display: inline
    }

    .content-wrapper .sidebar .hide-item {
        /*display: none;*/
        width: 180px;
        left: 60px
    }

    .content-wrapper .sidebar #side-left-menu>li:hover {
        width: 190px;
        background: #f7fafc
    }

    #side-left-menu>li>a {
        padding: 15px 17px 15px 20px;
        background: 0 0
    }
	
	#side-left-menu>li>a:focus {
		background: transparent;
	}
}