#mainInput.input-wrapper {
      background-color: #ffffff;
      border: 1px solid #dee2e6;
      border-radius: 16px;
      padding: 16px;
    }

    #mainInput .form-control {
      background-color: #ffffff;
      border: none;
      box-shadow: none;
      font-size: 1.2rem;
      resize: none;
      height: 80px;
    }

    #mainInput .form-control:focus {
      box-shadow: none;
      background-color: #ffffff;
    }
	#mainInput:focus-within {
		border-color: #007bff; /* Vibrant blue border when focused */
		box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Optional: add a subtle shadow for emphasis */
	}

    #mainInput .bottom-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
    }

    #mainInput .text-buttons {
      display: flex;
      gap: 12px;
    }

    #mainInput .action-btn {
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      border-radius: 24px;
      padding: 6px 14px;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #2c1b47;
    }

    #mainInput #btnSubmitQn{
      background-color: #ffc107; /* #eaeaea;*/
      border: none;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #444;
    }

	#mainInput .plus-btn {
      background-color: #f0f0f0;
      border: none;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #2c1b47;
    }
	#mainInput .dropdown-menu {
      background-color: #ffffff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 6px;
      min-width: 160px;
    }

    #mainInput .dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.95rem;
      padding: 6px 12px;
      color: #2c1b47;
	  cursor: pointer;
    }

    #mainInput .dropdown-item:hover {
      background-color: #f8f9fa;
    }
	#mainInput .dropdown-toggle::after {
      display: none;
    }

    /* Camera Section */
    #camera {
        width: 100%;
        max-height: 60vh;
        object-fit: cover;
        border-radius: 10px;
        border: 2px solid #ccc;
    }

	/* Drag and Drop Section */
	#dropUploadArea {
		height: 300px;		
		padding: 15px;
		background: #fff;
		text-align: center;
		border-radius: 20px;
	}
	#dropZone {
		width:100%;
		height: 100%;
		border: 2px dashed #aaa;
		border-radius: 20px;
		background: #f7f7f7;
		color: #000;
		padding: 30px;
		padding-top: 45px;
		
	}
	#dropZone.highlight {
		background-color: #f0f0f0;
		border-color: #007bff;
	}


	#canvas-container {
		margin: 20px auto; 		
		width:fit-content;
	}
    #capturedImage{
		max-height: 500px;

	}

	#instructionsEditor {
		display: none;
		border-top: 1px solid #ccc;
		margin-top: 2em;
		padding-top: 1em;
	}

	

    /* Result and Loading Section */
    /* #loading {
        display: none;
        color: #1d3557;
    }

    .spinner-border {
        width: 3rem;
        height: 3rem;
        border-width: 0.3em;
    } */

	

    /* #result {
        display: none;
        background-color: #fff;
        padding: 20px;
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    } */

	#solution {
		max-width: 700px;
		margin: 20px auto;
		/* padding: 20px; */
		/* border-radius: 10px; */
		/* background: white; */
		/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
	}

	#solution .card-header {
		background-color:#e3f2fd; /* #007bff; */
		font-size:1.2em;
		/* color: white; */		
	}
	
	#solution .analysis-box {
		background: #fff3cd; /* Light yellow */
		padding: 15px;
		border-radius: 5px;
		border-left: 5px solid #ffc107; /* Yellow border */
		margin-bottom: 2em;
		font-size: 0.9em;
	}
	#solution .step {
		border-left: 5px solid #007bff;
		padding-left: 15px;
		margin-top: 15px;
	}
	#solution .step .working {
		background: #eef2ff;
		padding: 10px;
		border-radius: 5px;
		font-family: 'Courier New', Courier, monospace;
	}
	#solution .check {
		border-left: 5px solid #28a745;
		padding-left: 15px;
		margin-top: 15px;
	}
	#solution .check .working {
		background: #e6f4ea;
		padding: 10px;
		border-radius: 5px;
		font-family: 'Courier New', Courier, monospace;
		
	}
	

    /* Fade-in Animation */
    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }

	 .slideUp {
        animation: slideUp 0.6s ease-out forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

	@keyframes slideUp {
		from { transform: translateY(50px); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}