:root {
 
   /* Custom colour palette */
    
   --background-color: hsl(285, 38%, 18%); /* Main background */
    
   --primary-color: hsl(279, 100%, 94%); /* Primary colour */
    
   --positive-color: hsl(96, 44%, 68%); /* Success/Positive */
    
   --negative-color: hsl(359, 68%, 71%); /* Error/Negative */
    
   }

.theme-violet {
   --color-50: 219, 143, 255 !important;
   --color-100: 111, 58, 148 !important; 
   --color-200: 95, 33, 128 !important; 
   --color-300: 111, 58, 148 !important;
   --color-400: 95, 65, 124;
   --color-500: 219, 143, 255 !important;
   --color-600: 133, 81, 158 !important;
   --color-700: 219, 143, 255 !important;
   --color-800: 95, 65, 124;
   --color-900: 219, 143, 255 !important;
   --color-logo-start: 173, 3, 252 !important;
   --color-logo-stop: 219, 143, 255 !important;
  }

.dark {
   --bg-color: var(--color-800) !important;
   --scrollbar-thumb: rgb(var(--color-600)) !important;
   --scrollbar-track: rgb(var(--color-700)) !important;
   }

@font-face {
   font-family: 'Google Sans', sans-serif;
   font-style: normal;
   font-weight: 160 700;
   src: url(https://cloud.svenkrupp.me/s/GoogleSans/download) format(woff2);
}

/* Font */
html, body {
   font-family: 'Google Sans', 'Arial', 'Roboto', sans-serif !important;
   color: #ffffff !important;
   text-rendering: optimizeLegibility !important; /* Improve text rendering */
   background-color: var(--background-color); /* Use custom background */
   color: var(--primary-color); /* Use custom primary colour for text */
   font-size: 16px;
   } 

a {
   color: #f4e1ff;
   text-decoration: none;
   }
       
a:hover {
   color: #f4e1ff;
   text-decoration: line-through;
   }




.text-xs {  
   color: #f4e1ff !important;
   opacity: 1 !important;  
   }

.text-sm {  
   color: #f4e1ff !important;
   opacity: 1 !important;  
   }

/* Services */
 
.service-title {  
   background-color: #00000000 !important;
   color: #ffffff !important; 
   }

 
.service-name {  
   font-family: 'Google Sans', sans-serif !important;
   font-size: 16px; 
   font-weight: 500 !important;     
   }


.service-group-name {  
   font-family: 'Google Sans', sans-serif !important;
   color: #f4e1ff !important; 
   font-size: 20px; 
   font-weight: 500 !important; 
   line-height: 2; 
   }

.service-card {  
   background-color: #001b2b38 !important;  
   box-shadow: lg;
   }
   
.service-container {  
   color: #f4e1ff !important; 
   box-shadow: #001b2b
   }

   .pb-0 {
      padding-bottom: 25px !important;
   }

/* Processes/containers card */
   .grow.truncate {  
      color: #f4e1ff !important;
      font-size: 13px !important; 
      font-weight: 500; 
      opacity: 1 !important;  
      }

   
   
/* Bookmarks */

.bookmark-icon {  
   background-color: #6a008557 !important;
   color: #f4e1ff !important;   
   }
 
.bookmark-text {  
   background-color: #000e163f !important;
   color: #f4e1ff !important;  
   }

.bookmark-group-name {  
   color: #f4e1ff !important;
   font-size: 20px;   
   line-height: 2 !important;
   padding: 10px;
   }    

.bookmark-name {  
   color: #f4e1ff !important;  
   font-size: 13px !important; 
   }

   .bookmark-description {  
      color: #f4e1ff !important;  
      font-size: 13px !important; 
      }

.widget-container {  
   color: #f4e1ff !important;
   font-size: 16px !important; 
   font-weight: 500; 
   padding: 5px;    
   }

.m-5 {  
   background-color: #00101a28 !important;
   color: #f4e1ff !important;   
   }

.my-4 {  
   background-color: #00101a28 !important;
   color: #f4e1ff !important;   
   }
   
.w-14 {  
   color: #f4e1ff !important;
   opacity: 1 !important;   
   }


/* Search Box */

.mt-1 {  
   background-color: #532c6dd7;
   color: #510180ec !important;  
   opacity: 1 !important; 
   }

.information-widget-search {
   opacity: .9 !important;
   }

/* Full Screen Search Box */
.m-2 {  
   background-color: #6e3a94cb !important;
   color: #f4e1ff !important;   
   }

.p-0 {  
   background-color: #4e2968 !important;
   color: #f4e1ff !important;   
   }
   
   .mr-3 {  
      background-color: #943a3a00 !important;
      color: #f4e1ff !important;   
      }
 


.w-3 {  
   opacity: .75 !important;;   
   }
    
.h-5 {  
   background-color: #6e3a9400;
   color: #f4e1ff !important;   
   }
    


.my-4 {  
   background-color: #001b2b3d !important;
   color: #341d3f !important;   
   }
 
h2 {  
   margin-bottom: -10px;    
   }
 
.z-0 {  
   background-color: #6a008560;
   color: #f4e1ff !important;   
   }
 
.h-5 {  
   color: #f4e1ff !important;   
   }

.w-full {
   color: #f4e1ff !important;   
   }

.m-1 {  
   background-color: #6a008575 !important;
   color: #f4e1ff !important;   
   }
 
 .flex-row {
 color: #f4e1ff !important;   
    }
 


@media (max-width: 768px) {
   body {
   font-size: 14px;
   }
   button {
   width: 100%;
   }
   input, select, textarea {
   width: 100%;
   }
   }

   input, select, textarea {
   width: 100%;    
   }
       

       
/* Additional dark mode text override */
.dark\:text-theme-700:is(.dark *) {
   color: #f4e1ff !important;
 }

 .dark\:text-theme-600:is(.dark *) {
   color: #f4e1ff !important;
 }

 .dark\:text-theme-500:is(.dark *) {
   color: #f4e1ff !important;
 }

 .dark\:text-theme-100:is(.dark *) {
   color: #f4e1ff !important;
 }

 button, input, optgroup, select, textarea {
   font-size: 14px !important;
 }  
      
/* Styling form elements */
input, select, textarea {
   border: 1px solid var(--color-300);
   background-color: rgb(var(--color-200));
   color: rgb(var(--color-500));
   padding: 10px;
   font-size: 16px;
   border-radius: 5px;
   width: 100%;
 }
 
 input:focus, select:focus, textarea:focus {
   outline: none;
   border-color: var(--primary-color);
 }
  
 /* Set background for sections */
 section {
   background-color: rgb(var(--color-200));
   padding: 20px;
   border-radius: 10px;
 }
 section:hover {
   background-color: rgb(var(--color-300)) !important;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
 }

/* Add hover effect for table rows */
table tr:hover {
   background-color: rgb(var(--color-400)) !important;
 }

 button {
   background-color: #f4e1ff00;
   color: #f4e1ff;
   border: none;
   padding: 10px 20px;
   cursor: pointer;
   border-radius: 5px;
   transition: background-color 0.3s ease;
 }
  
 button:hover {
   background-color: hsla(278, 99%, 26%, 0.288); /* Slightly darker version of the primary colour */
 }