/* convert to lead menu */

.convert-to-lead-menu .header-popup{
    padding: .5em 0;
}
    
.convert-to-lead-menu .header-popup .title{
    font-size: 1.5em;
}
    
.convert-to-lead-menu .main{
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    gap: 1.2em;
}
    
.convert-to-lead-menu .main .title-wrapper{
    text-align: center;
}
    
.convert-to-lead-menu .main .subtitle{
    color: grey;
    font-size: 1.1em;
}
    
.convert-to-lead-menu .content-popup{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* states popup */

/*
.convert-to-lead-menu .selector{
    display: block;
}

.convert-to-lead-menu.step2 .selector{
    display: none;
}

.convert-to-lead-menu .income-percentage{
    display: none;
}

.convert-to-lead-menu.step2 .income-percentage{
    display: block;
}
*/


/* selector */

.convert-to-lead-menu .selector{
    display: flex;
    flex-direction: column;
    gap: .5em;
}



/* income charts */

.content-popup .income-selection{
    padding-top: .5em;
}

.content-popup .income-charts-wrapper{
     display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: .5em;
}

.content-popup .income-charts-wrapper li{
    margin: 0;
    cursor: pointer;
}

.content-popup .income-charts-wrapper li .circle-percentage{
    --color: grey;
    transition: all .5s ease;
   animation: none;
    opacity: .7;
}

.content-popup .income-charts-wrapper li .circle-percentage .percentage-chart-stroke{
    animation: none;
}

.content-popup .income-charts-wrapper li:hover .circle-percentage, .content-popup .income-charts-wrapper li.selected .circle-percentage {
    transform: scale(1.1);
}

.content-popup .income-charts-wrapper li:hover .circle-percentage .percentage-chart-stroke, .content-popup .income-charts-wrapper li.selected .circle-percentage .percentage-chart-stroke {
    animation: progress 1.5s ease-out forwards;
}

/* circle variations */
.content-popup .income-charts-wrapper li:hover .circle-percentage.circle-1, .content-popup .income-charts-wrapper li.selected .circle-percentage.circle-1{
    --color: #ff2727;
}

.content-popup .income-charts-wrapper li:hover .circle-percentage.circle-2, .content-popup .income-charts-wrapper li.selected .circle-percentage.circle-2{
    --color: #f78c48;
}

.content-popup .income-charts-wrapper li:hover .circle-percentage.circle-3, .content-popup .income-charts-wrapper li.selected .circle-percentage.circle-3{
    --color: #8bc34a;
}

.content-popup .income-charts-wrapper li:hover .circle-percentage.circle-4, .content-popup .income-charts-wrapper li.selected .circle-percentage.circle-4{
    --color: #25b725;
}

 
 
/* button section*/

.convert-to-lead-menu .button-container{
    display: flex;
    justify-content: space-evenly;
    text-align: center;
}
    
.convert-to-lead-menu .button-container button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: .5em;
}