:root {
    --dot-size: 20px;

    --gray:rgb(57, 58, 59);
    
    --red:rgb(199, 75, 17);

    --green:rgba(15, 204, 78, .65);
    --green-transparent:rgba(15, 204, 78, 0);
    
    --orange:rgba(253, 169, 13, 0.75);
    --orange-transparent:rgba(253, 169, 13, 0);
}

.dot {
    background: var(--gray);
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 100%;
    cursor: pointer;
    transition: all 0.2s;
}

.dot.red {
    background: var(--red);
}

.dot.green {
    background: var(--green);
    box-shadow: 0 0 0 var(--green);
    animation: pulsing-online 3s infinite;
}

.dot.orange {
    background: var(--orange);
    box-shadow: 0 0 0 var(--orange);
    animation: pulsing-warning 1s infinite;
}

.blinking {
    animation: blink 1s infinite;
}

.Mui-disabled{
  -webkit-text-fill-color: #878787 !important;
  /* opacity: 1; */
  background-color: rgba(79,79,79,0.08);
  cursor: not-allowed;
}

.css-1plu89h {
  box-shadow: none !important;
}

.button-link {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1677ff;
  border-radius: 4px;
  color: #fff;  
}

.button-link:hover {
  background-color: #0958d9;
}

@keyframes blink {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

@keyframes pulsing-online {
    from {
      box-shadow: 0 0 0 0 var(--green);
    }
    70% {
      box-shadow: 0 0 0 var(--dot-size) var(--green-transparent);
    }
    to {
      box-shadow: 0 0 0 0 var(--green-transparent);
    }
}

@keyframes pulsing-warning {
    from {
      box-shadow: 0 0 0 0 var(--orange);
    }
    70% {
      box-shadow: 0 0 0 var(--dot-size) var(--orange-transparent);
    }
    to {
      box-shadow: 0 0 0 0 var(--orange-transparent);
    }
}