.circled-button {
  background: #e31bd4;
  text-align: center;
  border: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  transition: 0.4s ease;
  cursor: pointer;
  mask-image: radial-gradient(circle 5px at 0 50%, transparent 0, transparent 10px, black 10px), radial-gradient(circle 5px at 100% 50%, transparent 0, transparent 10px, black 10px);
  line-height: 1.5rem;
  text-decoration: none;
  min-width: 85px;
}

.circled-button-blue {
  background: #0d6efd;
}

.circled-button .material-icons {
  font-size: 18px;
}

.circled-button.white {
  background: #ffffff !important;
  color: #252525 !important;
}

.circled-button:hover {
  background: rgba(0, 0, 0, 0.64);
}

.box {
  display: inline-block;
}

.mask {
  -webkit-mask: radial-gradient(circle 5px at 0 100%, rgba(0, 0, 0, 0) 98%, #000) top left, radial-gradient(circle 5px at 100% 100%, rgba(0, 0, 0, 0) 98%, #000) top right, radial-gradient(circle 5px at 0 0, rgba(0, 0, 0, 0) 98%, #000) bottom left, radial-gradient(circle 5px at 100% 0, rgba(0, 0, 0, 0) 98%, #000) bottom right;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  padding-left: 10px;
  padding-right: 10px;
}

.mask-side {
  mask: radial-gradient(circle 0px at 50% 0, rgba(0, 0, 0, 0) 98%, #000) top left, radial-gradient(circle 3px at 85% 0%, rgba(0, 0, 0, 0) 98%, #000) top right, radial-gradient(circle 0px at 0 50%, rgba(0, 0, 0, 0) 98%, #000) bottom left, radial-gradient(circle 3px at 85% 100%, rgba(0, 0, 0, 0) 98%, #000) bottom right;
  mask-size: 100% 50%;
  /* mask-size: 85% 50%; androdi*/
  mask-repeat: no-repeat;
}

.btn-primary {
  color: #fff;
  background-color: #e31bd4;
  border-color: #cc3cb2;
}

.btn-primary:hover {
  color: #fff;
  background-color: #e31bd4;
  border-color: #cc3cb2;
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #e31bd4;
  border-color: #cc3cb2;
  box-shadow: 0 0 0 0.2rem rgb(35, 35, 35);
}

.btn-secondary {
  color: #fff;
  background-color: #6fc8e8;
  border-color: #95c9dc;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #17aae3;
  border-color: #73a0b0;
}

.btn-secondary:focus, .btn-secondary.focus {
  color: #fff;
  background-color: #2496be;
  border-color: #78c8e5;
  box-shadow: 0 0 0 0.2rem rgb(108, 202, 233);
}

.switch-btn-left {
  font-size: 11px;
  padding: 10px;
  border-radius: 25px;
  display: block;
  float: left;
  background: #2d2d2d;
  cursor: pointer;
  transition-duration: 0.5s;
  transition-property: background-color;
}

.switch-btn-right {
  font-size: 11px;
  padding: 10px;
  border-radius: 25px;
  display: block;
  float: left;
  background: #2d2d2d;
  cursor: pointer;
  transition-duration: 0.5s;
  transition-property: background-color;
  position: relative;
}

.switch-btn-search {
  font-size: 11px;
  padding: 5px;
  border-radius: 25px;
  display: block;
  float: left;
  background: #2d2d2d;
  cursor: pointer;
  transition-duration: 0.5s;
  transition-property: background-color;
  position: relative;
}

.switch-btn-search .material-icons {
  font-size: 28px;
  padding: 0;
}

.switch-btn-active {
  background: #e31bd4;
  box-shadow: white 0 0 8px;
  position: relative;
  z-index: 202;
}

.switch-btn-background {
  background: #2d2d2d;
}

.search-view {
  width: 100%;
}

.close {
  color: #ffffff;
}

/* Button styling */
.unlock-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e31bd4;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  z-index: 999;
}

.blur-content {
  filter: blur(3px);
  pointer-events: none; /* Disable clicks inside the blurred area */
}

.background-blur {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

/*# sourceMappingURL=button.css.map */