* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
		
		::-webkit-scrollbar {
			display: none; /* 隐藏滚动条 */
		}
        :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #1abc9c;
            --light: #ecf0f1;
            --dark: #2c3e50;
            --success: #2ecc71;
            --warning: #f39c12;
            --danger: #e74c3c;
            --gray: #95a5a6;
            --purple: #9b59b6;
        }


        body {
            background-color: #f5f7fa;
            color: var(--dark);
            min-height: 100vh;
            overflow-x: hidden;
        }
		
		a {
			text-shadow: none;
			color: #337ab7;
			text-shadow: none;
			text-decoration: none;
		}
		
		a:hover {
			cursor: pointer;
			color: #23527c
		}
		a:active,
		a:focus,
		a:hover {
			outline: 0;
			text-decoration: none;
		}

        /* Layout */
        .page-wrapper {
            display: flex;
            min-height: 100vh;
        }


        /* Main Content Styles */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 250px;
            transition: margin-left 0.3s ease;
            min-width: 0; /* Prevents overflow */
        }

        /* Top Navigation */
        .top-nav {
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 99;
        }

        .search-bar {
            display: flex;
            align-items: center;
            background: var(--light);
            border-radius: 30px;
            padding: 8px 15px;
            max-width: 300px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .search-bar:focus-within {
            box-shadow: 0 0 0 2px var(--secondary);
        }

        .search-bar input {
            border: none;
            background: transparent;
            outline: none;
            width: 100%;
            margin-left: 10px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--secondary), var(--purple));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3);
        }

        .notifications {
            position: relative;
            cursor: pointer;
        }

        .notification-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--danger);
            color: white;
            font-size: 0.7rem;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        /* Content Area */
        .content {
            padding: 30px;
            flex: 1;
            overflow-y: auto;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .dashboard-header h2 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--dark);
            position: relative;
            padding-bottom: 10px;
        }

        .dashboard-header h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--accent);
            border-radius: 3px;
        }

        .date-filter {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .date-filter select {
            padding: 8px 15px;
            border-radius: 5px;
            border: 1px solid #ddd;
            background: white;
            outline: none;
            transition: all 0.3s ease;
            min-width: 150px;
        }

        .date-filter select:focus {
            border-color: var(--secondary);
        }

        /* Stats Cards */
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
            width: 100%;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--secondary), var(--accent));
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .stat-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .stat-card-header h3 {
            font-size: 0.9rem;
            color: var(--gray);
            font-weight: 500;
        }

        .stat-card-header i {
            font-size: 1.5rem;
            color: var(--secondary);
        }

        .stat-card-value {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .stat-card-change {
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .positive {
            color: var(--success);
        }

        .negative {
            color: var(--danger);
        }
		
		  /* Table Styles */
        .data-table-container {
            overflow-x: auto;
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            min-width: 800px; /* 确保表格在移动设备上可以水平滚动 */
        }

        .data-table th {
            background: var(--light);
            padding: 15px;
            text-align: left;
            font-weight: 600;
            color: var(--dark);
            white-space: nowrap;
        }

        .data-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
            white-space: nowrap;
        }

        .data-table tr:last-child td {
            border-bottom: none;
        }

        .data-table tr:hover {
            background: rgba(0, 0, 0, 0.02);
        }

       
       
		

        /* Charts Section */
        .charts-section {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            width: 100%;
        }

        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
            width: 100%;
			margin-bottom:30px;
            overflow: hidden;
        }

        .chart-container:hover {
            transform: translateY(-3px);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .chart-header h3 {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .chart-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .chart-actions button {
            background: var(--light);
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .chart-actions button:hover {
            background: #dfe6e9;
        }

        .chart {
            height: 250px;
            position: relative;
            width: 100%;
        }

        /* Recent Activity */
        .recent-activity {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            width: 100%;
        }

        .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .activity-header h3 {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .activity-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .activity-item {
            display: flex;
            gap: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            transition: all 0.3s ease;
        }

        .activity-item:hover {
            background: rgba(0, 0, 0, 0.02);
            border-radius: 5px;
            padding: 10px;
            margin: 0 -10px;
        }

        .activity-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
        }

        .activity-icon.sales {
            background: var(--secondary);
        }

        .activity-icon.inventory {
            background: var(--accent);
        }

        .activity-icon.accounting {
            background: var(--success);
        }

        .activity-icon.hr {
            background: var(--warning);
        }

        .activity-content {
            flex: 1;
            min-width: 0; /* Prevents text overflow */
        }

        .activity-content p {
            font-size: 0.9rem;
            margin-bottom: 5px;
            word-break: break-word;
        }

        .activity-time {
            font-size: 0.8rem;
            color: var(--gray);
        }

        /* Quick Actions */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 30px;
            width: 100%;
        }

        .action-btn {
            background: white;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .action-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, white, #f8f9fa);
        }

        .action-btn i {
            font-size: 1.8rem;
            color: var(--secondary);
        }

        .action-btn span {
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* Performance Meter */
        .performance-meter {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-top: 20px;
            width: 100%;
        }

        .performance-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .performance-header h3 {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .performance-bars {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .performance-bar {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .performance-label {
            width: 120px;
            font-size: 0.9rem;
        }

        .performance-bar-container {
            flex: 1;
            height: 10px;
            background: #eee;
            border-radius: 5px;
            overflow: hidden;
            min-width: 0; /* Prevents overflow */
        }

        .performance-bar-fill {
            height: 100%;
            border-radius: 5px;
            transition: width 1s ease;
        }

        .performance-value {
            width: 40px;
            text-align: right;
            font-weight: 600;
            font-size: 0.9rem;
        }

        /* Footer */
        .footer {
            background: var(--primary);
            color: white;
            padding: 20px;
            text-align: center;
            margin-top: 30px;
            width: 100%;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .charts-section {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 992px) {
           
            
            .main-content {
                margin-left: 0;
                width: 100%;
            }
            
            
            .stats-cards {
                grid-template-columns: 1fr 1fr;
            }
            
            .chart-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .chart-actions {
                width: 100%;
                justify-content: flex-start;
            }
        }
		 .mdl-dialog{
    width: 70%;
	margin:auto;
}


        @media (max-width: 768px) {
			.mdl-dialog{
    width: 100%;
}

            .stats-cards {
                grid-template-columns: 1fr;
            }
            
            .quick-actions {
                grid-template-columns: 1fr 1fr;
            }
            
            .top-nav {
                flex-direction: column;
                gap: 15px;
            }
            
            .search-bar {
                max-width: 100%;
            }
            
            .dashboard-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .date-filter {
                width: 100%;
                justify-content: space-between;
            }
            
            .content {
                padding: 15px;
            }
            
            .performance-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            
            .performance-label {
                width: 100%;
            }
            
            .performance-bar-container {
                width: 100%;
            }
            
            .performance-value {
                text-align: left;
                width: 100%;
            }
        }
		.erp-sys-content-right{
			width:200px;text-align:right;
		}
        
		@media (max-width: 576px) {
            .quick-actions {
                grid-template-columns: 1fr;
            }
            
            .chart-actions {
                flex-wrap: wrap;
            }
            
            .activity-item {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
            
            .performance-bar {
                flex-direction: column;
                text-align: center;
                gap: 5px;
            }
            
            .performance-label {
                width: 100%;
            }
            
            .performance-bar-container {
                width: 100%;
            }
			.erp-sys-content-right{
				text-align:left;
			}
			
		}
		
		
		.top-nav{
				display: block;
				}
				
			
		
        /* Tabs - 移动到更上方 */
        .sales-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        .tab-btn {
            padding: 12px 24px;
            background: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
			justify-content: center;
        }

        .tab-btn.active,
		.select-div{
            background: var(--secondary);
            color: white;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        }

        .tab-btn:hover:not(.active):not(.select-div)  {
            background: var(--light);
            transform: translateY(-2px);
        }	

		.tab-main-btn {
            padding: 15px 30px;
            font-weight: 500;
			font-size:1.1rem;
        }
		
		

		
		.state-nav{
			
            padding: 10px 30px;
			
		}
		
		
		/********************************************************************

						[8. PAGE CONTENT ]
						
*********************************************************************/



.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
	margin:auto;
	 display: inline-block;
}

.alert-heading {
    color: inherit
}

.alert-link {
    font-weight: 700
}

.alert-dismissible {
    padding-right: 4rem
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: .75rem 1.25rem;
    color: inherit
}

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff
}

.alert-primary hr {
    border-top-color: #9fcdff
}

.alert-primary .alert-link {
    color: #002752
}

.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db
}

.alert-secondary hr {
    border-top-color: #c8cbcf
}

.alert-secondary .alert-link {
    color: #202326
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb
}

.alert-success hr {
    border-top-color: #b1dfbb
}

.alert-success .alert-link {
    color: #0b2e13
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb
}

.alert-info hr {
    border-top-color: #abdde5
}

.alert-info .alert-link {
    color: #062c33
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba
}

.alert-warning hr {
    border-top-color: #ffe8a1
}

.alert-warning .alert-link {
    color: #533f03
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb
}

.alert-danger hr {
    border-top-color: #f1b0b7
}

.alert-danger .alert-link {
    color: #491217
}

.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe
}

.alert-light hr {
    border-top-color: #ececf6
}

.alert-light .alert-link {
    color: #686868
}

.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca
}

.alert-dark hr {
    border-top-color: #b9bbbe
}

.alert-dark .alert-link {
    color: #040505
}

















.page-title {
    padding: 0;
    font-size: 1.1rem;
    letter-spacing: -1px;
    display: block;
    color: #666;
    margin: 0 0 15px;
    font-weight: 300
}
.page-title small {
    font-size: 0.9rem;
    letter-spacing: 0;
    font-weight: 300;
    color: #888
}
.page-container-bg-solid .page-title,
.page-content-white .page-title {
    color: #666;
    margin-bottom: 15px;
    margin-top: 15px
}
.page-container-bg-solid .page-title small,
.page-content-white .page-title small {
    color: #666
}
.page-content-white .page-title {
    font-size: 1.1rem;
    font-weight: 400;
}
.page-bar {
    padding: 0;
    background-color: #f1f4f7;
    margin-bottom: 25px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px
}
.page-bar:after,
.page-bar:before {
    content: " ";
    display: table
}
.page-bar .page-breadcrumb {
    display: inline-block;
    float: left;
    padding: 8px;
    margin: 0;
    list-style: none;
    background-color: transparent;
    border-radius: 50px;
    background: rgba(220, 208, 208, 0.3);
    padding-left: 20px !important;
}
.page-bar .page-breadcrumb>li {
    display: inline-block
}
.ie8 .page-bar .page-breadcrumb>li {
    margin-right: 1px
}
.page-bar .page-breadcrumb>li>a,
.page-bar .page-breadcrumb>li>span {
    color: #888;
    font-size: 0.9em;
    text-shadow: none
}
.page-bar .page-breadcrumb>li>i {
    color: #aaa;
    font-size: 0.9em;
    text-shadow: none
}
.page-bar .page-breadcrumb>li>i[class*=icon-],
.page-bar .page-breadcrumb>li>i[class^=icon-] {
    color: gray
}
.page-bar .page-toolbar {
    display: inline-block;
    float: right;
    padding: 0
}
.page-title-breadcrumb{
	line-height: 18px;
	display:flex;
	justify-content: space-between;
}
.page-title-breadcrumb .breadcrumb li+li:before {
    content: "";
    padding: 0;
}
.page-bar .page-toolbar .btn-fit-height {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    -ms-border-radius: 0 4px 4px 0;
    -o-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    padding-top: 8px;
    padding-bottom: 8px
}
.page-md .page-bar .page-toolbar .btn-fit-height {
    padding-top: 9px;
    padding-bottom: 9px;
    box-shadow: none !important
}
.page-container-bg-solid .page-bar,
.page-content-white .page-bar {
    background-color: #f5f7fa;
    position: relative;
    padding: 0 20px;
    margin: 0px -20px 0px;
}
.page-container-bg-solid .page-bar .page-breadcrumb,
.page-content-white .page-bar .page-breadcrumb {
    padding: 8px 15px;
    margin-top: 2px;
    margin-bottom: 15px;
}
.page-container-bg-solid .page-bar .page-breadcrumb>li>a,
.page-container-bg-solid .page-bar .page-breadcrumb>li>span,
.page-content-white .page-bar .page-breadcrumb>li>a,
.page-content-white .page-bar .page-breadcrumb>li>span {
    color: #888;
    text-decoration: none;
}
.parent-item:hover {
    color: #1EBDCC !important;
}
.page-container-bg-solid .page-bar .page-breadcrumb>li>i,
.page-content-white .page-bar .page-breadcrumb>li>i {
    color: #aaa
}
.page-container-bg-solid .page-bar .page-breadcrumb>li>i.fa-circle,
.page-content-white .page-bar .page-breadcrumb>li>i.fa-circle {
    font-size: 5px;
    margin: 0 5px;
    position: relative;
    top: -3px;
    opacity: .4;
    filter: alpha(opacity=40)
}
.page-container-bg-solid .page-bar .page-breadcrumb>li>i[class*=icon-],
.page-container-bg-solid .page-bar .page-breadcrumb>li>i[class^=icon-],
.page-content-white .page-bar .page-breadcrumb>li>i[class*=icon-],
.page-content-white .page-bar .page-breadcrumb>li>i[class^=icon-] {
    color: #8c8c8c
}
.page-container-bg-solid .page-bar .page-toolbar,
.page-content-white .page-bar .page-toolbar {
    padding: 6px 0
}
.page-container-bg-solid .page-bar .page-toolbar .btn,
.page-content-white .page-bar .page-toolbar .btn {
    margin-top: -2px
}
.page-container-bg-solid .page-bar .page-toolbar .btn.btn-sm,
.page-content-white .page-bar .page-toolbar .btn.btn-sm {
    margin-top: 0
}
.page-content {
    margin-top: 0;
    padding: 0;
    background-color: #f5f7fa;
}
.page-full-width .page-content {
    margin-left: 0 !important
}

 .page-content-wrapper .page-content {
        margin-left: 235px;
        margin-top: 0;
        min-height: 600px;
        padding: 25px 20px 10px
    }
	
	
	

		
		
        /* Sidebar Styles */
        .sidebar {
            width: 250px;
            background: linear-gradient(180deg,#283446  0%, var(--primary) 100%);
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }

        .sidebar-header {
            padding: 3px 12px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.2);
        }

        .sidebar-header h2 {
            font-size: 1.5rem !important;
            font-weight: 600;
            display: flex;
            gap: 10px;
        }

        .sidebar-header h2 i {
            color: var(--accent);
        }

        .sidebar-menu {
            padding-bottom: 15px;
        }

        .sidebar-menu ul {
            list-style: none;
			list-style-type: none;
			padding: 0; /* 移除ul的内边距 */
			font-size:medium;
			margin-bottom:0px;
        }

        .sidebar-menu li {
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            border-left: 4px solid transparent;
			line-height: 1.4;
        }

        .sidebar-menu li:hover {
            background: rgba(255, 255, 255, 0.1);
            border-left: 4px solid var(--accent);
        }

        .sidebar-menu li.active {
            background: rgba(255, 255, 255, 0.15);
            border-left: 4px solid var(--accent);
        }

        .sidebar-menu li i {
            width: 20px;
            text-align: center;
        }

        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 101;
            background: var(--primary);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 5px;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
		
        /* Layout */
        .page-wrapper {
            display: flex;
            min-height: 100vh;
        }
		.page-container{
		
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 250px;
            transition: margin-left 0.3s ease;
            min-width: 0; /* Prevents overflow */
		}
		.page-content{
		
			margin-left:0px !important;
		}
		
        @media (max-width: 992px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .sidebar.active {
                transform: translateX(0);
            }
             .mobile-menu-toggle {
                display: block;
            }
		.page-container{
		
			margin-left:0px !important;
		}
        }
		.page-header-fixed .page-container{
		 margin-top:0px;
		}
		

		h2{margin:0px;}
		    
		h2 a{
		font-weight: bold;
		}
		#topMenuDiv {
			color: white;
			display: flex;
			justify-content: center;
			overflow-x: auto;
		}
		.topBtnClass {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 75px;
			color:rgba(0,0,0,.87);
		}
	
		.topBtnClass button{
			background-color:#00AFFE;border-radius:10px;width:40px;height:40px;border:0;
			margin-left:10px;
			margin-right:10px;
		}

		@media (max-width: 576px) {
            
            
           
			.sidebar-header{
			padding-left:60px;
			}
			
		.content {
		margin-top:75px;
        }
        }
		.btnsetting{
		border-radius: 50%;border: 1px solid rgba(255, 255, 255, 0.3);width:30px;height:30px;display: flex; justify-content: center;align-items: center;
		}
		.btnsetting:hover{
		
			background: rgba(255, 255, 255, 0.15);
		}	
		.btnsetting.active{
			background: rgba(255, 255, 255, 0.15);
		}
		 .status {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
        }

		 .status.pending {
            background: rgba(243, 156, 18, 0.1);
            color: var(--warning);
        }

        .status.completed {
            background: rgba(46, 204, 113, 0.1);
            color: var(--success);
        }

        .status.shipped {
            background: rgba(52, 152, 219, 0.1);
            color: var(--secondary);
        }

        .status.draft {
            background: rgba(149, 165, 166, 0.1);
            color: var(--gray);
        }
		.erp-data-table{
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			border-collapse: separate;
			border-spacing: 0;
			overflow: hidden;
			table-layout: fixed
		}
		.erp-data-pro-table{
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			border-collapse: separate;
			border-spacing: 0;
			overflow: hidden;
			table-layout: fixed
			}
		
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none
}

.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
}

