.modal-content {
    border-radius: 20px;
    display: flex;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 98%;
    padding: 3%;
    background-color: #ffffff;
    transform: translate(-50%, -50%); /* Adjusted transform */
    overflow-y: auto; /* Optional: for scrollable content */
    margin: 0 1% 0 1%
}

.modal-dialog {
    width: 98%; /* Adjust width as needed */
    margin: 0; /* Remove auto margin to allow custom positioning */
}
.hp_form_container
{
    width: 100%; /* Adjust the width as needed */
    margin: auto; /* Center the container */
    padding: 2%; /* Add some padding */
    border: 1px solid #ddd; /* Add a border */
    border-radius: 5px; /* Round the corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */
    background-color: #f9f9f9; /* Light background color */
}
.hp_form_frame {
    ustify-content: center;
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    margin: 0 0% 0 0%;

}

.hp_form_frame_sub
{
    text-align: center;
    width: 100%;
 /*   display: block;*/
    margin: 0.5% 0% 0.5% 0%;
    padding: 1%;
    border-radius: 30px;
    background-color: #ffffff;
}

.info-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
    gap: 2%; /* Space between grid items */
    width: 100%;
    margin: 2%;
    padding:1%;
}

.info-row {
    display: contents; /* Makes the container disappear, showing only its children */
    padding: 1%;
}

.hp_form_grid_11
{
    grid-column: 1 / 2;
    padding: 0.5%;
    font-size:14px;
    margin:0.3%;
}
.hp_form_grid_12 
{
    grid-column: 1 / 3;
    padding: 0.5%;
    font-size:14px;
    margin:0.3%;
}
.hp_form_grid_13 
{
    grid-column: 1 / 4;
    padding: 0.5%;
    font-size:14px;
    margin:0.3%;
}
.hp_form_grid_14 
{
    grid-column: 1 / 5;
    font-size: 14px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_22
{
    grid-column: 2 / 3;
    font-size: 14px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_23 {
    grid-column: 2 / 4;
    font-size: 14px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_24 {
    grid-column: 2 / 5;
    font-size: 14px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_33 {
    grid-column: 3 / 4;
    font-size:14px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_34 {
    grid-column: 3 / 5;
    font-size:14px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_44 {
    grid-column: 4 / 5;
    font-size:14px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_left
{
    text-align: left;
}
.hp_form_grid_center
{
    text-align:center;
}
.hp_form_grid_right
{
    text-align:right;
}
.hp_form_grid_label
{
    font-size:16px;
    font-weight:bold;
    color:blue;
    padding: 1%;
}

.nav-tabs {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Arrange items in a row */
    border-bottom: 2px solid #ddd; /* Bottom border for the tab list */
}

.nav-item {
    margin-right: 10px; /* Space between tabs */
}

/* Style for the navigation links */
.nav-link {
    display: block; /* Display as block */
    padding: 10px 20px; /* Padding around the text */
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Dark text color */
    border: 1px solid transparent; /* Transparent border (for equal height with active tab) */
    border-radius: 5px 5px 0 0; /* Rounded corners at the top */
    background-color: #fff; /* White background for the tabs */
}

/* Styles for the button container */
.button-container {
    text-align: center; /* Center the buttons horizontally */
    margin-top: 20px; /* Add spacing between the form and buttons */
    position: relative; /* Positioning */
    bottom: 0; /* Align to the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
}

/* Styles for the "Submit" button */
.hp_form_submit {
    background-color: #007bff; /* Blue background color */
    color: #fff; /* White text color */
    border: none; /* Remove button border */
    padding: 10px 20px; /* Add padding around the text */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Show pointer cursor on hover */
    margin-right: 10px; /* Add spacing between buttons */
}

.hp_form_submit:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Styles for the "Cancel" button */
.hp_form_cancel {
    background-color: #ccc; /* Gray background color */
    color: #333; /* Dark text color */
    border: none; /* Remove button border */
    padding: 10px 20px; /* Add padding around the text */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Show pointer cursor on hover */
}

.hp_form_cancel:hover {
    background-color: #999; /* Darker gray on hover */
}


@media (max-width: 767px) {
.modal-content {
    width: 95%;
    height:600px;
    overflow-y:auto;
}
.modal-dialog {
    width: 95%; /* Adjust width as needed */
    margin: 0; /* Remove auto margin to allow custom positioning */
    height: 800px;
    overflow-y:auto;
    position:fixed;
}
.hp_form_frame_sub
{
    margin: 3% 0% 3% 0%;
    padding: 3%;
    border-radius: 20px;
    background-color: #ffffff;
}
.hp_form_grid_11
{
    padding: 0.5%;
    font-size:10px;
    margin:0.3%;
}
.hp_form_grid_12 
{
    padding: 0.5%;
    font-size:10px;
    margin:0.3%;
}
.hp_form_grid_13 
{
    padding: 0.5%;
    font-size:10px;
    margin:0.3%;
}
.hp_form_grid_14 
{
    font-size: 10px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_22
{
    font-size: 10px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_23 {
    font-size: 10px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_24 {
    font-size: 10px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_33 {
    font-size:10px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_34 {
    font-size:10px;
    padding: 0.5%;
    margin:0.3%;
}
.hp_form_grid_44 {
    font-size:10px;
    padding: 0.5%;
    margin:0.3%;
}
.nav-link {  
    display: block; /* Display as block */
    padding: 3px 6px; /* Padding around the text */
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Dark text color */
    border: 1px solid transparent; /* Transparent border (for equal height with active tab) */
    border-radius: 5px 5px 0 0; /* Rounded corners at the top */
    background-color: #fff; /* White background for the tabs */
    font-size:8px;
}
.hp_form_grid_label
{
    font-size:8px;
    font-weight:bold;
    color:blue;
    padding: 1%;
}
}