/* Wrapper */
.bf-scb{
  position: fixed;
  width: 160px;
  height: 160px;
  z-index: 999999;
  pointer-events:none;
}

/* Corner positions */
.bf-scb.top_left{ top:20px; left:20px; }
.bf-scb.top_right{ top:20px; right:20px; }
.bf-scb.bottom_left{ bottom:20px; left:20px; }
.bf-scb.bottom_right{ bottom:20px; right:20px; }

/* Ribbon base */
.bf-scb-ribbon{
  pointer-events:auto;
  position:absolute;
  min-width:230px;
  padding:14px 18px;
  background:var(--bf-bg);
  color:var(--bf-fg);
  font-weight:700;
  font-size:18px;
  border-radius:14px;
  text-decoration:none;
  text-align:center;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}

/* Corner rotations */
.bf-scb.top_left .bf-scb-ribbon{
  top:40px;
  left:-55px;
  transform:rotate(45deg);
}

.bf-scb.top_right .bf-scb-ribbon{
  top:40px;
  right:-55px;
  transform:rotate(-45deg);
}

.bf-scb.bottom_left .bf-scb-ribbon{
  bottom:40px;
  left:-55px;
  transform:rotate(-45deg);
}

.bf-scb.bottom_right .bf-scb-ribbon{
  bottom:40px;
  right:-55px;
  transform:rotate(45deg);
}

/* Close button */
.bf-scb-x{
  pointer-events:auto;
  position:absolute;
  width:28px;
  height:28px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.65);
  color:#fff;
  cursor:pointer;
  font-size:18px;
}

.bf-scb.top_left .bf-scb-x{ top:12px; left:90px; }
.bf-scb.top_right .bf-scb-x{ top:12px; right:90px; }
.bf-scb.bottom_left .bf-scb-x{ bottom:12px; left:90px; }
.bf-scb.bottom_right .bf-scb-x{ bottom:12px; right:90px; }

/* Responsive */
@media(max-width:600px){
  .bf-scb{ transform:scale(.8); }
}