body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #121212;
            color: #e0e0e0;
            width: 100%;
            min-width: 1200px;
        }
        .container {
            display: flex;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        .left-column {
            flex: 0 0 300px;
            padding: 20px;
            background-color: #1F2937;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255,255,255,0.1);
            margin-right: 20px;
        }
        .right-column {
            flex: 1;
            padding: 20px;
            background-color: #1F2937;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255,255,255,0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
		
		.editorGradient
		{
			 background-image: linear-gradient(
			130deg,
			hsl(263deg 96% 9%) 1%,
			hsl(256deg 49% 15%) 58%,
			hsl(258deg 35% 20%) 73%,
			hsl(259deg 27% 26%) 81%,
			hsl(260deg 21% 31%) 87%,
			hsl(261deg 17% 37%) 91%,
			hsl(261deg 13% 43%) 94%,
			hsl(262deg 11% 49%) 96%,
			hsl(262deg 10% 55%) 97%,
			hsl(262deg 10% 61%) 98%,
			hsl(262deg 10% 67%) 99%,
			hsl(263deg 11% 73%) 99%,
			hsl(263deg 11% 80%) 100%,
			hsl(263deg 11% 87%) 100%,
			hsl(263deg 11% 93%) 100%,
			hsl(0deg 0% 100%) 100%
		  );
		}
		
        h1 {
            color: #bb86fc;
            text-align: center;
        }
        textarea, input[type="file"] {
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
            background-color: #2c2c2c;
            color: #e0e0e0;
            border: 1px solid #bb86fc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        textarea {
            height: 200px;
        }
        button {
            display: inline-block;
            padding: 8px 15px;
            margin: 5px;
            background: linear-gradient(45deg, #bb86fc, #3700b3);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: 0.3s;
        }
        button:hover {
            background: linear-gradient(45deg, #3700b3, #bb86fc);
        }
        #tableContainer {
            margin-top: 20px;
            overflow-x: auto;
            flex-grow: 1;
        }
        #exportButtons {
            margin-top: 20px;
            text-align: center;
        }
        table.dataTable {
            color: #000000;
            background-color: #ffffff;
            font-size: 12px;
        }
        .dataTables_wrapper .dataTables_length, 
        .dataTables_wrapper .dataTables_filter, 
        .dataTables_wrapper .dataTables_info, 
        .dataTables_wrapper .dataTables_processing, 
        .dataTables_wrapper .dataTables_paginate {
            color: #e0e0e0;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: #e0e0e0 !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            color: #121212 !important;
            background: #bb86fc;
            border: 1px solid #bb86fc;
        }
        table.dataTable thead th, 
        table.dataTable thead td {
            border-bottom: 1px solid #bb86fc;
        }
        table.dataTable tbody tr {
            background-color: #ffffff;
        }
        table.dataTable tbody tr:nth-child(even) {
            background-color: #f8f8f8;
        }
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 15px;
        }
        .dataTables_wrapper .dataTables_length {
            margin-bottom: 15px;
        }
        #filterContainer {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .filter-select {
            flex: 1;
            min-width: 150px;
        }
        .select2-container {
            min-width: 150px;
        }
        .select2-container--default .select2-selection--single {
            background-color: #2c2c2c;
            border: 1px solid #bb86fc;
            border-radius: 4px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #e0e0e0;
            line-height: 28px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 26px;
            position: absolute;
            top: 1px;
            right: 1px;
            width: 20px;
        }
        .select2-dropdown {
            background-color: #2c2c2c;
            border: 1px solid #bb86fc;
        }
        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #bb86fc;
            color: #ffffff;
        }
        .select2-container--default .select2-results__option {
            color: #e0e0e0;
        }
		
		 /* Base styles */
        body, html {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            /*background: linear-gradient(135deg, rgba(18,18,18,1) 0%, rgba(18,18,18,0.95) 50%, rgba(41,121,255,0.1) 100%);*/
            color: #e0e0e0;
            height: 100%;
            background-attachment: fixed;
        }
		
		.gradient {
		  background-image: linear-gradient(
			135deg,
			hsl(0deg 0% 0%) 0%,
			hsl(263deg 100% 12%) 33%,
			hsl(263deg 74% 16%) 50%,
			hsl(263deg 60% 20%) 62%,
			hsl(264deg 51% 24%) 72%,
			hsl(265deg 44% 29%) 78%,
			hsl(265deg 39% 33%) 84%,
			hsl(266deg 35% 37%) 88%,
			hsl(266deg 32% 42%) 92%,
			hsl(267deg 29% 46%) 94%,
			hsl(267deg 28% 51%) 96%,
			hsl(267deg 31% 55%) 98%,
			hsl(267deg 36% 60%) 99%,
			hsl(267deg 41% 65%) 100%,
			hsl(268deg 48% 70%) 100%,
			hsl(268deg 59% 75%) 101%,
			hsl(268deg 74% 80%) 100%,
			hsl(268deg 100% 85%) 100%
		  );
		}
        
        /* Layout */
        .wrapper {
            display: flex;
            height: 100vh;
        }
        
        /* Header styles */
        header {
            background-color: rgba(30, 30, 30, 0.9);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-sizing: border-box;
        }
        
        .logo {
			display:flex;
			align-items: center;
            color: #fff;
            font-size: 24px;
            font-weight: bold;
			text-align:left;
        }
        
        .menu-toggle {
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            margin-right: 20px;
        }
        
        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
        }
        
        nav ul li {
            margin-left: 20px;
        }
        
        nav ul li a {
            color: #e0e0e0;
            text-decoration: none;
        }
        
       
        .sidebar {
            width: 60px;
            background-color: rgba(30, 30, 30, 0.9);
            padding: 80px 0 20px;
            transition: all 0.3s;
            position: fixed;
            left: 0;
            height: 100%;
            z-index: 999;
            overflow-x: hidden;
        }
        
        .sidebar.active {
            width: 250px;
        }
        
        .sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar ul li {
            margin-bottom: 15px;
        }
        
        .sidebar ul li a {
            color: #e0e0e0;
            text-decoration: none;
            display: flex;
            align-items: center;
            padding: 10px 15px;
            white-space: nowrap;
        }
        
        .sidebar ul li a .material-symbols-outlined {
			margin-right: 15px;
			min-width: 24px;
			font-size: 24px;
			color:#fff;
			font-variation-settings:
			'FILL' 1,
			'wght' 400,
			'GRAD' 0,
			'opsz' 24
        }
        
		
		
		
        .sidebar ul li a span:not(.material-symbols-outlined) {
            display: none;
        }
        
        .sidebar.active ul li a span:not(.material-symbols-outlined) {
            display: inline;
        }
        
       
        .main-content {
            flex: 1;
            padding: 80px 20px 20px 80px;
            transition: padding-left 0.3s;
        }
        
        .main-content.active {
            padding-left: 270px;
        }
        
       
        .container {
            display: flex;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .left-column {
            flex: 0 0 300px;
            padding: 20px;
            background-color: rgba(30, 30, 30, 0.9);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255,255,255,0.1);
            margin-right: 20px;
        }
        
        .right-column {
            flex: 1;
            padding: 20px;
            background-color: rgba(30, 30, 30, 0.9);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255,255,255,0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .container {
            display: flex;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        .left-column {
            flex: 0 0 300px;
            padding: 20px;
            background-color: #1e1e1e;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255,255,255,0.1);
            margin-right: 20px;
        }
        .right-column {
            flex: 1;
            padding: 20px;
            background-color: #1e1e1e;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255,255,255,0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        h1 {
            color: #bb86fc;
            text-align: center;
        }
        textarea, input[type="file"] {
            width: 100%;
            margin-bottom: 10px;
            padding: 10px;
            background-color: #2c2c2c;
            color: #e0e0e0;
            border: 1px solid #bb86fc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        textarea {
            height: 200px;
        }
        button {
            display: inline-block;
            padding: 8px 15px;
            margin: 5px;
           background-image: linear-gradient(
				130deg,
				hsl(276deg 100% 41%) 0%,
				hsl(274deg 68% 50%) 22%,
				hsl(274deg 68% 56%) 40%,
				hsl(274deg 68% 61%) 54%,
				hsl(275deg 68% 65%) 65%,
				hsl(276deg 68% 70%) 75%,
				hsl(276deg 69% 74%) 82%,
				hsl(277deg 69% 79%) 88%,
				hsl(277deg 70% 83%) 92%,
				hsl(278deg 70% 87%) 96%,
				hsl(278deg 71% 91%) 98%,
				hsl(279deg 72% 96%) 99%,
				hsl(0deg 0% 100%) 100%
			  );
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: 0.3s;
        }
        button:hover {
            background: linear-gradient(45deg, #3700b3, #bb86fc);
        }
        #tableContainer {
            margin-top: 20px;
            overflow-x: auto;
            flex-grow: 1;
        }
        #exportButtons {
            margin-top: 20px;
            text-align: center;
        }
        table.dataTable {
            color: #000000;
            background-color: #ffffff;
            font-size: 12px;
        }
        .dataTables_wrapper .dataTables_length, 
        .dataTables_wrapper .dataTables_filter, 
        .dataTables_wrapper .dataTables_info, 
        .dataTables_wrapper .dataTables_processing, 
        .dataTables_wrapper .dataTables_paginate {
            color: #e0e0e0;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: #e0e0e0 !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            color: #121212 !important;
            background: #bb86fc;
            border: 1px solid #bb86fc;
        }
        table.dataTable thead th, 
        table.dataTable thead td {
            border-bottom: 1px solid #bb86fc;
        }
        table.dataTable tbody tr {
            background-color: #ffffff;
        }
        table.dataTable tbody tr:nth-child(even) {
            background-color: #f8f8f8;
        }
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 15px;
        }
        .dataTables_wrapper .dataTables_length {
            margin-bottom: 15px;
        }
        #filterContainer {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .filter-select {
            flex: 1;
            min-width: 150px;
        }
        .select2-container {
            min-width: 150px;
        }
        .select2-container--default .select2-selection--single {
            background-color: #2c2c2c;
            border: 1px solid #bb86fc;
            border-radius: 4px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #e0e0e0;
            line-height: 28px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 26px;
            position: absolute;
            top: 1px;
            right: 1px;
            width: 20px;
        }
        .select2-dropdown {
            background-color: #2c2c2c;
            border: 1px solid #bb86fc;
        }
        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #bb86fc;
            color: #ffffff;
        }
        .select2-container--default .select2-results__option {
            color: #e0e0e0;
        }
		
		
		.more-generators {
		background-color: var(--container-bg);
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
		max-width: 800px;
		width: 100%;
		margin: 20px auto 0;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	  }

	  .more-generators h3 {
		font-size: 1.2rem;
		margin-bottom: 15px;
		text-align: center;
	  }

	  .generator-links {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	  }

	  .generator-link {
		display: flex;
		align-items: center;
		color: var(--text-color);
		text-decoration: none;
		margin: 10px;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		transition: all 0.3s;
	  }

	  .generator-link:hover {
		background-color: rgba(255, 255, 255, 0.2);
		transform: translateY(-2px);
	  }

	  .generator-link i {
		margin-right: 10px;
		font-size: 1.2rem;
	  }
		

	 .gradientHeading
	 {      
        color: #8A6AB1; background-image: -webkit-linear-gradient(0deg, #8A6AB1 22%, #d9d925 48%, #8A6AB1 90%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent;                      
	 }
	.gradientHeadingX
	{		
       color: #8A6AB1; background-image: -webkit-linear-gradient(0deg, #8A6AB1 22%, #ffffff 48%, #8A6AB1 90%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent;                
	}

	.ad-banner {
			background-color: var(--input-bg);
			color: var(--text-color);
			padding: 15px;
			text-align: center;
			font-weight: bold;
			margin: 15px 0;
			border-radius: 8px;
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
		  }

		  .ad-horizontal {
			width: 100%;
			max-width: 728px;
			height: 90px;
			margin: 15px auto;
		  }



		
        /* Responsive styles - Victor */
        @media (max-width: 768px) {
            .wrapper {
                flex-direction: column;
            }
            
            .sidebar {
                width: 0;
            }
            
            .sidebar.active {
                width: 100%;
            }
            
            .main-content {
                padding: 80px 20px 20px;
            }
            
            .main-content.active {
                padding-left: 20px;
            }
            
            .container {
                flex-direction: column;
            }
            
            .left-column, .right-column {
                width: 100%;
                margin-right: 0;
                margin-bottom: 20px;
            }
            
            nav ul {
                display: none;
            }
        }