/* model Overlay Styles */
   #overlay1{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    z-index: 1000;
  }
  #overlay2{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    z-index: 1000;
  }
  #overlay2_2{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    z-index: 1000;
  }
  #overlay3{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    z-index: 1000;
  }
  /* model Content */
  #content1{
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
    overflow: auto;
    border-radius: 15px;
    text-align: center;
  }
    /* model Content */
    #content2{
        background: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
        overflow: auto;
        border-radius: 15px;
        text-align: center;
      }
      #content2_2{
        background: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
        overflow: auto;
        border-radius: 15px;
        text-align: center;
      }
      #content3{
        background: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
        overflow: auto;
        border-radius: 15px;
        text-align: center;
      }
      #overlay5{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
        display: none; /* Hidden by default */
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        z-index: 1000;
      }
      /* model Content */
      #content5{
        background: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
        overflow: auto;
        border-radius: 15px;
        text-align: center;
        width: 80%;
        height: 80%;
      }
  /* Disable scrolling when model is active */
  body.model-active1{
    overflow: hidden;
  }

  input:read-only {
       background-color: LIGHTgrey;
       cursor: not-allowed;
}


/* Animations in New Ticket */

    /* Enter animation */
    .overlay.active .overlay-content {
        animation: slideIn 1.5s forwards;
    }
    /* Exit animation */
    .overlay.closing .overlay-content {
        animation: slideOut 1.5s forwards;
    }
    /* Overlay visibility */
    .overlay.active {
        opacity: 1;
        visibility: visible;
    }
    /* Disable background scrolling */
    body.no-scroll {
        overflow: hidden;
    }
    /* Keyframes for animation */
    @keyframes slideIn {
        from {
        transform: translate(100%, 100%) scale(0.5);
        }
        to {
        transform: translate(0, 0) scale(1);
        }
    }
    @keyframes slideOut {
        from {
        transform: translate(0, 0) scale(1);
        }
        to {
        transform: translate(100%, 100%) scale(0.5);
        }
    }