#loaderdiv{
  width: 100%;
  height:100%;
  position:fixed;
  z-index:99999;
  opacity:0.7;
   background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}


.loader {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
  }
  .loader::before , .loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #222E3C;
    animation: prixClipFix 2s linear infinite ;
  }
  .loader::after{
    border-color: red;
    animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
    inset: 6px;
  }

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

  @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }


  .btn-focus .btn:hover{
    background-color: unset;
  }
  .btn-outline-danger:hover{
    --bs-btn-hover-color: #dc3545;
    --bs-btn-hover-bg: #fff;
  }
  .btn-outline-danger:focus{
    --bs-btn-hover-color: #dc3545;
    --bs-btn-hover-bg: #fff;
  }
  .btn-outline-info:hover{
    --bs-btn-hover-color: #17a2b8;
    --bs-btn-hover-bg: #fff;
  }
  .btn-outline-info:focus{
    --bs-btn-hover-color: #17a2b8;
    --bs-btn-hover-bg: #fff;
  }
  .btn-info:hover{
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #17a2b8;
  }
  .btn-info:focus{
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #17a2b8;
  }
  .btn-danger:hover{
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
  }
  .btn-danger:focus{
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
  }