.close-button{
    height: 24px;
    width: 24px;
    background:  url(../img/close-icon.svg) no-repeat center;
    background-size: cover;
}

.round-button{
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 900;
    padding: 24px;
    color: #5f6368;
    box-sizing: border-box;
    transition: all 180ms;
}
.round-button:active,
.round-button:hover{
    background: #F5F5F5;
    cursor: pointer;
}


.cam-button{
    height: 42px;
    width: 42px;
    padding: 30px;
    box-sizing: border-box;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #fff;
    transition: all 200ms;
    position: relative;
}
.cam-button:hover{
    border: 1px solid #fff;
    background: #989899;
}


.cam-button-active{
    height: 42px;
    width: 42px;
    padding: 30px;
    box-sizing: border-box;
    background: #EF403B;
    border: 1px solid transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.bage-cam-button{
    background: #FF7933; 
    right:-10px; 
    top:5px; 
    font-size:12px;
    color: #fff;

}


.bage-users-button{
    background: #5f6061;
    right: -25px;
    top: -5px;
    font-size: 10px;
    font-weight: 400;
    color: #fff;
    /* padding: 20px; */
    height: 30px;
    width: 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* tools buttons */


.meet-cam-button{
    height: 32px;
    width: 32px;
    padding: 24px;
    box-sizing: border-box;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #fff;
    transition: all 200ms;
    position: relative;
}
.meet-cam-button:hover{
    border: 1px solid #fff;
    background: #989899;
}


.meet-cam-button-active{
    height: 32px;
    width: 32px;
    padding: 24px;
    box-sizing: border-box;
    background: #EF403B;
    color:#fff;
    border: 1px solid transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.btn-meet-inative{
    background: #730d09 !important;
}




.meet-button{
    height: 32px;
    width: 32px;
    font-size: 24px;
    padding: 25px;
    box-sizing: border-box;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    /* border: 1px solid #fff; */
    transition: all 200ms;
    position: relative;
    font-weight: 500;
}
.meet-button:hover{
    /* border: 1px solid #fff; */
    background: #3C4043;
}

.meet-button.active{
    /* background: #730d09; */
    color: rgb(138,180,248) !important;
}





.meet-button-power{
    height: 32px;
    width: 32px;
    min-width: 70px;
    padding: 24px;
    box-sizing: border-box;
    background: #EF403B;
    color:#fff;
    border: 1px solid transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22px;
    cursor: pointer;
    position: relative;
}

.meet-button-power:hover{
    filter: brightness(1.4);
}



 

.custom-tooltip {
    --bs-tooltip-bg: #444;
    --bs-tooltip-color: #fff;
  }


 


  /* pulse */


@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

* {
  box-sizing: border-box;
}

.blobs-container {
  display: flex;
}

.blob {
  background: black;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  margin: 10px;
  height: 20px;
  width: 20px;
  transform: scale(1);
  animation: pulse-black 2s infinite;
}

@keyframes pulse-black {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.blob.white {
  background: white;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
  animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.blob.red {
  background: rgba(255, 82, 82, 1);
  box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

.blob.orange {
  background: rgba(255, 121, 63, 1);
  box-shadow: 0 0 0 0 rgba(255, 121, 63, 1);
  animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 121, 63, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 121, 63, 0);
  }
}

.blob.yellow {
  background: rgba(255, 177, 66, 1);
  box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
  animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 177, 66, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 0);
  }
}

.blob.blue {
  background: rgba(52, 172, 224, 1);
  box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
  animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
  }
  
  100% {
    transform: scale(0.95);
  }

}