.position {
  float: left;
  margin: 7px 0 0 10px;
	
}

.progress-bar-circle-list {
	width: max-content;
    margin-right: 16px;
}

.progress-bar-circle {
  position: relative;
  height: 60px;
  width: 60px;
  cursor: pointer;
  margin-left: 10px;
  margin-top: 16px;
}
.progress-bar-circle-list>div:first-of-type {
  margin-left: 19px !important;
}

.details-container .progress-bar-circle {
  margin-left: calc( 50% - 25px ) !important;
}
.main-snatches .snatch .progress-bar-circle {
    margin-left: calc( 50% - 29px ) !important;
    -webkit-transform: scale(0.85);
        -ms-transform: scale(0.85);
            transform: scale(0.85);
}

.snatch.HandicapSnatch.total .progress-bar-circle {
  cursor: default;
}


.progress-bar-circle:after {
    content: '';
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* background: #cf0000; */
    border: 4px solid #F0F0F0;
    z-index: 999;
    position: absolute;
    display: block;
    left: -3.9px;
    top: -3.9px;
}

.circle-position-bet {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    text-align: center;
    line-height: 44px;
    left: 8px;
    top: 8px;
    z-index: 99;
    color: #4C4C4C;
    font-size: 13px;
    font-family: 'CrystalBetUni-Medium';
    background: #F0F0F0;
    cursor: pointer !important;
}

.HandicapSnatch.total .circle-position-bet {
   background: #dbdbdb;
   cursor: default !important;

}

.HandicapSnatch.total .progress-bar-circle:hover .circle-position-bet {
   background: #dbdbdb;
   color: #6d6d6d;
   cursor: default !important;
}

.progress-bar-circle.active .circle-position-bet, .snatch.SnatchSelected .circle-position-bet {
	background: #FDE053;
	color: #262000;

}
.snatch .progress-bar-circle:hover .circle-position-bet {
    background: #ffe242;
    color: #262000;
    
}
.snatch .progress-bar-circle:hover .circle-position-bet:after {
    width: 61px;
    height: 61px;
    border-radius: 100%;
    top: -8px !important;
    left: -8px !important;
    z-index: -1;
    opacity: 0.5;
    font-size: 13.5px;
    content: '';
    position: absolute;
    background-color: rgb(255,226,66);
}
.fora .circle-position-bet {
      line-height: 15px;
    padding-top: 7px;
    box-sizing: border-box;
}


.progress-bar-circle.LiveBetSnatchSelected {
	background: initial;
}


.circle-position {
	display: block;
}
.circle-bet {
	display: none;
}

.progress-bar-circle:hover .circle-position {
	display: none;
}
.progress-bar-circle:hover .circle-bet {
  display: block;
    width: 44.5px;
    height: 44.5px;
    border-radius: 100%;
    top: -0.5px;
    left: 0px;
    z-index: 99;
    line-height: 45px;
    position: absolute;
    background-color: #ffffff;
    color: #262000;
    font-weight: normal;
    font-size: 13.5px;
}
.circle-position-bet >.circle-bet:after {
  display: none;
    /*background-color: #E4C428;*/
    width: 61px;
    height: 61px;
    border-radius: 100%;
    top: -8px !important;
    left: -8px !important;
    z-index: -99;
    position: absolute;
    opacity: 0.7;
    background-color: rgb(255,226,66);
}
.progress-bar-circle:hover .circle-bet:after {
  display: block;
  content: '';
}
.game_loading_content .progress-bar-circle:hover .circle-bet.handicap:after {
  width: 64px;
  height: 62px;
}
.progress-bar-circle.active .circle-position {
	display: none;
}
.progress-bar-circle.active .circle-bet {
	display: block;
}


.progress-bar-circle div {
  position: absolute;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}

.progress-bar-circle-div-span {
    position: absolute;
    font-family: 'CrystalBetUni-Medium';
    font-size: 15px;
    line-height: 45px;
    height: 44px !important;
    width: 44px !important;
    left: 8px;
    top: 8px;
    text-align: center;
    border-radius: 50%;
    background-color:  #F0F0F0;
}

.progress-bar-circle-div-span div {
	position: absolute;
	bottom: -62px;
	font-size: 13px;
	font-family: 'CrystalBetUni-Bold';
      color: #1A1A1A;
      left: -4px;
}


.snatch.HandicapSnatch.total .progress-bar-circle-div-span div {
  display: none;
}


.progress-bar-circle .background { 
  background-color: #CCCCCC !important;
}

.progress-bar-circle .rotate {
  clip: rect(0 30px 60px 0);
  background-color: #33B52A !important;
	
}

.progress-bar-circle .left {
  clip: rect(0 30px 60px 0);
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar-circle .right {
  clip: rect(0 30px 60px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #33B52A !important;
}
 @keyframes 
toggle {  0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}