body {
      overflow-x: hidden;
  }
  /* Remove default Bootstrap background icon */
  .navbar-toggler-icon {
    background-image: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 24px;
    width: 30px;
  }
.text-capitalize {
    text-transform: capitalize;
}

  /* Individual bars */
  .bar {
    width: 24px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: 0.3s ease;
    border-radius: 2px;
  }

  .floating-input {
    position: relative;
    margin: 20px 0;
  }

  .floating-input input,
  .floating-input select {
    width: 100%;
    padding: 12px;
    border: 2px solid #aaa;
    border-radius: 8px;
    outline: none;
    font-size: 16px;
    background: transparent;
  }
  .floating-input label {
    position: absolute;
    left: 12px;
    top: 12px;
    background: white;
    padding: 0 4px;
    color: #aaa;
    font-size: 14px;
    pointer-events: none;
    transition: 0.2s ease all;
  }

  /* float when focused OR when the element has the helper class 'has-value' */
  .floating-input input:focus + label,
  .floating-input input.has-value + label,
  .floating-input select:focus + label,
  .floating-input select.has-value + label {
    top: -8px;
    left: 8px;
    font-size: 12px;
    color: #000;
  }
  
  .select2-container--default .select2-selection--single {
    height: 38px;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
  }

  /* Animate to X */
  .custom-toggler-icon.active .top-bar {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .custom-toggler-icon.active .middle-bar {
    opacity: 0;
  }

  .custom-toggler-icon.active .bottom-bar {
    transform: rotate(-45deg) translate(5px, -8px);
  }
  .menu-icon {
      display: inline-block;
      transition: transform 0.3s ease, content 0.3s ease;
      font-size: 1.0rem;
  }

  .menu-icon.active {
      transform: rotate(180deg);
  }
  #sidebar {
      width: 150px;
      position: fixed;
      top: 60px;
      left: -250px;
      height: 100%;
      transition: 0.3s;
      padding-top: 20px;
  }
  #sidebar.active {
      left: 0;
  }
  #sidebar a {
      color: white;
      padding: 10px 15px;
      display: block;
      text-decoration: none;
  }
  #sidebar > a:hover, #sidebar > a.active {
      background: #fff;
      color: rgb(23, 39, 149);
      border-right: 2px solid orangered;
      border-left: 3px dashed blue;
  }
  #sidebar > a:hover i, #sidebar > a.active i{
      color: orangered;
  }
  .collapse > .sidebar-link.active,
  .collapse > .sidebar-link:hover{
      background: #ddd;
      border-end-start-radius: 1rem;
      border-start-start-radius: 1rem;
  }
  .dropdown-menu {
      background: #495057;
      border: none;
  }
  .dropdown-menu a {
      color: white;
      padding-left: 30px;
  }
  .dropdown-menu a:hover {
      background: #6c757d;
  }
  #content {
      transition: margin-left 0.3s;
      margin-left: 0;
  }
  #content.active {
      margin-left: 150px;
  }
  .page-header{
      text-decoration: 2px wavy underline rgb(23, 39, 149) !important;
  }
  .border-private{
    border-bottom: 0.3em solid rgb(13, 110, 253) !important;
  }
  span.trCount {
      font-size: 1rem;
      font-weight: 400;
      position: static;
  }
  @media (max-width: 768px) {
    #logo {
      content: url('../img/favicon.png'); /* Switch to favicon */
      width: 32px;
      height: 32px;
    }
  }
  .loader{
    position:fixed; 
    top:0;
    left:0; 
    width:100%;
    height:100%; 
    background:rgba(255,255,255,0.7); 
    z-index:9999; 
    display:none; 
    display:flex; 
    justify-content:center; 
    align-items:center;
  }
  .custom-spinner {
    width: 4rem;
    height: 4rem;
    border: 0.5rem solid transparent;
    border-top: 0.5rem solid;
    border-radius: 50%;
    animation: spin 1s linear infinite, colorchange 3s linear infinite;
  }

  /* Spinning animation */
  @keyframes spin {
    100% { transform: rotate(360deg); }
  }

  /* Cycle through standout colors */
  @keyframes colorchange {
    0%   { border-top-color: #ff0057; } /* pink-red */
    25%  { border-top-color: #ff9800; } /* orange */
    50%  { border-top-color: #00bcd4; } /* cyan */
    75%  { border-top-color: #4caf50; } /* green */
    100% { border-top-color: #ff0057; }
  }
  /*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: gainsboro;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: deepskyblue;
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, red, transparent 20%);
  color: white;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}