﻿




.pnl_advice .adTitle {
    padding: 10px 1px;
    font-size: 17px;
}

.pnl_advice img.imgAdv {
    border-radius: 36px;
    min-height: 624px;
}

.pnl_advice .step.completed {
    background-color: var(--ColorBadge);
}

.pnl_advice .step {
    background-color: #f9f9f9;
    border: 2px solid var(--ColorBadge);
    border-radius: 10px;
    display: flex;
    height: 20px;
    position: relative;
    width: 20px;
    z-index: 1
}

.modal-steps {
    display: flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: space-between;
    margin-bottom: 15px;
    max-width: 100%;
    position: relative;
    width: 330px
}

.pnl_advice .step:after {
    width: 0%;
    left: 0;
    -webkit-transition: .2s linear;
    -o-transition: .2s linear;
    transition: .2s linear
}

.pnl_advice .step:after {
    width: 100% !important;
    left: unset;
    right: unset;
    -webkit-transform: translateX(51%);
    -ms-transform: translateX(51%);
    transform: translateX(51%)
}

.pnl_advice .step:after {
    -webkit-transition: .2s linear;
    -o-transition: .2s linear;
    transition: .2s linear
}

.pnl_advice .step:last-child:after {
    display: none
}

.modal-steps:before {
    position: absolute;
    border: 1px solid var(--ColorBadge);
    content: "";
    display: block;
    height: 2px;
    top: 9px;
    width: 100%;
    z-index: 0
}

.pnl_advice .completed .dot {
    background-color: var(--ColorBadge);
}

.pnl_advice .dot {
    height: 20px;
    width: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    position: relative;
    top: .125em;
    z-index: 2;
    border: 3px solid var(--ColorBadge);
    background-color: #f9f9f9;
}

    .pnl_advice .dot:after {
        contain: '-';
    }

.radiobtn {
    position: absolute;
    top: 0;
    right: 0;
    height: 26px;
    width: 26px;
    background-color: #eee;
    border-radius: 50%;
    border: 1px solid silver;
}

.checkcontainer:hover input ~ .radiobtn {
    background-color: #ccc
}

.pnl_advice input:checked ~ .radiobtn {
    background-color: var(--ColorBadge)
}

.radiobtn:after {
    content: "";
    position: absolute;
    display: none
}

.checkcontainer input:checked ~ .radiobtn:after {
    display: block
}

.checkcontainer .radiobtn:after {
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff
}

.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.checkcontainer {
    display: block;
    position: relative;
    padding-right: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.qSex {
    border: 0;
    background-color: #f9f9f9;
    display: inline-block
}

    .qSex.active img {
        border-color: var(--basecolor)
    }

    .qSex img {
        border: 2px solid #898a8c;
        border-radius: 32px
    }

.steps {
    min-height: 344px;
    width: 100%;
    padding: 30px
}

.pnl_advice .btns .btn {
    float: left;
    margin: 5px
}

.pnl_advice .steps button {
    border: 0;
    background: none;
}

.pnl_advice button img {
    width: 97px;
    border-radius: 17px;
    border: 2px solid gray;
}

.pnl_advice img, .pnl_advice img {
    margin-bottom: 19px;
}

.pnl_advice button.active img, .pnl_advice button.active img {
    border: 4px solid var(--LogoOrgColor);
    
}


.checkboxbtn {
    position: absolute;
    top: 0;
    right: 0;
    height: 26px;
    width: 26px;
    background-color: #eee;
    border-radius: 50%;
    border: 1px solid silver;
}

.checkcontainer:hover input ~ .checkboxbtn {
    background-color: #ccc
}

.pnl_advice input:checked ~ .checkboxbtn {
    background-color: var(--ColorBadge)
}

.checkboxbtn:after {
    content: "\2713";
    position: absolute;
    display: none;
    font-size: 22px;
}

.checkcontainer input:checked ~ .checkboxbtn:after {
    display: block
}

.checkcontainer .checkboxbtn:after {
    top: -1px;
    left: 11px;
    width: 11px;
    height: 8px;
    border-radius: 50%;
    /* background: #fff; */
    color: white;
}




/*Steps*/

.steps {
    display: none;
}

    .steps.active {
        display: inline-block;
    }
/*End Steps*/
