/* Fatoe glossy inverted loader */
#fatoe-loader-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: #fff; /* white background */
}
.loader {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    165deg,
    rgba(0, 0, 0, 1) 0%,
    rgb(50, 50, 50) 40%,
    rgb(120, 120, 120) 98%,
    rgb(230, 230, 230) 100%
  );
  border-radius: 50%;
  position: relative;
}
.loader:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border-bottom: 0 solid #00000005;
  box-shadow:
    0 -10px 20px 20px #00000040 inset,
    0 -5px 15px 10px #00000050 inset,
    0 -2px 5px  #00000080 inset,
    0 -3px 2px  #000000bb inset,
    0 2px 0px   #000000,
    0 2px 3px   #000000,
    0 5px 5px   #00000090,
    0 10px 15px #00000060,
    0 10px 20px 20px #00000040;
  filter: blur(3px);
  animation: 2s rotate linear infinite;
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}