.col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
}

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.col-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
}

.col-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
}

.col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
}

.col-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

.order-first {
    -ms-flex-order: -1;
    order: -1
}

.order-last {
    -ms-flex-order: 13;
    order: 13
}

.order-0 {
    -ms-flex-order: 0;
    order: 0
}

.order-1 {
    -ms-flex-order: 1;
    order: 1
}

.order-2 {
    -ms-flex-order: 2;
    order: 2
}

.order-3 {
    -ms-flex-order: 3;
    order: 3
}

.order-4 {
    -ms-flex-order: 4;
    order: 4
}

.order-5 {
    -ms-flex-order: 5;
    order: 5
}

.order-6 {
    -ms-flex-order: 6;
    order: 6
}

.order-7 {
    -ms-flex-order: 7;
    order: 7
}

.order-8 {
    -ms-flex-order: 8;
    order: 8
}

.order-9 {
    -ms-flex-order: 9;
    order: 9
}

.order-10 {
    -ms-flex-order: 10;
    order: 10
}

.order-11 {
    -ms-flex-order: 11;
    order: 11
}

.order-12 {
    -ms-flex-order: 12;
    order: 12
}

.offset-1 {
    margin-left: 8.333333%
}

.offset-2 {
    margin-left: 16.666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.333333%
}

