.containerx {
     display: flex;
     justify-content: space-between;
 }

 .fowarddiv {
    display: none;
    position: fixed;
    top: 90px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the element's width */
    background-color: #FFFFFF;
    z-index: 15;
    overflow: auto;
    padding: 20px;
    width: 60%; /* Cover 80% of the screen horizontally */
    max-width: 1200px; /* Limit width for better readability */
    height: 80%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.fowarddiv form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center form elements horizontally */
    width:100%;
}

.viewListBtn {
    display: inline-flex; /* Use inline-flex for potential icon alignment */
    align-items: center; /* Align icon and text vertically */
    justify-content: center; /* Center content horizontally */
    background: linear-gradient(135deg, #194A7C, #123C69); /* Gradient background */
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    padding: 12px 20px; /* Slightly increased padding */
    font-size: 15px; /* Slightly increased font size */
    font-weight: 500; /* Slightly bolder font */
    border-radius: 8px; /* Slightly softer corners */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); /* Softer shadow */
}

.viewListBtn:hover {
    background: linear-gradient(135deg, #143B63, #0F2A4D); /* Slightly darker gradient */
    transform: translateY(-2px); /* Slightly reduced lift */
    box-shadow: 0px 5px 10px rgba(18, 60, 105, 0.4); /* Refined hover shadow */
}

.viewListBtn:active {
    transform: translateY(1px);
    background: linear-gradient(135deg, #0F2A4D, #0C1F3A); /* Darker active gradient */
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}

.viewListBtn:focus {
    outline: none;
    box-shadow: 0px 0px 6px rgba(18, 60, 105, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.3); /* Added a subtle white outline to the focus style */
}

/* Optional: Add an icon */
.viewListBtn i { /* If using Font Awesome or similar */
    margin-right: 8px; /* Space between icon and text */
}


.container10 {
    width: 65%;
    padding: 20px;
}
.container20 {
    width: 35%;
    padding: 20px;
}

.sameline-container-div2 {
    width:80%;
    margin:10px;
}

.inputitem {
    width : 80%;
    min-width: 400px; 
}

@media (max-width: 768px) {
    .inputitem {
        width : 100%;
        min-width: 300px; 
    }

    .sameline-container-div2 {
        width:90%;
        margin:5px;
    }
    .containerx {
        flex-direction: column;  
    }
   
    .fowarddiv {
        position: fixed;
        top: 110px; /* Changed to 0 to take full screen */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust for the element's width */   
        background-color: #EEE2DC;
        overflow: auto;
        padding: 1px;
        width: 100%;
        margin: 0px; /* changed margin to 0 */
        height: 100%; /* Changed to 100% to take full screen */
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;    
    }


    .fowarddiv form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        padding-top: 20px;
    }

    .container10 {
        width: 100%;
        padding: 10px;
    }
    .container20 {
        width: 100%;
        padding: 10px;
    }

}

/* Center the button horizontally */
.reload-button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Adjust top margin as needed */
    margin-bottom: 20px; /* Adjust bottom margin as needed */
  }
  
  .reload-button {
    display: inline-flex; /* Align icon and text nicely */
    align-items: center;
    gap: 0.5em; /* Space between icon and text */
    padding: 0.75em 1.5em;
    font-size: 1rem;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease-in-out;
  }
  
  /* Default button colors */
  .reload-button {
    background-color: #007bff; /* A nice primary blue */
    color: white;
  }
  
  /* Hover effect */
  .reload-button:hover {
    background-color: #0056b3; /* Darker shade of blue on hover */
    transform: scale(1.05); /* Slightly scale up on hover */
  }
  
  /* Focus effect (for accessibility) */
  .reload-button:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
  }
  
  /* Active (mouse down) effect */
  .reload-button:active {
    transform: scale(0.95); /* Slightly scale down when active */
  }
  
  /* Style for the Bootstrap Icon */
  .reload-button i.bi {
    font-size: 1.2em; /* Adjust icon size */
  }
  
  /* Alternative color scheme (Green) */
  .reload-button.green {
    background-color: #28a745; /* A nice success green */
    color: white;
  }
  
  .reload-button.green:hover {
    background-color: #1e7e34; /* Darker shade of green on hover */
  }
  
  .reload-button.green:focus {
    outline: 2px solid #1e7e34;
    outline-offset: 2px;
  }
  
  /* Alternative color scheme (Teal) */
  .reload-button.teal {
    background-color: #20c997; /* A vibrant teal */
    color: white;
  }
  
  .reload-button.teal:hover {
    background-color: #17a27a; /* Darker shade of teal on hover */
  }
  
  .reload-button.teal:focus {
    outline: 2px solid #17a27a;
    outline-offset: 2px;
  }