/* ======= GENERAL  ======= */
.access-button,
.event-button,
.todo-button,
.contact-button,
.meeting-button,
.purchase-invoice-button,
.sales-invoice-button,
.project-button,
.timesheet-button,
.quotation-button,
.record-button,
.chat-button,
.meetings-button,
.logs-button {
  width: 60px;  /* adjust these values to set the size of your button */
  height: 60px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;  /* makes the button a circle */
  position: relative;
  overflow: hidden;
    /* Background gradient for 3D spherical effect */
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.5) 80%);
    /* Box shadow for depth */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* Transition for smooth hover effect */
    transition: transform 0.3s;
  
}
.access-button i,
.event-button i,
.todo-button i,
.contact-button i,
.meeting-button i,
.purchase-invoice-button i,
.sales-invoice-button i,
.project-button i,
.timesheet-button i,
.quotation-button i,
.record-button i,
.chat-button i,
.meetings-button i,
.logs-button i {
  position: relative;
  top: 2px;
  z-index: 1; /* to ensure the icon is always on top of the button */
}
.access-button:hover,
.event-button:hover,
.todo-button:hover,
.contact-button:hover,
.meeting-button:hover,
.purchase-invoice-button:hover,
.sales-invoice-button:hover,
.project-button:hover,
.timesheet-button:hover,
.quotation-button:hover,
.record-button:hover,
.chat-button:hover,
.logs-button:hover {
    /* Hover effect - button pops up */
    transform: translateY(-4px);
}
.access-button:hover i,
.event-button:hover i,
.todo-button:hover i,
.contact-button:hover i,
.meeting-button:hover i,
.purchase-invoice-button:hover i,
.sales-invoice-button:hover i,
.project-button:hover i,
.timesheet-button:hover i,
.quotation-button:hover i,
.record-button:hover i,
.chat-button:hover i,
.logs-button:hover i {
    transform: scale(1.2);  
}
/* Three.js */
.progress-bar-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: 0xf9fafa;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
}
#progress-bar {
  width: 45%;
  margin-top: 0.5%;
  height: 2%;
}
label {
  color: steelblue;
  margin: 0px;
  margin-top: 3px;
  padding: 0px;
  font-size: 0.9rem;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 4.5em;
  height: 4.5em;
}
.loader {
  margin: 30px auto;
  font-size: 9px;
  position: relative;
  text-indent: -9999em;
  border-top: 0.6em solid rgba(30, 170, 180, 0.2);
  border-right: 0.6em solid rgba(30, 170, 180, 0.2);
  border-bottom: 0.6em solid rgba(30, 170, 180, 0.2);
  border-left: 0.6em solid #468294;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
canvas.webgl {
  width: 40vmin;  /* vmin is the smaller value between vw and vh */
  height: 40vmin;
  border-radius: 50%;  /* to make it circular */
  opacity: 0.69;
}

@media screen and (max-width: 768px) {
  canvas.webgl {
    width: 30vmin;
    height: 30vmin;
  }
}