.one-time-bonus{
    width: 100%;
    padding: 18px 24px;
    margin-bottom: 12px;
    border-radius: 15px;
    background: var(--background-navbar);
    display: flex;
    justify-content: space-between;
}

.one-time-bonus .left-content{
    display: flex;
    align-items: center;
}

.one-time-bonus .left-content .img{
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.one-time-bonus .left-content .img svg{
    width: 22px;
}

.one-time-bonus.vk .left-content .img{
    background: rgba(25, 130, 255, 0.1);  
}

.one-time-bonus.vk .left-content .img svg path{
    fill: #1982FF;
}

.one-time-bonus.telegram .left-content .img svg path{
    fill: #279FDA;
}

.one-time-bonus.telegram .left-content .img{
  background: rgba(39, 159, 218, 0.1);
}    

.one-time-bonus .left-content .title span{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    display: inline-block;
}

.one-time-bonus .left-content .title{
    margin-left: 24px;
}

.one-time-bonus.vk .left-content .title span a{
    color: #1982FF;
    font-weight: 600;
} 

.one-time-bonus.telegram .left-content .title span a{
    color: #279FDA;
    font-weight: 600;
}

.one-time-bonus .left-content .title p{
    font-size: 14px;
    font-weight: 500;
    color: #dadada;
}

.one-time-bonus .btn-get{
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 42px;
    border-radius: 15px;
    cursor: pointer;
}

.one-time-bonus.vk .btn-get{
    background: rgba(25, 130, 255, 0.1);    
}

.one-time-bonus.vk .btn-get span{
    color: #1982FF;
}

.one-time-bonus.telegram .btn-get span{
    color: #279FDA;
}

.one-time-bonus.telegram .btn-get{ 
    background: rgba(39, 159, 218, 0.1);
    color: #279FDA;
    font-size: 14px;
    font-weight: 500;
}

.bonus-promo-wrapp{
    background: var(--background-navbar);
    border-radius: 15px;
    padding: 18px 24px;
    width: calc(100% - 24px);
    margin-right: 24px;
}

.bonus-promo-header{
    display: flex;
    align-items: center;
}

.bonus-promo-header .img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: var(--main-color-10);
    border-radius: 15px;
    margin-right: 24px;
}

.bonus-promo-header .img img{
    width: 22px;
}

.bonus-promo-header .title span{
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;  
    display: inline-block;  
}

.bonus-promo-header .title p{
    font-size: 14px;
    font-weight: 500;
    color: #dadada;    
}

.bonus-promo-form{
    display: flex;
    margin-top: 24px;
}

.bonus-promo-form .btn-promo-wrapp button{
    padding: 18px 24px;
    background: var(--main-color);
    border-radius: 15px;
    border: none;
    outline: none;
    color: var(--background);
    font-size: 14px;
    font-weight: 500;
    margin-left: 24px;
}

.bonus-promo-form .input-promo-wrapp{
    width: 100%;
}

.section{
    padding-left: 20px;
}

.bonus-promo-form .input-promo-wrapp input{
    background: var(--background);
    font-size: 14px;
    color: #dadada;
    padding: 18px 24px;
    border-radius: 15px;
    width: 100%;
    border:none;
    outline: none;
}

.ref-bonus-wrapp{
    max-width: 675px;
    width: 100%;
    padding: 18px 24px;
    border-radius: 15px;
    background: linear-gradient(90deg, #FDD97D 0%, #FFA573 102.61%);
    position: relative;
}

.ref-bonus-wrapp::after{
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -20px;
    background-position: center top;
    pointer-events: none;
    top: calc(50% - 168px);
    background-image: url("/img/justIcons.png");
}

.section-bonus{
    display: flex;
}

.ref-bonus-header{
    display: flex;
    align-items: center;
}

.ref-bonus-header p {
    padding: 6px 12px;
    background: var(--background);
    border-radius: 15px;
    font-size: 13px;
    color: var(--main-color);
    font-weight: 300;
}

.ref-bonus-header span {
    color: var(--background);
    font-size: 16px;
    margin-left: 12px;
    font-weight: 700;
}

.ref-bonus-content{
    width: 60%;
    font-size: 14px;
    font-weight: 500;
    color: var(--background);
    opacity: 0.5;
    margin-top: 12px;
}

.link-to-page {
    display: flex;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    align-items: center;
    cursor: pointer;
    color: var(--background);
}

.link-to-page span{
    display: inherit;
    height: 15px;
    margin-left: 12px;
    transition: .3s ease-in-out;
}

.link-to-page span img{
    height: 100%;
}

.link-to-page p {
    position: relative;
}

.link-to-page p::before{
    content: "";
    position: absolute;
    width: 25%;
    height: 2px;
    border-radius: 15px;
    left: 0;
    pointer-events: none;
    bottom: -4px; 
    background: var(--background);
    transition: .3s ease-in-out;
}

.link-to-page:hover p::before{
    width: 100%;
}