@charset "UTF-8";
        .line {
            border-bottom: 2px solid white; /* White line */
            margin-top: 20px; /* Space above the line */
        }
        /* Style for input and select elements */
        input[type="text"], select {
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
       input[type="password"], select {
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        /* Glowing effect when the input or select is focused */
        input[type="text"]:focus, select:focus, input[type="checkbox"]:focus {
		    border-color: #4CAF50; /* Green border */
		    box-shadow: 0 0 8px 2px rgba(76, 175, 80, 0.8); /* Green glow */
		    outline: none; /* Remove default outline */
		    background-color: red;
		}

        /* Styling for the transparent background */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999; /* Ensure it's on top of other content */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Styling for the loading animation */
        .loader {
            border: 5px solid #f3f3f3; /* Light gray border */
            border-top: 5px solid #EA4C89; /* Blue border on top */
            border-radius: 50%; /* Circular shape */
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite; /* Rotation animation */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Style for the modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #f4f4f4;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    text-align: center;
}

.close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
}

.close:hover {
    color: black;
    cursor: pointer;
}
        

	    .gulabi {
	      color:#EA4C89;
	    }
		/*for form buttons*/
		.hara {
			background-color: rgba(62, 189, 97, 0.2);
			border: 2px solid #3ebd61;
		}

		.button-container {
			display: flex;
			background: #FFFFFF;
		}

		.mmmm {
			border-radius: 12px;
			text-align: justify;
			text-align-last: center;
			font-style: italic;
			background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
			padding: 1rem 0 2rem 0;
			color: hsl(300, 50%, 95%);
			border-top: 1px solid hsl(300, 50%, 35%);
			border-bottom: 1px solid hsl(300, 50%, 5%);
		}

		/* Style the label to look like a button */
		.file-upload-label {
			display: inline-block;
			padding: 10px 20px;
			background-color: #007bff;
			color: #fff;
			cursor: pointer;
			border-radius: 5px;
		}

		/* Hide the actual file input */
		#file-input {
			display: none;
		}


	.icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, 50px); /* 50px columns */
            justify-content: center;
             gap: 10px;
             padding-bottom: 60px; 
	}
	.icon-item {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-end; /* Align items at the bottom */
    align-items: center; /* Center text horizontally */
	border: 1px solid hsl(300, 50%, 35%);
    margin: 0; /* Remove margin around each icon item */
    height: 100%; /* Ensure it takes the full height of the container */
	}

	.icon-album {
		font-size: 48px;
		color: #007BFF;
	}

	.icon-label {
		font-size: 12px;
	}


		/*for form buttons*/
		.hara {
			background-color: rgba(62, 189, 97, 0.2);
			border: 2px solid #3ebd61;
		}

		.button-container {
			display: flex;
			background: #FFFFFF;
		}

		.mmmm {
			border-radius: 12px;
			text-align: justify;
			text-align-last: center;
			font-style: italic;
			background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
			padding: 1rem 0 2rem 0;
			color: hsl(300, 50%, 95%);
			border-top: 1px solid hsl(300, 50%, 35%);
			border-bottom: 1px solid hsl(300, 50%, 5%);
		}

		/* Style the label to look like a button */
		.file-upload-label {
			display: inline-block;
			padding: 10px 20px;
			background-color: #007bff;
			color: #fff;
			cursor: pointer;
			border-radius: 5px;
		}

		/* Hide the actual file input */
		#file-input {
			display: none;
		}

        .section-title {
            text-align: center;
            color: #b6b3b3;
            font-size: 30px;
            font-weight: bold;
            font-style: italic;
            margin-bottom: 10px;
        }
        .center-heading {
            text-align: center;
            font-weight: bold;
            color: #FF0000;
            font-size: 20px;
            margin-top: 15px;
        }
         .center-heading2 {
            text-align: center;
            font-size: 20px;
            margin-top: 15px;
        }
        .input-label {
            font-weight: bold;
            font-size: 20px;
            margin-top: 15px;
        }
        .checkbox-input {
            padding: 8px;
            margin: 8px 0;
            box-sizing: border-box;
        }
        .text-input, .number-input, .dropdown {
            width: 100%;
            padding: 8px;
            margin: 8px 0;
            box-sizing: border-box;
        }
        .multi-line {
            height: 100px;
        }
        .buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .help-text {
            text-align: center;
            color: #4CAF50;
            font-weight: bold;
            font-style: italic;
            margin-top: 15px;
        }
   .info-section {
   text-align: justify;
   text-align-last:center;
   font-style:italic;
   }
    
 /* for help */
 .accordion {
   background-color: #eee;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
   transition: 0.4s;
 }
 
 .active, .accordion:hover {
   background-color: #ccc;
 }
 
 .panel {
   padding: 0 18px;

   background-color: white;
   overflow: hidden;
 }
 /* Style the tab */
 .tab {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
 }
 
 /* Style the buttons inside the tab */
 .tab button {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
   font-size: 17px;
 }
 
 /* Change background color of buttons on hover */
 .tab button:hover {
   background-color: #ddd;
 }
 
 /* Create an active/current tablink class */
 .tab button.active {
   background-color: #ccc;
 }
 
 /* Style the tab content */
 .tabcontent {
   display: none;
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
 }
 
  /* For chat window to show map icon */
    .label-image-wrapper {
      position: sticky;
      top: 0; /* Sticks to the top of the div */
      display: flex; /* Align label and image horizontally */
      align-items: center; /* Vertically align items */
      gap: 10px; /* Space between the label and image */
      width: fit-content; /* Shrinks to content size */
      margin: auto; /* Optional: Center horizontally in the div */
      z-index: 10; /* Ensure visibility */
    }

    .label {
      font-size: 14px; /* Adjust text size */
      color: #333; /* Text color */
    }

    .sticky-image {
      width: 25px; /* Fixed size */
      height: 25px;
    }

    .sticky-image:hover {
      cursor: pointer;
    }