.notification{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 40%;
    height: 40%;
    transform: translate(-50%, -50%);
    background: url(../img/popup_bg.png);
    font-size: 20px;
    background-size: 100% 100%;
}

.notification__close{
    position: fixed;
    top: 10%;
    right: 4%;
    width: 8%;    
    background: url(../img/btn_close.png);
    background-size: cover;
    border: none;
    z-index: 100;
}
.notification__close:hover{
    transform: scale(1.1);
}
.notification__text, .notification__title{
    padding-top: 10%;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 35px;
}

.notification_bonus{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 40%;    
    transform: translate(-50%, -50%);
    background: url(../img/popup_bg.png);    
    background-size: 100% 100%;
}



.bonus_wintype{
    width: 100%;
    top: 20%;
    position: relative;
}

.bonus_win{
    width: 100%;
    height: 14%;
    background:url(../img/input_back.png);    
    background-size: cover;    
    position: relative;
    top: 35%;
}

@font-face {
    font-family: BonusValue;
    src: url('/frontend/Default/fonts/_src/PatuaOne-Regular.ttf');
    font-style: normal;
}

.popup_message
{
    text-align: center;
    -webkit-text-stroke: 2px #f1ae09;
    -webkit-text-fill-color: #f9d741;
    font-size: 4vh;
    font-family: BonusValue;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.bonus_balance
{
    text-align: center;
    -webkit-text-stroke: 3px #0054b8;
    -webkit-text-fill-color: white;
    font-size: 8vh;
    font-family: BonusValue;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.popup-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
}

@media (orientation: portrait) {
    .notification_bonus{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 80%;    
        transform: translate(-50%, -50%);
        background: url(../img/popup_bg.png);    
        background-size: 100% 100%;
    }

    .bonus_balance{
        font-size: 4vh;
    }

}