.main-content {
    display: flex;
    justify-content: space-between
}
.mine {
  color:#fff;
}
.left-side {
    width: 50%
}

.right-side {
    width: 50%
}

.right-side-row-1 {
    display: flex;
    overflow: hidden;
    position: relative
}

.box {
    width: 100%;
    margin-bottom: 24px
}

.right-side-row-2 {
    display: flex
}


.amount-bet-content {
    display: flex;
    justify-content: space-between
}

.amount-bet-btns {
    width: 80%;
    display: flex;
    justify-content: space-between;
    border-radius: 5px
}

.amout-bet-btn {
    width: 10%;
    font-size: 12px;
    height: 30px;
    padding: 0
}

.right-side-row-3 {
    width: 100%;
    display: flex
}

.amout-bomb-btns {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.right-side-row-4 {
    display: flex
}

.right-side-row-5 {
    display: flex;
    justify-content: space-between
}

.info-game-boxes {
    display: flex;
    width: 60%;
    justify-content: space-between
}

.finish-game-btn {
    width: 100%
}

.finish-game {
    display: flex;
    justify-content: space-between
}


.finish-game-btn {
    height: 55px;
    width: 150px
}

.start-game-btn {
    height: 50px;
    width: 35%
}

.chance-game-box-percent {
    display: flex;
    justify-content: space-between;
    width: 80%
}

.set-chance-game-btn {
    height: 50px;
    width: 30%
}

.minefield {
    width: 400px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 10px auto;

}

.mine {
    width: 70px;
    height: 70px;
    border: 2px solid ;
    
    
  background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
    font-size: 14px;
    border-radius: 20px;
}

.mine:nth-child(1) {
    border-radius: 20px;
}

.mine:nth-child(5) {
    border-radius: 20px;
}

.mine:nth-child(21) {
    border-radius: 20px;
}

.mine:nth-child(25) {
   border-radius: 20px;
}

.win-mine {
  background: #42b477;
}

.lose-mine {
  background: #8f3947;
}

.mine:hover {
 background-color: #045de9;
background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
    cursor: pointer
}

.title {
    margin-bottom: 5px
}

.result {
    margin-right: 5%
}

.result:last-child {
    margin-right: 0
}

.result-win {
    color: #28a745
}

.result-lose {
    color: #dc3545
}

.amout-bet-input {
    height: 35px;
    width: 80px;
    border: none
}

.amount-bet i.fas {
    width: 26px;
    height: 26px;
    line-height: 35px;
    text-align: center;
    margin-right: -26px;
    position: relative;
    z-index: 1;
    float: left
}

.amount-bet i.fas+input {
    padding-left: 26px
}

.amout-bet-btn:last-child {
    margin-right: 0
}

.amout-bet-btn:nth-child(9) {
    display: none
}

.mineSelected:nth-child(1) {
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5)
}

.mineSelected:nth-child(2) {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5)
}

.mineSelected:nth-child(3) {
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.5)
}

.mineSelected:nth-child(4) {
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.5)
}



.animate {
    -webkit-animation: spinit .2s 5;
    -moz-animation: spinit .2s 5;
    animation: spinit .2s 5
}

@-webkit-keyframes spinit {
    0% {
        top: 0
    }

    9.9% {
        top: 0
    }

    10% {
        top: -1em
    }

    19.9% {
        top: -1em
    }

    20% {
        top: -2em
    }

    29.9% {
        top: -2em
    }

    30% {
        top: -3em
    }

    39.9% {
        top: -3em
    }

    40% {
        top: -4em
    }

    49.9% {
        top: -4em
    }

    50% {
        top: -5em
    }

    59.9% {
        top: -5em
    }

    60% {
        top: -6em
    }

    69.9% {
        top: -6em
    }

    70% {
        top: -7em
    }

    79.9% {
        top: -7em
    }

    80% {
        top: -8em
    }

    89.9% {
        top: -8em
    }

    90% {
        top: -9em
    }

    99.9% {
        top: -9em
    }

    100% {
        top: -9em
    }
}

@-moz-keyframes spinit {
    0% {
        top: 0
    }

    9.9% {
        top: 0
    }

    10% {
        top: -1em
    }

    19.9% {
        top: -1em
    }

    20% {
        top: -2em
    }

    29.9% {
        top: -2em
    }

    30% {
        top: -3em
    }

    39.9% {
        top: -3em
    }

    40% {
        top: -4em
    }

    49.9% {
        top: -4em
    }

    50% {
        top: -5em
    }

    59.9% {
        top: -5em
    }

    60% {
        top: -6em
    }

    69.9% {
        top: -6em
    }

    70% {
        top: -7em
    }

    79.9% {
        top: -7em
    }

    80% {
        top: -8em
    }

    89.9% {
        top: -8em
    }

    90% {
        top: -9em
    }

    99.9% {
        top: -9em
    }

    100% {
        top: -9em
    }
}

