.buttonEnabled{
    color:#47a041;
}
.buttonDisabled{
    background-color: lightgrey;
    color: gray;
    cursor: not-allowed;
}
input[type="radio"] {
    height: 0.8rem;
    width: 0.8rem;
    margin-right: 0.5rem;
    margin-top: 0.1rem;
}
.custom-radio {
     appearance: none;
     -webkit-appearance: none;
     border: 0.2rem solid #fff;
     background-color: var(--bg-color);
     border-radius: 50%;
    outline: 1px solid #999;
}

.custom-radio:hover {
    outline-color: #ff5722;
}

.custom-radio:checked {
    outline-color: #ff5722;
    background-color: #ff5722;
}
input[type="checkbox"]{
  height: 0.9rem;
  width: 0.9rem;
  margin-right: 0.5rem;
  margin-top: 0.1rem; 
  accent-color: #ff5722; 
  line-height: 1.2rem;  
}
#toastDiv {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #ff5722;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 0px 8px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 30px;
    font-size: 17px;
  }
#toastDiv.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
 @-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}
.customPlayButton{
  position: absolute;
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  top:40%;
  left: 40%;
  color:#47a041;
  border:none;

}
.customPlayButton:hover{
  transform: scale(1.1);
}