.offset-5 {
    margin-left: 41.666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.333333%
}

.offset-8 {
    margin-left: 66.666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.333333%
}

.offset-11 {
    margin-left: 91.666667%
}

@media (min-width: 576px) {
    .col-sm {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-sm-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-sm-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-sm-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-sm-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-sm-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-sm-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-sm-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-sm-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-sm-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-sm-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-sm-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-sm-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-sm-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-sm-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-sm-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-sm-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.333333%
    }

    .offset-sm-2 {
        margin-left: 16.666667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.333333%
    }

    .offset-sm-5 {
        margin-left: 41.666667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.333333%
    }

    .offset-sm-8 {
        margin-left: 66.666667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.333333%
    }

    .offset-sm-11 {
        margin-left: 91.666667%
    }
}

@media (min-width: 768px) {
    .col-md {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-md-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-md-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-md-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-md-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-md-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-md-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-md-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-md-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-md-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-md-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-md-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-md-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-md-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-md-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-md-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-md-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.333333%
    }

    .offset-md-2 {
        margin-left: 16.666667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.333333%
    }

    .offset-md-5 {
        margin-left: 41.666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.333333%
    }

    .offset-md-8 {
        margin-left: 66.666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.333333%
    }

    .offset-md-11 {
        margin-left: 91.666667%
    }
}

@media (min-width: 992px) {
    .col-lg {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-lg-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-lg-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-lg-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-lg-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-lg-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-lg-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-lg-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-lg-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-lg-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-lg-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-lg-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-lg-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-lg-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-lg-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-lg-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-lg-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.333333%
    }

    .offset-lg-2 {
        margin-left: 16.666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.333333%
    }

    .offset-lg-5 {
        margin-left: 41.666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.333333%
    }

    .offset-lg-8 {
        margin-left: 66.666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.333333%
    }

    .offset-lg-11 {
        margin-left: 91.666667%
    }
}

@media (min-width: 1200px) {
    .col-xl {
        -ms-flex-preferred-size:0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-xl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-xl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-xl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-xl-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-xl-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-xl-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-xl-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-xl-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-xl-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-xl-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-xl-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-xl-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-xl-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-xl-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-xl-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-xl-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-xl-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-xl-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.333333%
    }

    .offset-xl-2 {
        margin-left: 16.666667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.333333%
    }

    .offset-xl-5 {
        margin-left: 41.666667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.333333%
    }

    .offset-xl-8 {
        margin-left: 66.666667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.333333%
    }

    .offset-xl-11 {
        margin-left: 91.666667%
    }
}

.card-box {
    background: #fff;
    min-height: 50px;
    position: relative;
    margin-bottom: 20px;
    border: 1px solid #f2f2f2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
	border-radius: 10px;
	padding:20px 0px;
}
.card-box:hover {
    -moz-box-shadow: 0 20px 20px rgba(0,0,0,.1);
    webkit-box-shadow: 0 0 25px -5px #85969b;
    box-shadow: 0 0 25px -5px #85969b;
}

.navigation-box{
    display: flex;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    white-space: nowrap;
    overflow-x: auto;
	padding: 10px 0px;
    gap: 10px;
	flex-wrap: wrap;
}
.navigation-box a{
	text-shadow: none;
	text-decoration: none;
	min-width:155px;
}

.navigation-box button{
	min-width:155px;
}
.navigation-box li{
	min-width:155px;
}
.sales-tabs button{
	
	min-width:155px;
}

@media screen and (min-width: 768px) {
    
}

@media screen and (max-width: 768px) {
    .navigation-box a{
		width:48%;
	}
	.navigation-box button{
		width:48%;
	}
	.navigation-box li{
		width:48%;
	}
	.sales-tabs button{
		width:48%;
	}
	
	.page-container{
		
		margin-left:0px;
	}
}




.navigation-box .part-div-sm{
            padding: 12px 24px;
            background: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
			
		}
.navigation-box	.part-div-sm:hover:not(.select-div):not(.active)   {
		background: var(--light);
		transform: translateY(-2px);
	}	

.navigation-box	.part-div-sm.select-div,
.navigation-box	.part-div-sm.active {
		background: var(--secondary);
		color: white;
		box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
	}


		
		
	
.d-none {
    display: none!important
}

.d-inline {
    display: inline!important
}

.d-inline-block {
    display: inline-block!important
}

.d-block {
    display: block!important
}

.d-table {
    display: table!important
}

.d-table-row {
    display: table-row!important
}

.d-table-cell {
    display: table-cell!important
}

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important
}

