/* Main dropdown styles */
      .dropdown-container {
          font-family: Arial, sans-serif;
          /* Replace with your preferred font */
          position: relative;
          width: fit-content;
          padding: 0;

          /* margin: 20px; */
          /* Spacing around the dropdown */
      }

      .dropdown-header {
          background-color: #F5F5F5;
          /* Header background color */
          color: black;
          /* Header text color */
          padding: 10px 15px;
          margin: 0px 4px;
          border-radius: 100px;
          cursor: pointer;
          text-align: right;
          transition: background-color 0.3s ease-in-out;
          font-size: 12.5px;
          font-weight: 500;
          /* Color transition */
          /* For RTL languages */
      }

      .reports-page .dropdown-header{
        /* background-color: transparent; */
       margin-right: 20px;
        font-size: 20px;
        font-weight: 700;
        padding:6px 12px;
        line-height: 1;
      }

      .dropdown-nav-menu {

          list-style: none;
          padding: 0;
          margin-top: 4px;
          
          border-radius: 4px;
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
          /* background-color: #F5F5F5; */
          background-color: #ECF2FE;
          position: absolute;
          right: 0;
          display: block;
          /* Hide menu initially */
          z-index: 1001;
          /* Ensures dropdown appears above other content */
          width: max-content;
          /* Adjust width to the content */
          border: 1px solid #ddd;
          transition: visibility 0.1s, opacity 0.1s linear;
          /* Add fade-in transition */
          opacity: 0;
          visibility: hidden;
          /* Optional border */
      }



      .dropdown-container.active .dropdown-header {
          background-color: #ebebeb;
          
          /* Change to the color of the dropdown */
      }

      .dropdown-nav-menu li {
          padding: 8px 20px;
          color: #333;
          border-bottom: 1px solid #ddd;
            
          /* Divider between items */
          cursor: pointer;
        }
        
        .dropdown-nav-menu li a{
            font-size: 13px;
            text-decoration: none;
        }
      .dropdown-nav-menu li:hover {
          background-color: #dce2ef;
          /* Hover background color */
      }

      .dropdown-nav-menu li:last-child {
          border-bottom: none;
      }

      /* Add a class for when the dropdown is active to display the menu */
      .dropdown-container.active .dropdown-nav-menu {
          display: block;
          opacity: 1;
          /* Fade in to full opacity */
          visibility: visible;
          /* Make sure the menu is visible */
      }

      .dropdown-container.hover.active .dropdown-nav-menu {
          display: block;
          opacity: 1;
          /* Fade in to full opacity */
          visibility: visible;
          /* Make sure the menu is visible */
      }

      /* Arrow rotation when the dropdown is active */
      .dropdown-container.active .arrow {
          transform: rotate(180deg);
          /* Arrow points up */
      }

      /* Smooth transition for the arrow rotation */
      .arrow {
          transition: transform 0.3s ease-in-out;

      }

      /***********************************************************/
      /***********************************************************/
      /***********************************************************/
      /***********************************************************/


     
@keyframes ripple-effect {
    from {
      opacity: 1;
      transform: scale(0);
    }
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  
  .ripple {
    overflow: hidden;
    position: relative;
  }
  
  .ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: translate(-50%, -50%) scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
  }
  
  .ripple:active:after {
    transform: translate(-50%, -50%) scale(0, 0);
    opacity: .2;
    transition: 0s;
  }