/* This sets a universal constraint for both form and report areas */
.ssaa-main-wrapper,
.ssaa-report-full-width-container {
  /* Set the fixed maximum width you desire (e.g., 400px) */
  max-width: 400px; 
  
  /* Ensure it doesn't look bad on extremely small, older devices */
  width: 100%; 

  /* Center the content block on larger screens */
  margin-left: auto;
  margin-right: auto;
  
  /* Add consistent padding */
  padding: 0 5px; 
  box-sizing: border-box;
}

/* Ensure form elements and inputs still use 100% within that 400px wrapper */
.ssaa-main-wrapper input,
.ssaa-report-full-width-container table {
  width: 100%;
  box-sizing: border-box; 
}

/* Keep the local scrolling for the report if its content overflows the 400px */
.table-responsive {
    overflow-x: auto; 
    padding-bottom: 10px; 
}

/* Generic styles for all SSAA App Modules (from earlier fix) */
.ssaa-app-container .form-control, 
.ssaa-app-container input,
.ssaa-app-container select {
    border-radius: 8px !important; 
}

/* New CSS for the specific Login Button look */
.btn-with-img {
    background-color: DarkMagenta; 
    border: none; 
    width: 120px; 
    height: 52px; 
    border-radius: 8px;
    
    /* Alignment fix */
    display: flex;         
    justify-content: center; 
    align-items: center;  
    padding: 0; /* Remove default padding */
}

.btn-with-img img {
    width: 60px; 
    height: 52px;
}