:root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --dark-color: #2c3e50;
			--primary: #3a86ff;
			--primary-dark: #2667cc;
			--secondary: #6c63ff;
			--accent: #00cffd;
			--dark: #0f172a;
			--light: #f8fafc;
			--success: #10b981;
			--warning: #f59e0b;
			--danger: #ef4444;
			--gray-100: #f3f4f6;
			--gray-200: #e5e7eb;
			--gray-300: #d1d5db;
			--gray-400: #9ca3af;
			--gray-500: #6b7280;
			--gray-600: #4b5563;
			--gray-700: #374151;
			--gray-800: #1f2937;
			--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
			--gradient-accent: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
			--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
			--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
			--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
			--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
			--shadow-primary: 0 10px 25px -5px rgba(58, 134, 255, 0.3);
			--border-radius-sm: 0.375rem;
			--border-radius: 0.5rem;
			--border-radius-md: 0.75rem;
			--border-radius-lg: 1rem;
			--border-radius-xl: 1.5rem;
			--border-radius-2xl: 2rem;
			--border-radius-full: 9999px;			
        }
        
        :root {
			--primary: #3a86ff;
            --bs-body-bg: #f8f9fa;
            --bs-body-color: #212529;
            --bs-card-bg: #ffffff;
            --bs-border-color: #dee2e6;
            --bs-text-muted: #6c757d;
            --bs-header-bg: #ffffff;
            --bs-chart-grid: rgba(0, 0, 0, 0.1);
            --bs-sidebar-bg: var(--dark-color);
            --bs-sidebar-color: rgba(255, 255, 255, 0.8);
            --bs-sidebar-hover: rgba(255, 255, 255, 0.1);
            --bs-sidebar-active: white;
            --bs-task-border: #eee;
        }
        
        /* [data-bs-theme="dark"] {
			--primary: #2667cc;
            --bs-body-bg: #212529;
            --bs-body-color: #e9ecef;
            --bs-card-bg: #343a40;
            --bs-border-color: #495057;
            --bs-text-muted: #adb5bd;
            --bs-header-bg: #343a40;
            --bs-chart-grid: rgba(255, 255, 255, 0.1);
            --bs-sidebar-bg: #1a1d20;
            --bs-sidebar-color: rgba(255, 255, 255, 0.6);
            --bs-sidebar-hover: rgba(255, 255, 255, 0.1);
            --bs-sidebar-active: white;
            --bs-task-border: #495057;
        } */

		body,
		html,
		.cover-container {
            background-color: var(--bs-body-bg);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--bs-body-color);
        }
        
        .dashboard-header {
            background-color: var(--bs-header-bg);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 1rem 0;
            margin-bottom: 2rem;
        }

		.header-title 
		{
			padding : 0 1rem;
			border: solid 2px var(--bs-border-color) !important;
            border-radius: 10px;
            /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
            margin-bottom: 1.5rem;
            border: none;
            transition: transform 0.2s;
            background-color: var(--bs-card-bg);
        }
        .card {
			border: solid 2px var(--bs-border-color) !important;
            border-radius: 10px;
            /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
            margin-bottom: 1.5rem;
            border: none;
            transition: transform 0.2s;
            background-color: var(--bs-card-bg);
        }
        
        .card:hover {
            transform: translateY(-5px);
            /* box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); */
        }
        
        .card-header {
			justify-content: space-between;
			display: flex;
            border-radius: 10px 10px 0 0 !important;
            font-weight: 600;
            background-color: var(--bs-card-bg) !important;
            border-bottom-color: var(--bs-border-color);
        }

		.card-footer {
            background-color: var(--bs-card-bg) !important;
            border-top-color: var(--bs-border-color);
        }
        
        .progress {
            height: 10px;
            border-radius: 5px;
            background-color: var(--bs-border-color);
        }
        
        .stat-card {
            text-align: center;
            padding: 1.5rem;
        }
        
        .stat-card i {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        
        .stat-card .stat-number {
            font-size: 1.8rem;
            font-weight: 700;
        }
        
        .stat-card .stat-label {
            font-size: 0.9rem;
            color: var(--bs-text-muted);
        }
        
        .team-member {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .team-member img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .team-member .progress {
            flex-grow: 1;
        }
        
        .milestone {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        
        .milestone-date {
            width: 100px;
            font-size: 0.85rem;
            color: var(--bs-text-muted);
        }
        
        .milestone-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin: 0 15px;
        }
        
        .milestone-complete {
            background-color: var(--secondary-color);
        }
        
        .milestone-pending {
            background-color: var(--warning-color);
        }
        
        .milestone-overdue {
            background-color: var(--danger-color);
        }
        
        .milestone-text {
            flex-grow: 1;
        }
        
        .task-list {
            list-style: none;
            padding-left: 0;
        }
        
        .task-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--bs-task-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .task-list li:last-child {
            border-bottom: none;
        }
        
        .badge {
            font-weight: 500;
            padding: 0.5em 0.75em;
        }
        
        .badge-high {
            background-color: var(--danger-color);
        }
        
        .badge-medium {
            background-color: var(--warning-color);
        }
        
        .badge-low {
            background-color: var(--secondary-color);
        }
        
        .main-content {
            margin-left: 250px;
            padding: 2rem;
        }
        
        @media (max-width: 992px) {
            .sidebar {
                position: static;
                height: auto;
                margin-bottom: 2rem;
            }
            
            .main-content {
                margin-left: 0;
                padding: 1rem;
            }
        }
        
        .risks-table td, .risks-table th {
            padding: 0.75rem;
            vertical-align: middle;
        }
        
        .risk-indicator {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }
        
        .risk-high {
            background-color: var(--danger-color);
        }
        
        .risk-medium {
            background-color: var(--warning-color);
        }
        
        .risk-low {
            background-color: var(--secondary-color);
        }
        
        .theme-toggle-wrapper {
            margin-right: 15px;
        }
        
        .theme-toggle {
            width: 50px;
            height: 25px;
            position: relative;
            display: inline-block;
        }
        
        .theme-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 25px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 19px;
            width: 19px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #2c3e50;
        }
        
        input:checked + .slider:before {
            transform: translateX(25px);
        }
        
        .theme-icon {
            position: absolute;
            top: 5px;
            z-index: 1;
            color: #fff;
            font-size: 14px;
        }
        
        .theme-icon-light {
            left: 7px;
            opacity: 1;
            transition: .4s;
        }
        
        .theme-icon-dark {
            right: 7px;
            opacity: 0;
            transition: .4s;
        }
        
        input:checked ~ .theme-icon-light {
            opacity: 0;
        }
        
        input:checked ~ .theme-icon-dark {
            opacity: 1;
        }
		
.mr-1 {
	margin-right: 5px;
}

.mr-3 {
	margin-right: 15px;
}

.navbar-brand
{
	width: 250px;
}

.table-responsive
{
	overflow-x: hidden;
}

.btn-toggle {
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::before {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--bs-tertiary-bg);
}

.scrollarea {
  overflow-y: auto;
}


		/* :root {
			--primary: #3a86ff;
			--primary-dark: #2667cc;
			--secondary: #6c63ff;
			--accent: #00cffd;
			--dark: #0f172a;
			--light: #f8fafc;
			--success: #10b981;
			--warning: #f59e0b;
			--danger: #ef4444;
			--gray-100: #f3f4f6;
			--gray-200: #e5e7eb;
			--gray-300: #d1d5db;
			--gray-400: #9ca3af;
			--gray-500: #6b7280;
			--gray-600: #4b5563;
			--gray-700: #374151;
			--gray-800: #1f2937;
			--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
			--gradient-accent: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
			--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
			--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
			--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
			--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
			--shadow-primary: 0 10px 25px -5px rgba(58, 134, 255, 0.3);
			--border-radius-sm: 0.375rem;
			--border-radius: 0.5rem;
			--border-radius-md: 0.75rem;
			--border-radius-lg: 1rem;
			--border-radius-xl: 1.5rem;
			--border-radius-2xl: 2rem;
			--border-radius-full: 9999px;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		 */



		.login-container {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			overflow: hidden;
			background-color: var(--bs-body-bg);
			padding: 0px;
			margin: 0px;
			max-height: 900px;
			padding-bottom: 100px;
		}

		/* 배경 디자인 요소 */
		.background-design {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			overflow: hidden;
			background-color: var(--light);
		}

		.bg-shape {
			position: absolute;
			border-radius: var(--border-radius-full);
			filter: blur(120px);
			opacity: 0.08;
		}

		.shape-1 {
			background: var(--primary);
			width: 60vw;
			height: 60vw;
			top: -20%;
			right: -20%;
		}

		.shape-2 {
			background: var(--secondary);
			width: 40vw;
			height: 40vw;
			bottom: -10%;
			left: -10%;
		}

		.shape-3 {
			background: var(--accent);
			width: 25vw;
			height: 25vw;
			top: 50%;
			left: 30%;
			transform: translateY(-50%);
		}

		.grid-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image:
				linear-gradient(to right, rgba(209, 213, 219, 0.05) 1px, transparent 1px),
				linear-gradient(to bottom, rgba(209, 213, 219, 0.05) 1px, transparent 1px);
			background-size: 35px 35px;
		}

		/* 주요 컨텐츠 영역 */
		.content-wrapper {
			position: relative;
			z-index: 10;
			display: flex;
			width: 90%;
			max-width: 1400px;
			height: 90%;
			max-height: 900px;
			margin: auto;
			border-radius: var(--border-radius-xl);
			overflow: hidden;
			box-shadow: var(--shadow-lg);
			background-color: rgba(255, 255, 255, 0.85);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
		}

		/* 왼쪽 브랜드 섹션 */
		.brand-section {
			flex: 1;
			padding: 0rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			overflow: hidden;
			background: rgba(15, 23, 42, 0.95);
			color: white;
		}

		.brand-content {
			position: relative;
			z-index: 2;
		}

		.brand-logo {
			margin-bottom: 3rem;
			display: flex;
			align-items: center;
		}

		.brand-logo img {
			height: 40px;
			margin-right: 1rem;
		}

		.brand-logo h2 {
			font-weight: 700;
			font-size: 1.5rem;
			margin: 0;
			background: var(--gradient-accent);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			letter-spacing: -0.02em;
		}

		.brand-title {
			font-size: 3rem;
			font-weight: 800;
			line-height: 1.2;
			margin-bottom: 1.5rem;
			letter-spacing: -0.03em;
			background: var(--gradient-primary);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.brand-description {
			font-size: 1.125rem;
			line-height: 1.7;
			color: var(--gray-300);
			margin-bottom: 2rem;
			max-width: 500px;
		}

		.feature-list {
			list-style: none;
			padding: 0;
			margin: 2rem 0;
		}

		.feature-item {
			display: flex;
			align-items: center;
			margin-bottom: 1.2rem;
			font-size: 1.1rem;
			color: var(--gray-300);
		}

		.feature-icon {
			width: 32px;
			height: 32px;
			border-radius: var(--border-radius);
			background: rgba(255, 255, 255, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 1rem;
			color: var(--accent);
		}

		.brand-footer {
			color: var(--gray-400);
			font-size: 0.9rem;
		}

		/* 오른쪽 로그인 섹션 */
		.login-section {
			flex: 1;
			padding: 0rem;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}

		.login-box {
			width: 100%;
			max-width: 420px;
		}

		.login-header {
			margin-bottom: 2.5rem;
		}

		.login-header h2 {
			font-size: 2.25rem;
			font-weight: 700;
			margin-bottom: 0.75rem;
			color: var(--dark);
			letter-spacing: -0.02em;
		}

		.login-header p {
			font-size: 1.1rem;
			color: var(--gray-500);
		}

		.login-form {
			margin-bottom: 2rem;
		}

		.form-group {
			margin-bottom: 1.5rem;
		}

		.form-label {
			display: block;
			font-size: 0.95rem;
			font-weight: 500;
			margin-bottom: 0.5rem;
			color: var(--gray-700);
		}

		.form-control {
			width: 100%;
			height: 56px;
			padding: 1rem 1.25rem;
			font-size: 1rem;
			border: 1px solid var(--gray-200);
			border-radius: var(--border-radius-md);
			background-color: --dark;
			transition: all 0.3s ease;
			color: var(--gray-800);
		}

		.form-control:focus {
			outline: none;
			border-color: var(--primary);
			box-shadow: 0 0 0 4px rgba(58, 134, 255, 0.1);
		}

		.input-with-icon {
			position: relative;
		}

		.input-icon {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 1.25rem;
			color: var(--gray-400);
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.input-icon:hover {
			color: var(--primary);
		}

		.login-form-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 2rem;
		}

		.form-check {
			display: flex;
			align-items: center;
		}

		.form-check-input {
			width: 18px;
			height: 18px;
			margin-right: 0.5rem;
			cursor: pointer;
			border: 1px solid var(--gray-300);
			border-radius: 4px;
		}

		.form-check-input:checked {
			background-color: var(--primary);
			border-color: var(--primary);
		}

		.form-check-label {
			font-size: 0.9rem;
			color: var(--gray-600);
			cursor: pointer;
		}

		.forgot-password {
			font-size: 0.9rem;
			color: var(--primary);
			text-decoration: none;
			font-weight: 500;
			transition: all 0.3s ease;
		}

		.forgot-password:hover {
			color: var(--primary-dark);
			text-decoration: underline;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 56px;
			padding: 0 1.5rem;
			font-size: 1rem;
			font-weight: 600;
			border-radius: var(--border-radius-md);
			cursor: pointer;
			transition: all 0.3s ease;
			border: none;
			outline: none;
		}

		.btn-primary {
			background: var(--gradient-primary);
			color: white;
			box-shadow: var(--shadow-primary);
		}

		.btn-primary:hover {
			transform: translateY(-2px);
			box-shadow: 0 10px 25px -5px rgba(58, 134, 255, 0.4);
		}

		.btn-primary:active {
			transform: translateY(0);
		}

		.btn-block {
			width: 100%;
		}

		.login-divider {
			display: flex;
			align-items: center;
			margin: 2rem 0;
			color: var(--gray-400);
		}

		.login-divider::before,
		.login-divider::after {
			content: '';
			flex: 1;
			height: 1px;
			background-color: var(--gray-200);
		}

		.login-divider span {
			padding: 0 1rem;
			font-size: 0.9rem;
		}

		.social-login {
			display: flex;
			justify-content: space-between;
			gap: 1rem;
			margin-bottom: 2rem;
		}

		.social-btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 48px;
			border-radius: var(--border-radius-md);
			background-color: white;
			border: 1px solid var(--gray-200);
			color: var(--gray-600);
			font-size: 1.25rem;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.social-btn:hover {
			background-color: var(--gray-100);
			color: var(--gray-800);
			transform: translateY(-2px);
			box-shadow: var(--shadow);
		}

		.login-footer {
			text-align: center;
			font-size: 0.95rem;
			color: var(--gray-500);
		}

		.login-footer a {
			color: var(--primary);
			text-decoration: none;
			font-weight: 500;
		}

		.login-footer a:hover {
			text-decoration: underline;
		}

		/* 애니메이션 효과 */
		.floating-shape {
			position: absolute;
			background: rgba(255, 255, 255, 0.1);
			border-radius: var(--border-radius-full);
		}

		.shape-float-1 {
			width: 200px;
			height: 200px;
			bottom: -100px;
			right: -50px;
			animation: float 15s ease-in-out infinite;
		}

		.shape-float-2 {
			width: 100px;
			height: 100px;
			top: 20%;
			right: 10%;
			animation: float 12s ease-in-out infinite 2s;
		}

		.shape-float-3 {
			width: 70px;
			height: 70px;
			bottom: 30%;
			left: 10%;
			animation: float 10s ease-in-out infinite 1s;
		}

		@keyframes float {

			0%,
			100% {
				transform: translateY(0) rotate(0deg);
			}

			50% {
				transform: translateY(-20px) rotate(10deg);
			}
		}

		/* 로딩 애니메이션 */
		.spinner {
			width: 24px;
			height: 24px;
			border: 3px solid rgba(255, 255, 255, 0.3);
			border-radius: 50%;
			border-top-color: white;
			animation: spin 1s ease-in-out infinite;
			margin-right: 0.5rem;
			display: none;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}

		/* 반응형 디자인 */
		@media (max-width: 1200px) {
			.content-wrapper {
				width: 95%;
				height: 95%;
			}

			.brand-section,
			.login-section {
				padding: 0rem;
			}

			.brand-title {
				font-size: 2.5rem;
			}
		}

		@media (max-width: 992px) {
			.brand-section {
				display: none;
			}

			.login-section {
				flex: 1;
			}

			.login-box {
				max-width: 500px;
			}
		}

		@media (max-width: 576px) {
			.content-wrapper {
				width: 100%;
				height: 100%;
				border-radius: 0;
			}

			.login-section {
				padding: 0rem;
			}

			.login-header h2 {
				font-size: 2rem;
			}

			.social-login {
				flex-direction: column;
			}
		}

		/* 다크 모드 토글 */
		.theme-toggle {
			position: absolute;
			top: 1.5rem;
			right: 1.5rem;
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: var(--border-radius-full);
			background-color: var(--gray-100);
			color: var(--gray-600);
			cursor: pointer;
			transition: all 0.3s ease;
			z-index: 20;
		}

		.theme-toggle:hover {
			background-color: var(--gray-200);
			color: var(--gray-800);
		}

		/* 보안 상태 표시 */
		.security-status {
			position: absolute;
			bottom: 1.5rem;
			right: 1.5rem;
			display: flex;
			align-items: center;
			font-size: 0.85rem;
			color: var(--success);
		}

		.security-status i {
			margin-right: 0.5rem;
		}

		html,
		body {
			height: 100%;
		}

		.form-signin {
			max-width: 530px;
			padding: 1rem;
			border-radius: 10px;
		}

		[data-bs-theme=dark] .form-signin {
			background-color: #212529;
		}

		[data-bs-theme=light] .form-signin {
			background-color: #e0e0e0;
		}

		.form-signin .form-floating:focus-within {
			z-index: 2;
		}

		.form-signin input[type="email"] {
			margin-bottom: -1px;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
		}

		.form-signin input[type="password"] {
			margin-bottom: 10px;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		.bd-placeholder-img {
			font-size: 1.125rem;
			text-anchor: middle;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none
		}

		@media (min-width: 768px) {
			.bd-placeholder-img-lg {
				font-size: 3.5rem
			}
		}

		.b-example-divider {
			width: 100%;
			height: 3rem;
			background-color: #0000001a;
			border: solid rgba(0, 0, 0, .15);
			border-width: 1px 0;
			box-shadow: inset 0 .5em 1.5em #0000001a, inset 0 .125em .5em #00000026
		}

		.b-example-vr {
			flex-shrink: 0;
			width: 1.5rem;
			height: 100vh
		}

		.bi {
			vertical-align: -.125em;
			fill: currentColor
		}

		.nav-scroller {
			position: relative;
			z-index: 2;
			height: 2.75rem;
			overflow-y: hidden
		}

		.nav-scroller .nav {
			display: flex;
			flex-wrap: nowrap;
			padding-bottom: 1rem;
			margin-top: -1px;
			overflow-x: auto;
			text-align: center;
			white-space: nowrap;
			-webkit-overflow-scrolling: touch
		}

		.btn-bd-primary {
			--bd-violet-bg: #712cf9;
			--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
			--bs-btn-font-weight: 600;
			--bs-btn-color: var(--bs-white);
			--bs-btn-bg: var(--bd-violet-bg);
			--bs-btn-border-color: var(--bd-violet-bg);
			--bs-btn-hover-color: var(--bs-white);
			--bs-btn-hover-bg: #6528e0;
			--bs-btn-hover-border-color: #6528e0;
			--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
			--bs-btn-active-color: var(--bs-btn-hover-color);
			--bs-btn-active-bg: #5a23c8;
			--bs-btn-active-border-color: #5a23c8
		}

		.bd-mode-toggle {
			z-index: 1500
		}

		.bd-mode-toggle .bi {
			width: 1em;
			height: 1em
		}

		.bd-mode-toggle .dropdown-menu .active .bi {
			display: block !important
		}

		.select_button {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #c0c0c0;
			color: #000000;
			cursor: hand;
			border-radius: 5px;
			;
		}

		.select_button span {
			padding: 5px;
			font-size: 20px;
		}

		.select_button_group {
			margin-bottom: 20px;
		}

		.select_button_group .active {
			background-color: #0025e7;
			color: #ffffff;
		}