.d-inline-flex {
    display: -ms-inline-flexbox!important;
    display: inline-flex!important
}

@media (min-width: 992px) {
    .d-sm-none {
        display:none!important
    }

    .d-sm-inline {
        display: inline!important
    }

    .d-sm-inline-block {
        display: inline-block!important
    }

    .d-sm-block {
        display: block!important
    }

    .d-sm-table {
        display: table!important
    }

    .d-sm-table-row {
        display: table-row!important
    }

    .d-sm-table-cell {
        display: table-cell!important
    }

    .d-sm-flex {
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-sm-inline-flex {
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

@media (min-width: 992px) {
    .d-md-none {
        display:none!important
    }

    .d-md-inline {
        display: inline!important
    }

    .d-md-inline-block {
        display: inline-block!important
    }

    .d-md-block {
        display: block!important
    }

    .d-md-table {
        display: table!important
    }

    .d-md-table-row {
        display: table-row!important
    }

    .d-md-table-cell {
        display: table-cell!important
    }

    .d-md-flex {
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-md-inline-flex {
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display:none!important
    }

    .d-lg-inline {
        display: inline!important
    }

    .d-lg-inline-block {
        display: inline-block!important
    }

    .d-lg-block {
        display: block!important
    }

    .d-lg-table {
        display: table!important
    }

    .d-lg-table-row {
        display: table-row!important
    }

    .d-lg-table-cell {
        display: table-cell!important
    }

    .d-lg-flex {
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-lg-inline-flex {
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

@media (min-width: 1200px) {
    .d-xl-none {
        display:none!important
    }

    .d-xl-inline {
        display: inline!important
    }

    .d-xl-inline-block {
        display: inline-block!important
    }

    .d-xl-block {
        display: block!important
    }

    .d-xl-table {
        display: table!important
    }

    .d-xl-table-row {
        display: table-row!important
    }

    .d-xl-table-cell {
        display: table-cell!important
    }

    .d-xl-flex {
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-xl-inline-flex {
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}

@media print {
    .d-print-none {
        display: none!important
    }

    .d-print-inline {
        display: inline!important
    }

    .d-print-inline-block {
        display: inline-block!important
    }

    .d-print-block {
        display: block!important
    }

    .d-print-table {
        display: table!important
    }

    .d-print-table-row {
        display: table-row!important
    }

    .d-print-table-cell {
        display: table-cell!important
    }

    .d-print-flex {
        display: -ms-flexbox!important;
        display: flex!important
    }

    .d-print-inline-flex {
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
}
	
.form-control {
    display: block;
    width: 100%;
    padding: 10px 20px;
    font-size: 0.95rem;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    outline: 0!important;
    box-shadow: none!important;
}
		
		
		
		
		
		
		
		
		.btn {
			border: none; padding: 8px 15px;
			border-radius: 5px;
			cursor: pointer;
			outline: 0 !important;
			box-shadow: none;
			text-shadow: none;
			text-decoration: none;
			background: var(--light);
		}

		.btn.button.icon-btn-stly{
			color: var(--secondary);
			cursor: pointer;
			
			
		}
		.btn-info{
		 background: var(--secondary);
		 color:white;
		}
		.frombtn{
			padding: 10px 30px;
		}
		
		
		.icon-btn-stly{
				border-radius:16px;font-size: 1rem;-webkit-box-shadow: none;box-shadow: none;border: 1px solid transparent;padding: 6px 4px; background: transparent;
			}
			
		.icon-btn-stly:focus{
				color:var(--light);
			}	

		.add-btn-stly{
			border-radius:16px;font-size: 1.1rem;-webkit-box-shadow: none;box-shadow: none;border: 1px solid transparent;padding: 6px 4px; background: transparent;
		}
			

 /* 聯絡我們彈窗 */
        
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 1
}

.close:not(:disabled):not(.disabled) {
    cursor: pointer
}
/* 
.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover {
    color: #000;
    text-decoration: none;
    opacity: .75
}
*/
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none
}

.modal-open {
    overflow: hidden
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none
}

.modal.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,-25%);
    transform: translate(0,-25%)
}

@media screen and (prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        transition: none
    }
}

.modal.show .modal-dialog {
    -webkit-transform: translate(0,0);
    transform: translate(0,0)
}

.modal-dialog-centered {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (.5rem * 2))
}

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 1rem;
    outline: 0
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: .5
}

.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto
}


	.modal-header {
		background: linear-gradient(135deg, #1a6bb3 0%, #2c87c9 100%);
		color: white;
		padding: 24px 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.modal-header h2 {
		font-size: 1.8rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 12px;
	}
	
	.modal-header h2 i {
		font-size: 1.6rem;
	}
	
	.modal-header .close  {
		background: rgba(255, 255, 255, 0.2);
		border: none;
		color: white;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}
	
	.modal-header .close:hover {
		background: rgba(255, 255, 255, 0.3);
		transform: rotate(90deg);
	}
        

.modal-title {
    margin-bottom: 0;
    line-height: 1.5
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem
}

.modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #e9ecef
}

.modal-footer>:not(:first-child) {
    margin-left: .25rem
}

.modal-footer>:not(:last-child) {
    margin-right: .25rem
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width:500px;
        margin: 1.75rem auto
    }

    .modal-dialog-centered {
        min-height: calc(100% - (1.75rem * 2))
    }

    .modal-sm {
        max-width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width:800px
    }
}

		
		.page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .page-header h1 {
            font-size: 1.8rem !important;
            font-weight: 600;
            color: var(--dark);
            position: relative;
            padding-bottom: 10px;
        }

        .page-header h1:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--accent);
            border-radius: 3px;
        }
		

        .page-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
        } 
		  .btn-top {
            padding: 10px 20px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
		
		 .btn-primary {
            background: var(--secondary);
            color: white;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-secondary {
            background: var(--light);
            color: var(--dark);
        }

        .btn-secondary:hover {
            background: #d5dbdb;
        }

        .btn-success {
            background: var(--success);
            color: white;
        }

        .btn-success:hover {
            background: #27ae60;
        }

        .btn-warning {
            background: var(--warning);
            color: white;
        }

        .btn-warning:hover {
            background: #e67e22;
        }

		.btn-dark {
			color: #fff;
			background-color: #343a40;
			border-color: #343a40
		}

		.btn-dark:hover {
			color: #fff;
			background-color: #23272b;
			border-color: #1d2124
		}

		.btn-dark.focus,.btn-dark:focus {
			box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
		}

		.btn-dark.disabled,.btn-dark:disabled {
			color: #fff;
			background-color: #343a40;
			border-color: #343a40
		}

		.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle {
			color: #fff;
			background-color: #1d2124;
			border-color: #171a1d
		}

		.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus {
			box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
		}

		.circle {
			border-radius: 20px!important;
		}

		.panel-body {
			padding: 15px;
		}
        /* Form Container */
        .form-container {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
        }

		.form-container:hover {
			-moz-box-shadow: 0 20px 20px rgba(0,0,0,.1);
			webkit-box-shadow: 0 0 25px -5px #85969b;
			box-shadow: 0 0 25px -5px #85969b;
		}
        .form-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 1.2rem;
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-title i {
            color: var(--accent);
        }

        .form-table-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-table-group {
            display: flex;
            flex-direction: column;
        }

        .form-table-group label {
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: var(--dark);
        }

        .form-table-control {
            padding: 10px 15px;
            border-radius: 5px;
            border: 1px solid #ddd;
            outline: none;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .form-table-control:focus {
            border-color: var(--secondary);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

        .form-table-control:disabled {
            background-color: #f8f9fa;
            color: #6c757d;
        }

        .form-table-group.full-width {
            grid-column: 1 / -1;
        }
  /* Customer Info Section */
        .customer-info-section {
            display: flex;
            gap: 20px;
            margin-top: 15px;
        }

        .customer-details {
            flex: 1;
            background: var(--light);
            border-radius: 8px;
            padding: 15px;
        }

        .customer-details h4 {
            margin-bottom: 10px;
            color: var(--primary);
            font-size: 1rem;
        }

        .customer-details p {
            margin-bottom: 5px;
            font-size: 0.9rem;
        }

        .customer-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .btn-view-details {
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 8px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
        }

        .btn-view-details:hover {
            background: #16a085;
        }
		.d-sm-table-row th{
		
			background: var(--light);
			padding: 15px;
			text-align: left;
			font-weight: 600;
			color: var(--dark);
			white-space: nowrap;
		}
		.d-table-row th{
		
			background: var(--light);
			padding: 15px;
			text-align: left;
			font-weight: 600;
			color: var(--dark);
			white-space: nowrap;
		}
		  /* Summary Section */
        .summary-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 30px;
        }

        .summary-details {
            display: flex;
            flex-direction: column;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .summary-row.total {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--primary);
            border-bottom: none;
            padding-top: 0px;
        }

        .notes-section textarea {
            width: 100%;
            height: 120px;
            padding: 15px;
            border-radius: 5px;
            border: 1px solid #ddd;
            resize: vertical;
            outline: none;
            transition: all 0.3s ease;
        }

        .notes-section textarea:focus {
            border-color: var(--secondary);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
		
		.erp-cardbox {
   /* border-radius: 18px;*/
}






@media screen and (min-width: 768px) {
.erp-sys-content-box {
    padding: 30px;
}
}

@media screen and (max-width: 768px) {
    .erp-sys-content-box {
        padding: 10px 5px;
    }
	.customer-info-section {
		flex-direction: column;
	}
}

@media screen and (min-width: 768px) {
    .erp-sys-header-tooltip {
        display: flex;
        justify-content: space-between;
        margin: auto;
        margin-bottom: 0px;
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    .erp-sys-header-tooltip {
        text-align: left;
        display: flex;
        justify-content: space-between;
        margin: auto;
        margin-bottom: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .erp-sys-header-tooltip div {
        margin-bottom: 5px;
    }

    .erp-sys-header-tooltip input[type=date]{
        max-width: calc(100% - 13em);
    }
}

.tooltip-part-1 {
    display: flex;
    flex-wrap: wrap;
}

.header-search-input {
    transition: 0.5s all ease;
}

.header-search-btn {
    position: absolute;
    right: 20px;
    top: 2px;
    height: calc(100% - 4px);
    background-color: #fff;
    border: 0;
    outline: none !important;
    cursor: pointer;
}

.header-search-box {
    position: relative;
    width: 95%;
    margin: auto;
}

.header-search-box2 {
    position: relative;
    width: 95%;
    margin: auto;
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.pages-out-div {
    text-align: center;
}

.erp-data-table thead tr th {
    word-wrap:break-word;
    word-break:break-all;
    font-weight: 600;
    border-top: 0;
}
.erp-data-pro-table  thead tr th {
    word-wrap:break-word;
    word-break:break-all;
    font-weight: 600;
    border-top: 0;
}

.erp-data-table tr {
    border-bottom: 1px solid #e6e6e6;
}
.erp-data-pro-table tr {
    border-bottom: 1px solid #e6e6e6;
}

.erp-data-table tbody .erp-table-tr:nth-child(even) {
    background: #f9f9f9;
}
.erp-data-pro-table tbody .erp-table-tr:nth-child(even) {
    background: #f9f9f9;
}

@media screen and (max-width: 768px) {
.erp-table-tr .btn {
    margin-bottom: 5px;
}

.erp-data-table{
    text-align: left;
}
.erp-data-pro-table{
    text-align: left;
}
}


.loading-box {
    width: 100vw;
    height: 100vh;
    background-color: #e0dfe3;
    opacity: 0.8;
    position: fixed;
    z-index: 999999999;
    display: none;
    top: 0;
}

.rotate-animate {
    border:16px solid #f3f3f3;
    border-radius:50%;
    border-top:16px solid #2842d8;
    width:100px;
    height:100px;
    animation:rotate 2s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-position {
    position: relative;
    top: calc(100vh / 2 - 50px);
    left: calc(100vw / 2 - 50px);
}

.my-alert-box {
    position: fixed;
    top: 49vh;
    z-index: 99999999;
    text-align: center;
    width: 100%;
    font-size: 1rem;
    cursor: default;
}

.my-alert {
    position: relative;
}

.pagination-area {
	background: rgba(0,0,0,0) none repeat scroll 0 0;
	border-top: 1px solid #e5e5e5;
	margin: 12px 0 0;
	padding-top: 12px;
	text-align: center;
	display: inline-block;
	width: 100%
}
.pagination-area ul {
	margin-bottom: 0px
}
.pagination-area ul li {
	background: #f5f5f5;
	color: #393939;
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 700;
	height: 30px;
	line-height: 30px;
	margin: 0 0 5px 5px;
	width: 30px;
}
.pagination-area ul li a {
	border: 1px solid #e5e5e5;
	color: #363636;
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	height: 30px;
	width: 30px;
	text-decoration: none;
	transition: all .4s ease-out .2s;
	border-radius: 3px;
}
.pagination-area ul li a:hover {
	background: #2CA8FF;
	border: 1px solid #2CA8FF;
	color: #fff;
}
.pagination-area ul li a.active {
	background: #2CA8FF;
	border: 1px solid #2CA8FF;
	color: #fff;
	transition: all .4s ease-out .2s;
}

.pageButton {
    width: 30px;
    background-color: #F5F5F5;
    border: 0px;
    cursor: pointer;
}

.modal-inputs-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1rem;
}

.modal-inputs-box .col-75percent-input {
    width: 75%;
}

.modal-inputs-box .col-4-input {
    width: 25%;
}

.modal-inputs-box .col-3-input {
    width: 30%;
}

.modal-inputs-box .col-2-input {
    width: 45%;
}

.modal-inputs-box .col-1-input {
    width: 100%;
}

.modal-inputs-box .input-content input{
    width: 100%;
    height: 35px;
    border-bottom: 1px #888888 solid;
    border-top: 0px #000000 solid;
    border-left: 0px #000000 solid;
    border-right: 0px #000000 solid;
    /* margin-top: 20px; */
    margin-bottom: 20px;
    outline: 0;
}
.modal-inputs-box .input-content input:focus{
    border-bottom: 1px #6fd0fc solid;
    box-shadow: 0px 5px 5px -5px #02A7F0;
    /*box-shadow: 0px 1px 2px 2px #02A7F0 ;*/
}
.required-label {
    color: #ff0000;
    padding-left: 3px;
}
.modal-inputs-box .input-content select{
    height: 45px;
    min-width: 75%;
    margin-bottom: 20px;
}

.my-confirm-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    line-height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    z-index: 99999999;
    text-align: center;
}

.my-confirm {
    background-color: #FFFFFF;
    display: inline-block;
    text-align: left;
    width: 400px;
    position: relative;
    border-radius: 1rem;
    border: 1px solid #ebeef5;
    vertical-align: middle;
    padding-bottom: 12px;
}
.pro-type{
	
	align-items: center;
	display: flex;
	width:50%;
}

@media screen and (max-width: 768px) {
    .my-confirm {
        width: 80vw;
    }
	.modal-inputs-box .col-75percent-input {
    width: 100%;
		}

		.modal-inputs-box .col-4-input {
			width: 100%;
		}

		.modal-inputs-box .col-3-input {
			width: 100%;
		}

		.modal-inputs-box .col-2-input {
			width: 100%;
		}

		.modal-inputs-box .col-1-input {
			width: 100%;
		}
		.pro-type{
			flex-wrap: wrap;
		}
}

.my-confirm .header {
    padding: 12px;
    font-size: 1.1rem;
}

.my-confirm .header .header-content {
    line-height: 1;
    position: relative;
    color: #303133;
}

.my-confirm .header .header-content .close-btn {
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    position: absolute;
    right: 0;
}

.my-confirm .content {
    padding: 12px;
    font-size: 0.95;
    line-height: 1;
    color: #606266;
}

.my-confirm .content .confirm-icon {
    font-size: 1.2rem;
    color: #e6a23c;
    margin-right: 12px;
}

.my-confirm .btn-groups {
    line-height: 1;
    padding: 5px 15px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.my-confirm .btn-groups .group-btn{
    color: #FFFFFF;
    text-align: center;
    user-select: none;
    border: 1px #409eff solid;
    background-color: #409eff;
    font-size: 0.95rem;
    border-radius: 4px;
    padding: 8px 15px;
    outline: none;
}

.my-confirm .btn-groups .group-btn:hover{
    color: #FFFFFF;
    border: 1px #79bbff solid;
    background-color: #79bbff;
    outline: none;
}

.my-confirm .btn-groups .group-btn:nth-child(2){
    margin-left: 12px;
    color: #606266;
    background-color: #FFFFFF;
    border: 1px #dcdfe6 solid;
}

.my-confirm .btn-groups .group-btn:nth-child(2):hover{
    color: #409eff;
    border: 1px #c6e2ff solid;
    background-color: #ecf5ff;
    outline: none;
}

.min-width-select {
    min-width: 80px;
}

.my-sm-btn {
    padding: 6px 8px;
}

.my-title-box {
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    padding-top: 5px;
    padding-bottom: 10px;
}

@media screen and (min-width: 768px) {
    .my-times-box {
        text-align: right;
        font-size: 1.2rem;
        float: right;
        cursor: pointer;
    }
}

@media screen and (max-width: 768px) {
    .my-times-box {
        text-align: right;
        font-size: 1.15rem;
        float: right;
        cursor: pointer;
        padding-right: 5px;
    }
}

.my-return-btn-box {
    float: left;
}

.my-bottom-border-box {
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .print-btn{
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .mobile-center-btns {
        text-align: center;
    }
}

.line-span {
    margin-right: 20px;
}

.a-span {
    cursor: pointer;
    color: #02A7F0;
}

.inline-select {
    min-width: 80px;
    padding: 6px 12px;
    font-size: 0.95rem;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    outline: 0!important;
    box-shadow: none!important;
}

@media screen and (min-width: 768px) {
    .inline-select-lg {
        min-width: 400px;
        padding: 6px 12px;
        font-size: 0.95rem;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        outline: 0!important;
        box-shadow: none!important;
    }
}

@media screen and (max-width: 768px) {
    .inline-select-lg {
        min-width: 50vw;
        padding: 6px 12px;
        font-size: 0.95rem;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        outline: 0!important;
        box-shadow: none!important;
    }
}

.col-1-div {
    width: 100%;
}

.flex-between-div {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.padding-text-div {
    padding: 10px 15px;
}

.search-input-box {
    width: 350px;
}

.flex-search-input-box{
    width: 100%;
    display: flex;
}

.po-table {
    margin-top: 20px;
}


.tag-btn-text {
    outline: none !important;
    border: 1px solid #9f9f9f;
    padding: 2px 4px;
    border-radius: 50%;
    font-size: 0.9rem;
    color: #f9f9f9;
    background: #9f9f9f;
}

.my-top-border-box {
    border-top: 1px solid #9f9f9f;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.my-none-border-box {
    border: none;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    text-align: left;
}

@media screen and (min-width: 950px) {
    .mlg-modal{
        min-width: 950px
    }
}

@media screen and (max-width: 768px) {
    .modal-flex-content-div {
        display: flex;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 768px) {
    .modal-flex-content-div {
        display: flex;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 768px) {
    .modal-inputs-box .col-3-input-mobile {
        width: 30%;
    }
 
    .modal-inputs-box .col-2-input-mobile {
        width: 45%;
    }

    .modal-inputs-box .col-1-input-mobile {
        width: 100%;
    }

    .modal-preview-img-1 {
        max-width:200px
    }
}

@media screen and (max-width: 768px) {
    .modal-inputs-box .col-3-input-mobile {
        width: 100%;
    }
    
    .modal-inputs-box .col-2-input-mobile {
        width: 100%;
    }
    
    .modal-inputs-box .col-1-input-mobile {
        width: 100%;
    }

    .modal-preview-img-1 {
        max-width:120px
    }
}

.md-width-td {
    max-width: 10em;
}

.md-width-td-left-text {
    max-width: 10em;
    text-align: left;
}

.collapse-record-box{
    display: flex;
    padding-bottom: 5px;
}

.collapse-forward-btn {
    outline: none;
    border: 0;
    background: #0000;
    cursor: pointer;
    transition: 0.5s all ease;
}

.collapse-forward-btn:focus {
    outline: none;
}

.acc-control-title-text {
    background-image: -webkit-linear-gradient(bottom,#f50000,#8a0000);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #0000;
    margin-bottom: 10px;
}

.acc-control-content-div {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px #9f9f9f solid;
}

.acc-control-content-div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.acc-control-content-div:first-child {
    padding-top: 0;
}

@media screen and (min-width: 768px) {
    .acc-control-box {
        text-align: left;
        padding: 5px 5px 20px 5px;
        border: 1px #dddddd solid;
        background: #f9f9f9;
    }
}

@media screen and (max-width: 768px) {
    .acc-control-box {
        text-align: left;
        padding: 5px 5px 20px 5px;
        border: 1px #dddddd solid;
        background: #f9f9f9;
        font-size: 0.95rem;
    }
}

.acc-control-content-group {
    margin-bottom: 1em;
}

.acc-c-type-span {
    padding: 0 5px;
    background: #ceffce;
}

.acc-d-type-span {
    background: #ffffd2;
    padding: 0 5px;
}

.acc-dr-type-span {
    background: #dbedf2;
    padding: 0 5px;
}

.acc-control-high-title {
    color: #005fb1;
    font-weight: 600;
}

.settlement-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.settlement-box .child-title-box{
    padding-right: 20px;
}

.settlement-box .child-box{
    padding: 5px 3px;
    border: 1px #9f9f9f solid;
    min-width: 10em;
    align-items: center;
}

.voucher-user-group {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    padding: 5px 15px;
}

@media screen and (min-width: 768px) {
    .voucher-user-group .select-div {
        margin-right: 15px;
    }
}

@media screen and (max-width: 768px) {
    .voucher-user-group .select-div {
        width: 100%;
        margin-bottom: 10px;
    }
}

.type-btn {
    border: 0;
    margin-bottom: 10px;
    cursor: pointer;
}

.yellow-background {
    background: #fffff2;;
}

.float-title{
    position: sticky;
    top: 0px;
    background: #FFF;
}

.transition-dom {
    transition: 0.5s all ease;
}

.blue-background-dom {
    background: #d8f3ff;
}


.index-box {
    margin-right: 0;
    margin-left: 0;
}

.index-box .index-part-box {
    margin-top: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    text-align: center;
    transition: 0.5s all ease;
    cursor: pointer;
    border: 1px #0000 solid;
}

.index-box .index-part-box:hover {
    background: #eefbff;
    border: 1px #afafaf solid;
}

.index-icon {
    font-size: 75px;
}

.radio-option-box {
    font-size: 1.1rem;
    padding: 10px;
    background: #ffffff;
}
/*�p��*/
.chat-iframe-div {
    position: fixed;
    z-index: 3000;
    width: 100vw;
    height: 100vh;
    background: #0000005c;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.chat-iframe-div .chat-iframe-box {
    position: relative;
    box-shadow: 5px 5px 20px #c9e4ff;
    display: inline-block;
    height: 90vh;
    width: 60vh;
    border-radius: 20px ;
    background: #FFFFFF;
}

.chat-iframe-div iframe {
    border: 0;
}
@media screen and (max-width: 768px) {
    .radio-option-box {
        font-size: 0.9rem;
        padding: 0.5rem;
        background: #ffffff;
        /*transition: 0.5s all ease;*/
    }
    .chat-iframe-div {
        position: fixed;
        z-index: 3000;
        width: 100vw;
        height: 100vh;
        background: #0000005c;
        left: 0;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .chat-iframe-div .chat-iframe-box {
        box-shadow: 5px 5px 20px #c9e4ff;
        display: inline-block;
        margin-top: 50px;
        height: calc(100% - 50px);
        width: 100%;
        border-radius: 0px ;
        background: #FFFFFF;
        position: relative;
    }
}


@media screen and (min-width: 768px) {
    .iframe-close-div{
        text-align: right;
        font-size: 2.2rem;
        position: absolute;
        right: 0;
        top: -50px;
        color: #ff7878;
        height: 50px;
        cursor: pointer;
        animation: myBreath 8s ease infinite;
    }
}

@media screen and (max-width: 768px) {
    .iframe-close-div{
        text-align: right;
        font-size: 2.2rem;
        position: absolute;
        right: 15px;
        top: -50px;
        color: #fff;
        height: 50px;
        cursor: pointer;
        animation: myBreath 8s linear infinite;
    }
}

@keyframes myBreath {
    0%{
        color: #fff;
    }
    20%{
        color: #ffa3a3;
    }
    40%{
        color: #ff7878;
    }
    60%{
        color: #ffa0e2;
    }
    80%{
        color: #ffa3a3;
    }
    100%{
        color: #fff;
    }
}

.my-search-downdrop {
    position: absolute;
    overflow-y: auto;
    background: #fefefe;
    z-index: 800;
    width: 100%;
    text-align: left;
    /* max-height: 15.6em; */
    max-height: 0;
    border: 1px #e5e5e5 solid;
    display: none;
    opacity: 0;
    transition: 0.5s all ease;
}

.my-search-downdrop .option-box{
    padding: 0.8em 0.2em;
    line-height: 1em;
    transition: 0.5s all ease;
    cursor: pointer;
}

.my-search-downdrop .option-box:hover{
    color: #ffffff;
    background: #02A7F0;
}

.flex-center-content {
    display: flex;
    align-items: center;
}

.reset-btn-1 {
    font-size: 1.05rem;
    margin-left: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px #9f9f9f solid;
}

.customer-group-box {
    border: #edf8ff 1px solid;
    border-radius: 5px;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.customer-group-box .group-out-box {
    margin-bottom: 15px;
    border-bottom: 1px #e1e1e1 solid;
    padding-bottom: 15px;
}

.customer-group-box .group-out-box:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}


.customer-group-box .group-div {
    background: #edf8ff;
    display: flex;
    justify-content: space-between;
    padding: 5px 15px;
    text-align: left;
}

.customer-group-box .group-item-div {
    padding: 10px;
    border-bottom: 1px #e1e1e1 solid;
}

.customer-group-box .group-item-div:last-child {
    padding: 10px;
    border-bottom: 0;
}

.customer-group-box .group-item-div .item-title {
    display: flex;
    justify-content: space-between;
}

.customer-group-box .group-item-div .item-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
	border-spacing: 0;
}
.dataTable th {
            background: var(--light);
            padding: 15px;
            text-align: left;
            font-weight: 600;
            color: var(--dark);
            white-space: nowrap;
        }

.table th,
.table td,
.dataTable td{
   padding: 15px;
    border-bottom: 1px solid #eee;
   /** white-space: nowrap;**/
}

.table.erp-data-pro-table th,
.table.erp-data-pro-table td{
   padding: 12px 15px;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
	font-size:0.95rem;
	white-space:normal;
}

.btn-three{
            background: var(--light);
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
		 
        .date-selector-container {
            background: #f8fafd;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 30px;
			margin-top:25px;
            border: 1px solid #e1e8f0;
        }
        
        .date-selector-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .date-selector-title i {
            color: var(--secondary);;
            font-size: 20px;
            margin-right: 10px;
        }
        
        .date-selector-title h3 {
            color: #2d3748;
            font-size: 18px;
            font-weight: 600;
        }
        
        .date-range-selector {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .date-input-group {
            flex: 1;
            min-width: 250px;
        }
        
        .date-input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #4a5568;
            font-size: 14px;
        }
        
        .date-input-wrapper {
            position: relative;
        }
        
        .date-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #d1d9e6;
            border-radius: 8px;
            font-size: 15px;
            color: #333;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .date-input:focus {
            outline: none;
            border-color: #4b6cb7;
            box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.1);
        }
        
        .date-input-wrapper i {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);;
            pointer-events: none;
        }
        
        .date-range-divider {
            color: #a0aec0;
            font-weight: 600;
            font-size: 18px;
            margin: 0 10px;
        }
        
        .date-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            width: 100%;
        }
        
        .date-action-btn {
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .date-action-btn.apply {
            background: var(--secondary);;
            color: white;
        }
        
        .date-action-btn.apply:hover {
            background: #3a5795;
            transform: translateY(-2px);
        }
        
        .date-action-btn.reset {
            background: #f7fafc;
            color: #4a5568;
            border: 1px solid #e2e8f0;
        }
        
        .date-action-btn.reset:hover {
            background: #edf2f7;
        }
        
        .quick-date-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        
        .quick-date-btn {
            padding: 8px 16px;
            background: #edf2f7;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            color: #4a5568;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .quick-date-btn:hover {
            background: #e2e8f0;
        }
        
        .quick-date-btn.active {
            background: var(--secondary);;
            color: white;
        }
         .customers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .customer-card {
            background-color: white;
            border-radius: 10px;
            padding: 22px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border: 1px solid #eaeaea;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 18px;
            cursor: pointer;
            position: relative;
        }
        
        .customer-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            border-color: #cce0f0;
        }
        
        .customer-card.selected {
            border-color: #2c87c9;
            background-color: #f0f8ff;
        }
        
        .customer-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1a6bb3 0%, #2c87c9 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
            flex-shrink: 0;
        }
        
        .customer-info {
            flex: 1;
        }
        
        .customer-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .customer-code {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
        
        .customer-detailss {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 0.9rem;
            color: #555;
        }
        
        .customer-detailss i {
            width: 18px;
            color: #2c87c9;
        }
        
        .select-indicator {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }
        
        .customer-card.selected .select-indicator {
            background-color: #2c87c9;
            border-color: #2c87c9;
        }
        

        .client-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .client-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--secondary), var(--accent));
        }

        .client-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .client-card.active {
            border: 2px solid var(--secondary);
        }

        .client-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .client-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--secondary), var(--purple));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 1.5rem;
            box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3);
        }

        .client-status {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .client-status.active {
            background: var(--success);
            color: white;
        }

        .client-status.inactive {
            background: var(--danger);
            color: white;
        }

        .client-name {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .client-id {
            font-size: 0.8rem;
            color: var(--gray);
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .client-id i {
            color: var(--secondary);
        }

        .client-title {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 10px;
        }

        .client-info {
            margin-top: 15px;
        }

        .client-info-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            font-size: 0.9rem;
        }

        .client-info-item i {
            width: 16px;
            color: var(--secondary);
        }

        /* Client Actions */
        .client-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
            gap: 5px;
        }

        .client-actions button {
            flex: 1;
            padding: 8px 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            min-height: 50px;
            justify-content: center;
        }

        .client-actions button i {
            font-size: 0.9rem;
        }

        .btn-edit {
            background-color: rgba(52, 152, 219, 0.1);
            color: var(--secondary);
        }

        .btn-edit:hover {
            background-color: var(--secondary);
            color: white;
        }

        .btn-verify {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success);
        }

        .btn-verify:hover {
            background-color: var(--success);
            color: white;
        }

        .btn-delete {
            background-color: rgba(231, 76, 60, 0.1);
            color: var(--danger);
        }

        .btn-delete:hover {
            background-color: var(--danger);
            color: white;
        }

        .btn-products {
            background-color: rgba(155, 89, 182, 0.1);
            color: var(--purple);
        }

        .btn-products:hover {
            background-color: var(--purple);
            color: white;
        }

        .btn-email {
            background-color: rgba(241, 196, 15, 0.1);
            color: #f1c40f;
        }

        .btn-email:hover {
            background-color: #f1c40f;
            color: white;
        }

		
        .products-count {
            color: #666;
            font-size: 0.95rem;
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border: 1px solid #eaeaea;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            position: relative; 
			margin-top: 20px;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            border-color: #b8e6cd;
        }
        
        .product-card.selected {
            border-color: #3cb371;
            background-color: #f0fff5;
        }
        
        .product-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .product-image {
            height: 180px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-bottom: 1px solid #eee;
        }
        
        
        .product-info {
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .product-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        
        .product-code {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .product-description {
            color: #555;
            font-size: 0.9rem;
            margin-bottom: 15px;
            flex: 1;
            line-height: 1.5;
			min-height: 3em;
			/* 合并简写（部分现代浏览器支持） */
			-webkit-box: vertical 2;
			overflow: hidden;
        }
        
        .product-specs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .spec-badge {
            background-color: #f1f8ff;
            color: #2c87c9;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        .product-pricing {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
        }
        
        .product-price {
            font-size: 1.2rem;
            font-weight: 700;
            color: #e74c3c;
        }
        
        .product-stock {
            font-size: 0.9rem;
            color: #666;
            display: flex;
            align-items: center;
            gap: 5px;
        }
		
		.light-dark-bgcolor,
.label.light-dark-bgcolor {
    background: linear-gradient(45deg, #708090, #7c8ea0) !important;
    color: #fff !important;
}

.profile-header{
	min-height: 150px;
	color: #fff;
}

.profile-userbuttons {
    text-align: center;
    margin-top: 10px;
}

.doctor-profile {
    width: 100%;
    text-align: center;
}
.user-name{
	padding: 3px;
    font-size: 22px;
    text-align: center;
    padding-top: 10px;
}
.user-img {
    padding: 3px;
    border-radius: 50% 50% 50% 50%;
    max-width: 112px;
    margin-top: -70px;
    box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.3);
    margin-bottom: 20px;
}


.deepPink-bgcolor,
.label.deepPink-bgcolor {
    background-color: #e91e63 !important;
    color: #fff !important;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem
}
.card {
    position: relative;
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 3px;
    -webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
    /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); */
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.card:before,
.card:after {
    content: " ";
    display: table;
}
.card:after {
    clear: both;
}
.card > .nano:last-child {
    border-radius: 0 0 2px 2px;
}
.card.no-shadow {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.card-head {
    border-radius: 2px 2px 0 0;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
    padding: 2px;
    /* text-transform: uppercase; */
    color: #3a405b;
    font-size: 13px;
    font-weight: 500;
    line-height: 40px;
    min-height: 40px;
}
.card-head:before,
.card-head:after {
    content: " ";
    display: table;
}
.card-head:after {
    clear: both;
}
.card-head header {
    display: inline-block;
    padding: 8px 10px;
    vertical-align: middle;
    line-height: 17px;
    font-size: 16px;
}
.card-head header > h1,
.card-head header > h2,
.card-head header > h3,
.card-head header > h4,
.card-head header > h5,
.card-head header > h6 {
    vertical-align: middle;
    margin: 0;
    line-height: 1;
}
.card-head header small {
    color: inherit;
    opacity: 0.6;
    font-size: 75%;
}
.card-head > div {
    /*display: inline-block;*/
}
.card-head .tools {
    padding-right: 16px;
    float: right;
    margin-top: 7px;
    margin-bottom: 7px;
    margin-left: 24px;
    line-height: normal;
    vertical-align: middle;
}
.card-head .tools .btn {
    border-radius: 2px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 0px 2px;
    font-size: 12px;
    background: transparent;
}
.card-head .tools .btn-color {
    color: #97a0b3;
    margin-right: 3px;
    font-size: 12px;
}
.card-head .tools .btn-color:hover {
    color: black;
}
.card-head.card-head-xs header {
    font-size: 14px;
}
.card-head.card-head-sm header {
    font-size: 14px;
}
.card-head.card-head-lg header {
    font-size: 18px;
}
.card-body {
    padding: 10px 15px 14px 15px;
    position: relative;
}
.card-body:before,
.card-body:after {
    content: " ";
    display: table;
}
.card-body:after {
    clear: both;
}
.card-body:last-child {
    border-radius: 0 0 2px 2px;
}
.card-body.table-responsive {
    margin: 0;
}
.card-actionbar {
    padding-bottom: 8px;
    position: relative;
}
.card-actionbar:before,
.card-actionbar:after {
    content: " ";
    display: table;
}
.card-actionbar:after {
    clear: both;
}
.card-actionbar:last-child {
    border-radius: 0 0 2px 2px;
}
.card-actionbar-row {
    padding: 6px 16px;
    text-align: right;
}
.card-tiles > .row,
.card-type-blog-masonry > .row {
    margin: 0;
}
.card-tiles > .row > [class^="col-"],
.card-type-blog-masonry > .row > [class^="col-"] {
    padding: 0;
}
.card-underline .card-head {
    border-bottom: 1px solid rgba(150, 156, 156, 0.4);
}
.card-underline .card-foot {
    border-top: 1px solid rgba(150, 156, 156, 0.4);
}
.card-bordered,
.card-outlined {
    border: 2px solid #969c9c;
}
.cardbox:hover {
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    transition: all 150ms linear;
}

.m-b-20{
	margin-bottom: 20px !important;
}


.mw-100 {
    max-width: 100%!important
}

.mh-100 {
    max-height: 100%!important
}

.m-0 {
    margin: 0!important
}

.mt-0,.my-0 {
    margin-top: 0!important
}

.mr-0,.mx-0 {
    margin-right: 0!important
}

.mb-0,.my-0 {
    margin-bottom: 0!important
}

.ml-0,.mx-0 {
    margin-left: 0!important
}

.m-1 {
    margin: .25rem!important
}

.mt-1,.my-1 {
    margin-top: .25rem!important
}

.mr-1,.mx-1 {
    margin-right: .25rem!important
}

.mb-1,.my-1 {
    margin-bottom: .25rem!important
}

.ml-1,.mx-1 {
    margin-left: .25rem!important
}

.m-2 {
    margin: .5rem!important
}

.mt-2,.my-2 {
    margin-top: .5rem!important
}

.mr-2,.mx-2 {
    margin-right: .5rem!important
}

.mb-2,.my-2 {
    margin-bottom: .5rem!important
}

.ml-2,.mx-2 {
    margin-left: .5rem!important
}

.m-3 {
    margin: 1rem!important
}

.mt-3,.my-3 {
    margin-top: 1rem!important
}

.mr-3,.mx-3 {
    margin-right: 1rem!important
}

.mb-3,.my-3 {
    margin-bottom: 1rem!important
}

.ml-3,.mx-3 {
    margin-left: 1rem!important
}

.m-4 {
    margin: 1.5rem!important
}

.mt-4,.my-4 {
    margin-top: 1.5rem!important
}

.mr-4,.mx-4 {
    margin-right: 1.5rem!important
}

.mb-4,.my-4 {
    margin-bottom: 1.5rem!important
}

.ml-4,.mx-4 {
    margin-left: 1.5rem!important
}

.m-5 {
    margin: 3rem!important
}

.mt-5,.my-5 {
    margin-top: 3rem!important
}

.mr-5,.mx-5 {
    margin-right: 3rem!important
}

.mb-5,.my-5 {
    margin-bottom: 3rem!important
}

.ml-5,.mx-5 {
    margin-left: 3rem!important
}


.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}



.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6
}

.page-link:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6
}

.page-link:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25)
}

.page-link:not(:disabled):not(.disabled) {
    cursor: pointer
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.page-item:last-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6
}

.pagination-lg .page-link {
    padding: .75rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.pagination-sm .page-link {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem
}

.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem
}