@keyframes spinit {
    0% {
        top: 0
    }

    9.9% {
        top: 0
    }

    10% {
        top: -1em
    }

    19.9% {
        top: -1em
    }

    20% {
        top: -2em
    }

    29.9% {
        top: -2em
    }

    30% {
        top: -3em
    }

    39.9% {
        top: -3em
    }

    40% {
        top: -4em
    }

    49.9% {
        top: -4em
    }

    50% {
        top: -5em
    }

    59.9% {
        top: -5em
    }

    60% {
        top: -6em
    }

    69.9% {
        top: -6em
    }

    70% {
        top: -7em
    }

    79.9% {
        top: -7em
    }

    80% {
        top: -8em
    }

    89.9% {
        top: -8em
    }

    90% {
        top: -9em
    }

    99.9% {
        top: -9em
    }

    100% {
        top: -9em
    }
}

#digit1 {
    top: -4em
}

#digit2 {
    top: -2em
}

#digit3 {
    top: 0
}

#amoutBetInputPercentTargetGame:disabled {
    background: #fff
}

@media screen and (max-width: 1200px) {
    .chat-main {
        height:299px
    }

    .left-side {
        width: 55%
    }

    .right-side {
        width: 43%
    }

    .start-game-btn {
        height: 40px
    }

    .finish-game-btn {
        height: 40px
    }

    .amout-bomb-btns {
        flex-wrap: wrap
    }

    .amout-bet-btn {
        width: 18%
    }

    .amout-bet-btn:nth-child(7) {
        display: none
    }

    .amout-bet-btn:nth-child(8) {
        display: none
    }

    .amout-bet-btn:nth-child(6) {
        display: none
    }

    .history-game {
        display: none
    }

    .finish-game {
        width: 100%;
        flex-wrap: wrap
    }

    .finish-game-btn {
        width: 100%
    }

    .circle {
        margin-bottom: 10px
    }

    .start-game-btn {
        width: 100%
    }

    .minefield {
        width: 360px;
        height: 360px;
        
    }

    .mine {
        width: 65px;
        height: 65px
    }

    .box {
        margin-bottom: 11px
    }


}

@media screen and (max-width: 974px) {


    .main-content {
        display: flex;
        flex-direction: row
    }

    .left-side {
        width: 56%
    }

    .right-side {
        width: 43%
    }


    .minefield {
        width: 300px;
        height: 300px;
        
    }

    .mine {
        width: 55px;
        height: 55px
    }


}

@media screen and (max-width: 840px) {

    .minefield {
        width: 440px;
        height: 440px;
        
    }

    .start-game-btn {
        width: 40%;
        height: 50px
    }

    .finish-game-btn {
        width: 40%;
        height: 50px
    }

    .info-game-boxes {
        width: 55%;
        margin-top: 0
    }

    .chat {
        display: none
    }

    .amout-bet-btn {
        width: 13%
    }

    .amout-bet-btn:nth-child(7) {
        display: inline-block
    }

    .amout-bet-btn:nth-child(6) {
        display: inline-block
    }

    .main-content {
        flex-wrap: wrap
    }

    .left-side {
        width: 100%;
        margin: 0 auto
    }

    .right-side {
        width: 100%;
        margin: 0 auto
    }

    .mine {
        width: 75px;
        height: 75px
    }

}
@media screen and (max-width: 557px) {


    .minefield {
        width: 270px;
        height: 270px;

   
        
    }

    .mine {
        width: 50px;
        height: 50px;
       
    }

    .minefield .fa-bomb {
        font-size: 25px
    }

    .amount-bomb {
        width: 100%
    }


}
@media screen and (max-width: 360px) {


    .minefield {
        width: 260px;
        height: 260px;

   
        
    }

    .mine {
        width: 50px;
        height: 50px;
       
    }

    .minefield .fa-bomb {
        font-size: 25px
    }

    .amount-bomb {
        width: 100%
    }


}
@media screen and (max-width: 330px) {


    .minefield {
        width: 260px;
        height: 260px;
        margin-left: -10px;
   
        
    }

    .mine {
        width: 50px;
        height: 50px;
       
    }

    .minefield .fa-bomb {
        font-size: 25px
    }

    .amount-bomb {
        width: 100%
    }


}

.f-24 {
  
  font-size: 24px;
}
.diamond-mine {
  background: #42b477;
}
.bomb-mine {
  background: #8f3947;
}
@media screen and (max-width: 799px) {
  .minefield {
    
  }
}
.mine:hover.bomb-mine {
  background: #8f3947;
}
.mine:hover.diamond-mine {
   background: #42b477;
}
.nk-4 {
  opacity: .4;
}