<style>
    * {
		margin: 0;
		padding: 0;
		height: 100%;
		box-sizing: border-box;
    }


	html {
		font-size: inherit !important;
	}

    body {
      font-family: 'Arial', sans-serif;
      background-color: #f9f9fb;
      padding: 20px;
      margin: 0;
      padding: 0;
    }
	

	.no-scroll {
		overflow-y: hidden;
	}

    .form-container {
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 30px;
      display: flex;
      flex-direction: column;
	  width: 100%;
	  max-width: 800px;
	  margin-left: auto;
	  margin-right: auto;
	  align-items: center;
	  justify-content: center;
      gap: 20px;
    }

    .form-header {
      text-align: center;
    }

    .form-header h2 {
      font-size: 1.8rem;
      color: #333333;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .form-group label {
      font-weight: bold;
      color: #555;
    }

    .form-group select,
    .form-group input,
    .form-group textarea {
      padding: 10px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
      outline: none;
      transition: border-color 0.3s ease;
      width: 100%;
    }

    .form-group select:focus,
    .form-group input:focus,
    .form-group textarea:focus {
      border-color: #4caf50;
    }

    .form-group-half {
      display: flex;
      gap: 20px;
    }

    .form-group-half .form-group {
      flex: 1;
    }

    .form-button {
      text-align: center;
	  margin-top: 5px;
    }

    .form-button button {
      padding: 12px 25px;
      font-size: 1rem;
      background-color: #4caf50;
      color: #ffffff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .form-button button:hover {
      background-color: #45a049;
    }

    /* Mobile View */
    @media (max-width: 768px) {
	  body {
		  padding: 10px;
	  }

      .form-container {
        padding: 20px;
      }

      .form-header h2 {
        font-size: 1.5rem;
      }

      .form-group-half {
        flex-direction: column;
      }

      .form-group label {
        font-size: 0.9rem;
      }

      .form-group input,
      .form-group select,
      .form-group textarea {
        font-size: 0.9rem;
      }

      .form-button button {
        font-size: 0.9rem;
        padding: 10px 20px;
      }
    }

	.center-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		#height: 100vh; /* Use vh instead of dvh */
		min-height: 100vh;
		box-sizing: border-box; /* Ensure padding/margins don't affect layout */
	}



	.image {
		max-width: 200px;
		height: auto;
		margin-bottom: 20px;
	}

	.message {
		font-weight: 700;
		color: #555;
		line-height: 1.5;
	}
	
	.font-size-s {
		font-size: 12px;
		color: red;
		font-weight: 700;
	}
	
	input:read-only {
        background-color: #f0f8ff; /* Light blue background for better visibility */
        color: #333; /* Darker text color for readability */
        border: 1px solid #a0c4ff; /* Subtle border to highlight the field */
        cursor: not-allowed; /* Show a "not-allowed" cursor to indicate it's non-editable */
    }

    input:read-only:focus {
        outline: none; /* Remove focus outline for readonly fields */
        box-shadow: none; /* Remove focus shadow for readonly fields */
    }
	
	.error {
		border: 2px solid red;
		background-color: #ffe6e6;
	}
	
	#searchBtn {
		padding: 12px 25px;
		font-size: 1rem;
		background-color: #00a8ff;
		color: #ffffff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	
	/* Disabled button styling */
	button[disabled] {
		background-color: #d6d6d6 !important; /* Light gray */
		cursor: not-allowed !important;
		border: 1px solid #ccc;
	}
	
	button#cancelBtn {
		background-color: indianred;
	}
	
	.centered-label {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 1.4rem;
		font-weight: bold;
		color: #4A90E2;
		text-transform: uppercase;
	}
	
</style>