//border radius
.border-radius(@props){
    -webkit-border-radius: @props;
    -moz-border-radius: @props;
    border-radius: @props;
}

//border top left/right radius
.border-top-lr-radius(@radius){
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-top-left-radius: @radius;
    -moz-border-top-right-radius: @radius;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
}

//border bottom left/right radius
.border-bottom-lr-radius(@radius){
    -webkit-border-bottom-left-radius: @radius;
    -webkit-border-bottom-right-radius: @radius;
    -moz-border-bottom-left-radius: @radius;
    -moz-border-bottom-right-radius: @radius;
    border-bottom-left-radius: @radius;
    border-bottom-right-radius: @radius;
}

//inner shadow
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @color, @alpha:1){
    -webkit-box-shadow: inset @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
    -moz-box-shadow: inset @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
    box-shadow: inset @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
}

//box shadow
.box-shadow(@horizontal:0, @vertical:1px, @blur:2px, @color, @alpha:1){
    -webkit-box-shadow: @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
    -moz-box-shadow: @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
    box-shadow: @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
}

//text shadow
.text-shadow(@horizontal:0, @vertical:1px, @blur:2px, @color, @alpha:1){
    -webkit-text-shadow: @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
    -moz-text-shadow: @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
    text-shadow: @horizontal @vertical @blur rgba(red(@color), green(@color), blue(@color), @alpha);
}

//opacity
.opacity(@opacity: 0.5) {
    -moz-opacity: @opacity;
    -khtml-opacity: @opacity;
    -webkit-opacity: @opacity;
    opacity: @opacity;
    @opperc: @opacity * 100;
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
    filter: ~"alpha(opacity=@{opperc})";
}

//transition effect
.transition(@duration:0.2s, @ease:ease-out) {
  -webkit-transition: all @duration @ease;
  -moz-transition: all @duration @ease;
  -o-transition: all @duration @ease;
  transition: all @duration @ease;
}


.freerounds-notification-color{
    color: limegreen;
}

.freerounds-notification{    
    background-color: limegreen;
    border-radius: 30px;
    width: 10px;
    height: 10px;
    position: absolute;
    margin-left: -5px;
    border: 1px solid white;    
    &.after-profile-icon{
        margin-left: -10px;
        top: 29%;
    }
}

.freerounds-container{
    .bonus-his-data-container{        
        border-top: 0;
        margin: 0;
        width: 100%;
        .bonus-his-data-third{        
            padding: 0px 15px 15px;
        }
    }
    .bonus-his-name{
        
    }    
    .slots-container{
        padding: 0;
    }
    .bonus-game-container ul.games-list li{
        width: 150px !important;
        margin: 0px 10px 10px 0px !important;
    }
    .bonus-game-container ul.games-list li .play:after{
        top: 24px;
        font-size: 43px;
        width: 43px;
        height: 43px;
    }
    .bonus-game-container ul.games-list li .game-title{
        font-size: 12px;
    }
    .fslots-container{
        margin: 15px 15px 0;
        .fgames-list{
            list-style: none;
            li{
                position: relative;
                display: inline-block;
                vertical-align: top;
                width: 150px;
                height: 100px;
                margin: 0px 16px 16px 0px;
                background: white;
                -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
                -webkit-transition: all 0.2s ease-out;
                -moz-transition: all 0.2s ease-out;
                -o-transition: all 0.2s ease-out;
                transition: all 0.2s ease-out;
                .fgame-container{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    right: 0px;
                    margin: 0px auto;
                    overflow: hidden;
                    .fgameImage{
                        position: relative;
                        width: 100%;
                        height: auto;
                        vertical-align: bottom;
                        margin: 0px auto;
                        -webkit-border-radius: 3px;
                        -moz-border-radius: 3px;
                        border-radius: 3px;
                        -webkit-transform: translateZ(0);
                        -moz-transform: translateZ(0);
                        -ms-transform: translateZ(0);
                        -o-transform: translateZ(0);
                        transform: translateZ(0);
                    }
                    .fgame-title{
                        position: absolute;
                        bottom: 5px;
                        left: -175px;
                        font-size: 15px;
                        position: absolute;
                        margin: 0px 0px 0px 0px;
                        width: 90%;
                        color: white;
                        font-size: 12px;                                                
                        padding: 2px 5px;
                        text-align: left;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-transition: all 0.2s ease-out;
                        -moz-transition: all 0.2s ease-out;
                        -o-transition: all 0.2s ease-out;
                        transition: all 0.2s ease-out;
                    }
                    .play{
                        position: absolute;
                        display: inline-block;
                        background: rgba(0, 0, 0, 0.6);
                        width: 100%;
                        height: 100%;
                        top: 0px;
                        left: 0px;
                        transform-origin: center center;
                        -webkit-transform-origin: center center;
                        -moz-transform-origin: center center;
                        -ms-transform-origin: center center;
                        -o-transform-origin: center center;
                        transform: scale(0);
                        -webkit-transform: scale(0);
                        -moz-transform: scale(0);
                        -ms-transform: scale(0);
                        -o-transform: scale(0);
                        -webkit-transition: all 0.2s ease-out;
                        -moz-transition: all 0.2s ease-out;
                        -o-transition: all 0.2s ease-out;
                        transition: all 0.2s ease-out;
                    }
                    .play:after {
                        position: absolute;
                        content: '\f35e';
                        font-family: 'MaterialFont';
                        color: rgba(255, 255, 255, 0.8);
                        left: 0px;
                        right: 0px;
                        margin: 0px auto;
                        top: 15px;
                        font-size: 53px;
                        width: 46px;
                        height: 53px;
                        cursor: pointer;
                        -webkit-transition: all 0.2s ease-out;
                        -moz-transition: all 0.2s ease-out;
                        -o-transition: all 0.2s ease-out;
                        transition: all 0.2s ease-out;
                    }
                } 
                &:hover{
                    .play {
                        transform: scale(1);
                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -ms-transform: scale(1);
                        -o-transform: scale(1);
                    }
                    .fgame-title {
                        left: 5px;
                    }
                }           
            }
        }        
    }
}