@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
  
        /* General body styles and theme classes */

.btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s;
    margin-bottom: 10px; 
	
}

.btn-primary { background-color: #007bff; color: white; }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-danger { background-color: #dc3545; color: white; }
.btn-info { background-color: #17a2b8; color: white; }
.btn:hover { opacity: 0.9; }
.btn-small { padding: 5px 10px; font-size: 0.8em; margin-right: 5px; }
.btn-full-width { width: 100%; margin-top: 15px; }



body {
    font-family: sans-serif;
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    padding: 0rem;
	display: flex; 
	flex-direction: column;
   min-height: 100vh;
   transition: background-color 0.3s, color 0.3s;
}

body.theme-light {
    background-color: #f9fafb;
    color: #111827;
	--select-bg: #ffffff;
    --select-color: #000000;
    --select-border: #cccccc;
    --option-hover-bg: #f0f0f0
}

body.theme-dark {
    background-color: #111827;
    color: #f9fafb;
	--select-bg: #333333;
    --select-color: #ffffff;
    --select-border: #555555;
    --option-hover-bg: #555555;
}

body.theme-purple {
    background-color: #581c87;
    color: #f3e8ff;
	--select-bg: #f3e5f5;
    --select-color: #7b1fa2;
    --select-border: #7b1fa2;
    --option-hover-bg: #ce93d8
}

body.theme-green {
    background-color: #047857;
    color: #d1fae5;
	--select-bg: #e0f2f1;
    --select-color: #00796b;
    --select-border: #00796b;
    --option-hover-bg: #a7ffeb
}

.scrennheight{height: 100 vh; }


/* 3. Apply general styling to the select element */
select {
    /* Remove default browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Use CSS variables for colors and borders */
    background-color: var(--select-bg);
    color: var(--select-color);
    border: 1px solid var(--select-border);
    padding: 0.5em 2.5em 0.5em 1em; /* Adjust padding for custom arrow */
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.5;
    min-width: 100px;
}

/* 4. Style the options (limited cross-browser support for extensive styling) */
/* Basic color and background usually work across browsers */
option {
    background-color: var(--select-bg);
    color: var(--select-color);
}

/* 5. Add a custom arrow using background-image */
select {
    background-image: linear-gradient(45deg, transparent 50%, var(--select-color) 50%),
                      linear-gradient(135deg, var(--select-color) 50%, transparent 50%);
    background-position: calc(100% - 15px) calc(1em + 2px),
                         calc(100% - 10px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}


/* Form styles */
.form-section {
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}
/*No other classes*/
.form-section1 {
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

body.theme-light .form-section {
    background-color: rgba(27, 28, 27, 0.11);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.theme-dark .form-section {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}

body.theme-purple .form-section {
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}

body.theme-green .form-section {
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}

body.theme-light .form-section1 {
    background-color: rgba(27, 28, 27, 0.11);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.theme-dark .form-section1 {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}

body.theme-purple .form-section1 {
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}

body.theme-green .form-section1 {
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}

.list-group-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e5e7eb;
            
        }
		
body.theme-light .list-group-item {
	 background-color: rgba(27, 28, 27, 0.11);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
body.theme-dark .list-group-item{
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
	
}

.form-section label{
    display: block;
    margin-bottom: 0rem;
	font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
    width: 100%;
	
}

.form-section input {
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #ccc;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}



.form-section h2 {
  font-size: 1.5rem; /* text-xl */
  font-weight: 700; /* font-semibold */
  
  margin-bottom: 1rem; /* mb-4 */
}



body.theme-light .form-section input, body.theme-light .form-section select, 
body.theme-light .form-section textarea
{
    background-color: #fff;
    color: #333;
    border-color: #ccc;
}

body.theme-dark .form-section input,body.theme-dark .form-section select,
body.theme-dark .form-section textarea{
    background-color: #333;
    color: #fff;
    border-color: #555;
}

body.theme-purple .form-section input, body.theme-purple .form-section select,
body.theme-purple .form-section textarea{
    background-color: #7e22ce;
    color: #f3e8ff;
    border-color: #9333ea;
}

body.theme-green .form-section input, body.theme-green .form-section select,
body.theme-green .form-section textarea{
    background-color: #059669;
    color: #d1fae5;
    border-color: #047857;
}

.form-section button {
     width: 100%;
  padding-top: 0.5rem; /* py-2 */
  padding-bottom: 0.5rem; /* py-2 */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  background-color: #2563eb; /* bg-blue-600 */
  color: #ffffff; /* text-white */
  font-weight: 600; /* font-semibold */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-lg */
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; /* transition */
  transition-duration: 200ms; /* duration-200 */
}

.form-section button:hover {
    background-color: #2563eb;
}


/* Base table styling (applies to all themes unless overridden) */


.table-section {
	 flex-grow: 1;
    overflow-y: auto;
	max-height: 70vh;
    
}

.table-section button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.table-section button:hover {
    opacity: 0.9;
}
.table-section table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem; /* Adjust as needed */

}

.table-section th,
.table-section td {
    padding: 0.75rem;
    text-align: left;
     /* Font Size */
  font-size: 0.75rem; /* text-xs (12px) */
 
	
}

.table-section thead th {
    font-weight: bold;
    /* Padding */
  padding-left: 1.25rem; /* px-5 (5 * 0.25rem = 1.25rem) */
  padding-right: 1.25rem; /* px-5 */
  padding-top: 0.75rem; /* py-3 (3 * 0.25rem = 0.75rem) */
  padding-bottom: 0.75rem; /* py-3 */

  /* Border */
  border-bottom-width: 2px; /* border-b-2 */
  border-bottom-color: #e5e7eb; /* border-gray-200 - This is a common gray color in Tailwind's default palette */

  /* Background */
  background-color: #f3f4f6; /* bg-gray-100 - Light gray background */

  /* Dark Mode Background */
  /* This will be applied when the 'dark' class is present on a parent element,
     typically the <html> or <body> tag, or a specific container. */
  /* For example: html.dark th { background-color: #374151; } */
  /* dark:bg-gray-700 - Darker gray background in dark mode */

  /* Text Alignment */
  text-align: left; /* text-left */

  /* Font Size */
  font-size: 0.85rem; /* text-xs (12px) */

  /* Font Weight */
  font-weight: 600; /* font-semibold */

  /* Text Transform */
  text-transform: uppercase; /* uppercase */

  /* Letter Spacing */
  letter-spacing: 0.05em; /* tracking-wider */

}


/* Add transition to table rows for smooth hover */
.table-section tbody tr {
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */

}


/* Light Theme */
body.theme-light .table-section th,
body.theme-light .table-section td, .table-section select {
    border-color: #e2e8f0; /* light gray border */
    color: #333;
}

body.theme-light .table-section thead th {
    background-color: #e2e8f0; /* very light background for header */
    color: #4a5568;
}

body.theme-light .table-section tbody tr {
    background-color: #dee7e295; /* white background for rows */
}

body.theme-light .table-section tbody tr:hover {
    background-color: #f0f4f8; /* light hover for rows */
}

/* Dark Theme */
body.theme-dark .table-section th,
body.theme-dark .table-section td, .table-section select {
    border-color: #4a5568; /* dark gray border */
    color: #e2e8f0; /* light text */
	
}

body.theme-dark .table-section thead th {
    background-color: #2d3748; /* darker background for header */
    color: #cbd5e0;
}

body.theme-dark .table-section tbody tr {
    background-color: #212529; /* dark background for rows */
}

body.theme-dark .table-section tbody tr:hover {
    background-color: #2a3038; /* slightly lighter dark on hover */
}

/* Purple Theme */
body.theme-purple .table-section th,
body.theme-purple .table-section td, .table-section select {
    border-color: #a78bfa; /* purple border */
    color: #f3e8ff; /* light purple text */
}

body.theme-purple .table-section thead th {
    background-color: #8b5cf6; /* medium purple background for header */
    color: #f3e8ff;
}

body.theme-purple .table-section tbody tr {
    background-color: #7e22ce; /* purple background for rows */
}

body.theme-purple .table-section tbody tr:hover {
    background-color: #9333ea; /* lighter purple on hover */
}

/* Green Theme */
body.theme-green .table-section th,
body.theme-green .table-section td {
    border-color: #34d399; /* green border */
    color: #d1fae5; /* light green text */
}

body.theme-green .table-section thead th {
    background-color: #059669; /* medium green background for header */
    color: #d1fae5;
}

body.theme-green .table-section tbody tr {
    background-color: #047857; /* dark green background for rows */
}

body.theme-green .table-section tbody tr:hover {
    background-color: #065f46; /* slightly lighter green on hover */
}


    .container1 {
        width: 100%;
		padding-left: 10rem;

    }


/* Styles for the new color palette buttons */
.theme-button {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    cursor: pointer;
    border: 2px solid transparent; /* Default state */
    transition: all 0.2s ease;
}

.theme-button:hover,
.theme-button.active-theme {
    border-color: #3b82f6; /* Highlight color */
    transform: scale(1.1);
}

.scrollable-div {
  max-height: 100vh; /* Set your desired maximum height */
  overflow-y: auto;  /* Enable vertical scrolling if content exceeds max-height */
  padding: 1px;
   
}

.my-print-icon {
  font-size: 15px;
}

.checkpoint-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
	text-align: left;
	
}
.checkpoint-item label {
    display: block;
    font-weight: bold;
}
.checkpoint-item input[type="checkbox"] {
    margin-right: 5px;
}
.checkpoint-item input[type="file"] {
    margin-top: 5px;
}


main {
	min-height: 86.5vh;
   overflow-y: auto;
  
  text-align: center;
  max-height: 100vh;
}

 /* For the desktop menu transition */
        .desktop-nav {
            transition: width 0.3s ease-in-out;
            max-height: 100vh;
        }
        .desktop-nav-text {
            transition: opacity 0.3s ease-in-out;
            
        }
		
		.desktop-nav-text:hover {
		  background-color: #f3f4f6; /* very light gray on hover */
		   transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
		}

/*============== Responsive adjustments */
@media (max-width: 1024px) {
	 .container {
        width: 100%;
		
    }
}
@media (max-width: 600px) {
    body {
        padding: 1rem;
    }

    .container {
        width: 100%;
		padding: 1rem;
    }

    .form-section {
        padding: 1.5rem;
    }
	
	.form-section1 {
        padding: 0rem;
    }
	
    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead {
        display: none;
    }

    tr {
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    body.theme-dark tr {
        border-color: #374151;
    }

    body.theme-purple tr {
        border-color: #7e22ce;
    }

    body.theme-green tr {
        border-color: #059669;
    }

    td {
        border-bottom: none;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 1rem;
        font-weight: bold;
        text-align: left;
    }

        /* Custom scrollbar for main content area */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #1f2937; /* dark:bg-gray-800 */
        }
        ::-webkit-scrollbar-thumb {
            background: #6b7280; /* dark:bg-gray-500 */
            border-radius: 4px;
        }
        /* For the mobile menu transition */
        .sidebar {
            transition: transform 0.3s ease-in-out;
        }
       
		
		 /* Custom styles for the pulsing SOS button animation */
        @keyframes pulse-red {
          0%, 100% {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
          }
          70% {
            box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
          }
        }
        .animate-pulse-red {
          animation: pulse-red 2s infinite cubic-bezier(0.66, 0, 0, 1);
        }
		
    }
		 
		 
/*Select 2 class ====== */
/* Main selection box */
.my-custom-select2-container .select2-selection--single {
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid var(--select-border);
    background-color: var(--select-bg);
    color: var(--select-color);
    display: flex;
    align-items: center;
}

/* Selected text */
.my-custom-select2-container .select2-selection__rendered {
    color: var(--select-color);
    padding-left: 0;
}

/* Arrow */
.my-custom-select2-container .select2-selection__arrow b {
    border-color: var(--select-color) transparent transparent transparent;
}

/* Dropdown */
.my-custom-select2-container.select2-dropdown {
    background-color: var(--select-bg);
    color: var(--select-color);
    border: 1px solid var(--select-border);
}
		 
body.theme-light .my-custom-select2-container .select2-selection--single {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #111827;
}

body.theme-dark .my-custom-select2-container .select2-selection--single {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

body.theme-purple .my-custom-select2-container .select2-selection--single {
    background-color: #7e22ce;
    border-color: #9333ea;
    color: #f3e8ff;
}

body.theme-green .my-custom-select2-container .select2-selection--single {
    background-color: #059669;
    border-color: #047857;
    color: #d1fae5;
}

/*Select 2 class end====== */