/*https://stackoverflow.com/questions/37373734/fully-circular-buttons-with-dynamic-size*/
/* https://codepen.io/ysoftaoglu/pen/qZRGzK */
/* Traditional */
.round-button-traditional {
  height: 30px;
  width: 30px;
  text-align: center;
  display: inline-block;  
  background-color: #ddebf4;
  padding: 1px;
  margin: 1px;
  border: 1px solid #fff;
  cursor: pointer;
  letter-spacing: 2px;
  position:relative;
  border-radius: 50%;
  overflow: hidden;
}

.round-button-traditional:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  background : #fff;
  left: 0;
  bottom: 0;
  transition: all .3s;
  opacity: 0.3;
  border-radius: 50%;
}

.round-button-traditional:hover:before {
  width: 100%;
}

.round-button-traditional-popped {
  height: 30px;
  width: 30px;
  text-align: center;
  display: inline-block;  
  background-color: #68899f;
  padding: 1px;
  margin: 1px;
  cursor: pointer;
  letter-spacing: 2px;
  position:relative;
  border-radius: 50%;
  overflow: none;  
  opacity: 0.3;  
  outline-color: #192126;
  outline-style: dotted;
  outline-width: 1px;
  outline: 5px auto #192126;
  outline-color: #192126;
  outline-style: auto;
  outline-width: 5px;
}

.round-button-traditional-popped:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  background : #fff;
  left: 0;
  bottom: 0;
  transition: all .3s;
  opacity: 0.3;
  border-radius: 50%;
}

/* Fun */
.round-button-fun{
  height: 30px;
  width: 30px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  border-radius: 50%;
  overflow: none;
  text-align: center;
  padding: 1px;
  margin: 1px;
}
.round-button-fun:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}
.round-button-fun:active{
  background-color: #2980b9;
}

.round-button-fun-popped{
  height: 30px;
  width: 30px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #2bfff4 !important;
  border-radius: 50%;
  overflow: none;
  text-align: center;
  padding: 1px;
  margin: 1px;
  outline-color: #3ca0de;
  outline-style: dotted;
  outline-width: 1px;
  outline: 5px auto #3ca0de;
  outline-color: #3ca0de;
  outline-style: auto;
  outline-width: 5px;
}
.round-button-fun-popped:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}
.round-button-fun-popped:active{
  background-color: #ff9d9d;
}

/* Cats */
.round-button-cat {
  -webkit-appearance: button;
  background-color: #f7ee8c;
}

.round-button-cat-popped{
  -webkit-appearance: button;
  background-color: #ffffff;
}

/* All */
.round-button-all{
  /*min-width: 60px;
  max-width:60px;*/
  height: 30px;
  width: 30px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #23a13e;
  border-radius: 50%;
  overflow: none;
  text-align: center;
  padding: 1px;
  margin: 1px;
}
.round-button-all:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}
.round-button-all:active{
  background-color: #ffffff;
}

.round-button-all-popped{
  height: 30px;
  width: 30px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #ff9d9d;
  border-radius: 50%;
  overflow: none;
  text-align: center;
  padding: 1px;
  margin: 1px;
}
.round-button-all-popped:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}
.round-button-all-popped:active{
  background-color: #ff9d9d;
}

/* Magnitude */
.round-button-magnitude{
  height: 60px;
  width: 90px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #3498db;
  background-image: url("images/magnitude100.png");
  border-radius: 50%;
  overflow: none;
  text-align: center;
  padding: 1px;
  margin: 1px;
}
.round-button-magnitude:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}
.round-button-magnitude:active{
  background-color: #2980b9;
}

.round-button-magnitude-popped{
  height: 60px;
  width: 90px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #000000;
  background-image: url("images/magnitude-popped.png");
  border-radius: 50%;
  overflow: none;
  text-align: center;
  padding: 1px;
  margin: 1px;
}
.round-button-magnitude-popped:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}
.round-button-magnitude-popped:active{
  background-color: #000000;
}

.bubble-wrap {
  width: 350px;
  padding-top: 10px;  
  margin-left: 10px;
}
 
 @media (max-width: 767.98px) {
  .btn-group-lg>.btn, .btn-lg {
    font-size: 0.75rem;
  }
}