/* <!-- Loarding bar -->
<div style="margin-left: 50%;">
  <div id="outer-loader" style="display: non e; "></div>Loading...
</div>     

    <div class="loader1" style="margin-left: 45%; display: none;">
        <div id="loader1"></div><span>Loading...</span>
    </div>
        <div id="inner-loader"></div>

        // $('#outer-loader').show();
        $('#inner-loader').fadeIn();
*/
.btn-img {
  width: 20px;
  height: 20px;
  /* right: 10px; */
  /* margin-right: 10px; */
}
    /* loading */
      #inner-loader {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
      }

      #outer-loader {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;

        /* width: 60px;
        height: 60px; */
        animation: spin 2s linear infinite;
        z-index: 9999; /* Ensure the loader is on top of other elements */
        display: none; /* Hide the loader initially */
      }

      .inner-loader {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
      }

      .outer-loader {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;

  
        /* width: 60px;
        height: 60px; */

        animation: spin 2s linear infinite;
        z-index: 9999; /* Ensure the loader is on top of other elements */
        display: none; /* Hide the loader initially */
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }


      /* <button id="ajaxButton" class="btn-for-loading">
      <img src="path/to/image.png" alt="Button Image" class="btn-img">
      <span class="btn-text">Click Me </span>
      <div class="btn-loader" style="display: none;"></div>
  </button> */


    .btn-for-loading {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 10px 20px;
      /* border: none; */
      /* background-color: #007bff; */
      /* color: white; */
      cursor: pointer;
  }

    .btn-loader {
      position: absolute;
      left: 8px;
      width: 25px;
      height: 25px;
      border: 3px solid #f3f3f3;
      border-top: 3px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


      /* only logo loader */
      /* <div class="logo-loader">
          <img src="../../../../assets/<?php echo $_SESSION['schId']; ?>/img/logo.png" alt="Logo">
      </div> */

  .logo-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: none; /* Hide the loader initially */
  }

  .logo-loader img {
    width: 220px; /* Adjust the width as needed */
    height: 200px; /* Adjust the height as needed */
    animation: fadeInOut 2s infinite;
  }

  @keyframes fadeInOut {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
  }


  /* ******** logo loader with loader around */

/* <div clas s="double-outer-loader">
  <div class="logo-container">
  <img src="../../../../assets/<?php echo $_SESSION['schId']; ?>/img/logo.png" alt="Logo">
  </div>
  <div class="rotating-loader"></div>
</div> */
  .double-outer-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    z-index: 9999;
    display: none;
  }
  
  .logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .logo-container img {
    width: 80px; /* Adjust the width as needed */
    height: 80px; /* Adjust the height as needed */
  }
  
  .rotating-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }