/* Change the font size for SweetAlert2 dialogs */
  .swal2-container .swal2-html-container {
    font-size: 16px; /* Adjust the font size as needed */
  }
  
  .valid {
    color: green;
  }

  .invalid {
    color: red;
  }

  .custom-ui-widget-header-warning {
    background: #EBCCCC;
    font-size: 1em;
  }

  /* Define custom styles for the dialog */
  .custom-ui-widget-header-warning .ui-dialog-titlebar {
    background: #D9534F;
    /* Background color for the titlebar */
    color: #eee;
    /* Text color for the titlebar */
    border: none;
    /* Remove the border */
  }

  /* Style the close button (keep the "x" and remove the text) */
  .custom-ui-widget-header-warning .ui-dialog-titlebar-close {
    background: none;
    /* Remove the background color */
    border: none;
    /* Remove the border */
    text-indent: -9999px;
    /* Move the text out of the visible area */
    overflow: hidden;
    /* Hide any overflow */
    width: 20px;
    /* Adjust the width as needed */
    height: 20px;
    /* Adjust the height as needed */
    position: relative;
  }

  /* Style the "x" icon inside the close button */
  .custom-ui-widget-header-warning .ui-dialog-titlebar-close::after {
    content: "x";
    /* Set the "x" character as content */
    color: #fff;
    /* Text color for the "x" */
    font-size: 16px;
    /* Adjust the font size as needed */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 20px;
    /* Center the "x" vertically */
  }