:root {
  --fab-size: 80px;
  --fab-size-mobile: 56px;
  --fab-bottom: 30px;
  --fab-right: 30px;
  --fab-progress-bottom: 30px;
  --fab-progress-right: 30px;
}

.fab-border {
  width: calc(var(--fab-size));
  height: calc(var(--fab-size));
  background-color: var(--main-dark-color);
  border-radius: 100px;
  box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: var(--fab-bottom);
  right: var(--fab-right);
  z-index: 10;
  transition: all 0.1s ease;
}

.fab {
  position: fixed;
  bottom: calc(var(--fab-bottom) + 7px);
  right: calc(var(--fab-right) + 7px);
  height: calc(var(--fab-size) - 15px);
  width: calc(var(--fab-size) - 15px);
  border-radius: 100px;
  background-color: var(--main-dark-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}

.fab:hover {
  cursor: pointer;
  opacity: 0.9;
}

.fab-next-section {
  width: 50%;
}

.fab-top-section {
  width: 35%;
}

.fab-top-section {
  display: none;
}

.circular-progress-container {
  position: fixed;
  bottom: var(--fab-progress-bottom);
  right: var(--fab-progress-right);
  height: calc(var(--fab-size));
  width: calc(var(--fab-size));
  z-index: 14;
  border-radius: 100%;
}

.circular-progress-container svg {
  transform: rotate(-90deg);
}

.circular-progress-container svg circle {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 4px;
  /*fill: transparent;*/
  position: fixed;
  bottom: var(--fab-progress-bottom);
  right: var(--fab-progress-right);
  height: calc(var(--fab-size) * 3);
  width: calc(var(--fab-size) * 3);
}

.circular-progress-container .progress-pie {
  stroke: #E1519B;
}