button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#loader_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    flex-direction: column;
    color: #fff;
    z-index:1000;
}

.overlay-content {
    text-align: center;
}

#loader_overlay.active {
    visibility: visible;
}

#loader_overlay p {
	display:inline-block;
	margin:10px 0;
	color:#000;
	font-size:16px;
	text-align:center;
	max-width:320px;
} 

.loader {
  width: 48px;
  height: 40px;
  margin-top: 30px;
  display: inline-block;
  position: relative;
  background: #000;
  border-radius: 15% 15% 35% 35%;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 45px;
  top: 8px;
  border: 4px solid #000;
  width: 16px;
  height: 20px;
  border-radius: 0 4px 4px 0;
}
.loader::before {
  content: '';  
  position: absolute;
  width: 1px;
  height: 10px;
  color: #000;
  top: -15px;
  left: 11px;
  box-sizing: border-box;
  animation: animloader 1s ease infinite;
}

@keyframes animloader {
    0% {
  box-shadow: 2px 0px rgba(0, 0, 0, 0), 12px 0px rgba(0,0, 0, 0.3), 20px 0px rgba(0, 0, 0, 0);
}
    50% {
  box-shadow: 2px -5px rgba(0, 0, 0, 0.5), 12px -3px rgba(0, 0, 0, 0.5), 20px -2px rgba(0, 0, 0, 0.6);
}
    100% {
  box-shadow: 2px -8px rgba(0, 0, 0, 0), 12px -5px rgba(0, 0, 0, 0), 20px -5px rgba(0, 0, 0, 0);
}
  }