
/*--------------------------------------------
    // Step
--------------------------------------------*/
.advanced_addons_step  .circle .dot {
    background: #ffffff;
    color: #898989;
    height: 50px;
    width: 50px;
    display: inline-flex;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    border: 4px solid #f2f2f2;
    cursor: pointer;
}

.advanced_addons_step  .circle span:not(.dot) {
    color: #727272;
    font-size: 18px;
}

.advanced_addons_step.type-1  .circle:not(:last-child) {
    margin-right: 240px;
}

.advanced_addons_step  .circle .dot::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 4px;
    background: #2f2f2f;
}

.advanced_addons_step  .circle .dot::before,.advanced_addons_step  .circle .dot::after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 4px;
    background: #f2f2f2;
    width: 145px;
}

.advanced_addons_step  .circle:last-child .dot::after,.advanced_addons_step  .circle:first-child .dot::before {
    display: none;
}

.advanced_addons_step  .circle.done .dot::after,
.advanced_addons_step  .circle.done .dot::before {
    background: #2f2f2f;
}

.advanced_addons_step  .circle.done .dot {
    background: #2f2f2f;
    border-color: #2f2f2f;
    color: #ffffff;
}
.advanced_addons_step.type-1  .circle .dot{
    margin-bottom: 5px;
}
.advanced_addons_step.type-2 .steps-data,
.advanced_addons_step.type-1 .steps-data{
    height: 400px;
    
}
.advanced_addons_step .steps-data{
    display: none !important;
}
.advanced_addons_step .steps-data.active_tab{
    display: flex !important;
}
.advanced_addons_step.type-1 .steps-data p{
    font-size: 20px;
}


.advanced_addons_step.type-1 .advanced_block_step_content {
    border: 1px solid #f2f2f2;
    border-radius: 6px;
}

.advanced_addons_step.type-1 .advanced_addons_btn {
    background: #f9f9f9;
    border-color: #f2f2f2;
    color: #2f2f2f;
    text-transform: capitalize;
    transition: all .30s linear;
}

.advanced_addons_step.type-1 .advanced_addons_btn:hover {
    background: #2f2f2f;
    color: #ffffff;
    border-color: #2f2f2f;
}

/*.advanced_addons_step.type-1 .arrows .advanced_addons_btn.prev {
    margin-right: 30px;
}*/
/*step-2*/
.advanced_addons_step.type-2 .circle {
    background: #ffffff;
    line-height: 71px;
    transition: all .20s linear;
}

.advanced_addons_step.type-2 .circle .dot {
    height: inherit;
    width: inherit;
    background: transparent;
    border: none;
    color: #c7c7c7;
    z-index: 25;
    padding: 0 10px;
}

.advanced_addons_step.type-2 .circle span
 + span {
    padding: 0 30px;
}

.bg-f5f9fb {
    background: #f5f9fb;
}

.advanced_addons_step.type-2 .circle.done.dot::after {
    border-left: 40px solid #ffffff;
    border-top: 36px solid transparent;
    border-bottom: 36px solid transparent;
    background: transparent;
    top: 0;
    left: 0;
    z-index: -1;

}

.advanced_addons_step.type-2 .circle.done {
    background: #00d1b2;
}

.advanced_addons_step.type-2 .circle .dot::before {
    content: "";
    display: block;
    border-left: 40px solid #ffffff;
    border-top: 37px solid transparent;
    border-bottom: 37px solid transparent;
    top: 0px;
    left: 0px;
    z-index: -1;
    background: transparent !important;
    transition: all .20s linear;
}

.advanced_addons_step.type-2 .circle.done + .circle .dot::after, .advanced_addons_step.type-2 .circle.done + .circle .dot::before {
    border-left: 40px solid #00cbad;
}

.advanced_addons_step.type-2 .circle.done.dot::before {
    border-left: 40px solid #ffffff;
}

.advanced_addons_step.type-2 .circle.done
 span + span {
    color: #053830;
}

.advanced_addons_step.type-2 .circle.done
 + .circle {}

.advanced_addons_step.type-2 .circle.done + span .dot {
    color: #ffffff;
}

.advanced_addons_step.type-2 .circle.done  .dot::before,.advanced_addons_step.type-2 .circle.done  .dot::after {
    border-left-color: #ffffff !important;
    left: 0;
    background: transparent;
}

.advanced_addons_step.type-2 .circle .dot::after {
    content: "";
    display: block;
    border-left: 40px solid #dde8ee;
    border-top: 37px solid transparent;
    border-bottom: 37px solid transparent;
    top: 0px;
    left: 1px;
    z-index: -2;
    background: transparent !important;
    transition: all .20s linear;
}

.advanced_addons_step.type-2 .circle.done  .dot {
    color: #00d1b2 !important;
}
.advanced_addons_step.type-2 .arrows .advanced_addons_btn{
    color: #2f2f2f;
}
.advanced_addons_step.type-2 .arrows .advanced_addons_btn:hover{
    background-color: #00d1b2 !important;
    color: #fff;
}
