@import "custom-variables/variables";
@import "../../bootstrap-4.0.0/scss/functions";
@import "../../bootstrap-4.0.0/scss/variables";
@import "../../bootstrap-4.0.0/scss/mixins";
.asset-allocation{
    h5.sub-title{
        font-size: rem(24);
    }
    .riskcapacity{
        @include media-breakpoint-up(lg){
            border-right:#a5c8c9 1px solid;
            html[dir="rtl"] &{
                    border-left:#a5c8c9 1px solid;
                    border-right: 0;
                }
        }
    }
}
.graph{
     @include media-breakpoint-up(lg){
        bottom:-24px;
    }
    @include media-breakpoint-down(xs){
        left:-10px;
    }
    a{
        span{
            width: 47px;
            height: 47px;
            z-index: 1;
            &:before{
                content: "";
                width: 35px;
                height: 35px;
                position: absolute;
                left: 50%;
                margin: -17.5px;
                top: 50%;
                background: #fff;
                box-shadow: 2px 1px 2px 2px rgba(0,0,0,0.1);
                border-radius: 50%;
                transition: all ease .5s;
            }
            &:after{
                content: "";
                border-right:#fff 3px solid;
                border-top:#fff 3px solid;
                width: 18px;height: 10px;
                margin: -7px -9px;
                transform: rotate(132deg);
                position: absolute;
                left: 50%;
                top: 50%;
                transition: all ease .5s;
                opacity: 0;
            }
        }
        &.active{
            span{
                &:before{
                    background: $primary;
                }
                &:after{
                    opacity: 1;
                }
            }
        }
        &.low{
            span{background: #a08ccc;}
        }
        &.moderate{
            span{background: #d88ebc;}
        }
        &.high{
            span{background: #94badd;}
        }
        &.exhigh{
            span{background: #8edbd5;}
        }
    }
    .col{
        max-width: 25%;
        font-size: rem(16);
        &:after,&:before{
            content: "";
            position: absolute;
            height: 7px;
            @include media-breakpoint-up(lg){
                top: 47px;
            }
            @include media-breakpoint-down(sm){
                top: 42px;
            }
            @include media-breakpoint-only(md){
                top: 44px;
            }
        }
        &:after{
            left: 64%;
            width: 37%;
               html[dir="rtl"] &{
                 right:  64%;
                 left: inherit;
                     transform: rotate(-180deg);
               }
            @include media-breakpoint-only(md){
                left: 59%;
                width: 42%;
                html[dir="rtl"] &{
                 right:  59%;
                 left: inherit;
               }
            }
        }
        &:before{
            left:0;
            width:35%;
              html[dir="rtl"] &{
                 right: 0;
                 left: inherit;
                     transform: rotate(180deg);
               }
            @include media-breakpoint-only(md){
                width: 42%;
            }
        }
    }
    .one{
        &:after{
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9e8aca+0,b38cc6+100 */
            background: #9e8aca; /* Old browsers */
            background: -moz-linear-gradient(left,  #9e8aca 0%, #b38cc6 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  #9e8aca 0%,#b38cc6 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  #9e8aca 0%,#b38cc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e8aca', endColorstr='#b38cc6',GradientType=1 ); /* IE6-9 */
        }

    }
    .two{
        &:before{
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b38cc6+0,d88ebc+100 */
            background: #b38cc6; /* Old browsers */
            background: -moz-linear-gradient(left,  #b38cc6 0%, #d88ebc 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  #b38cc6 0%,#d88ebc 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  #b38cc6 0%,#d88ebc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b38cc6', endColorstr='#d88ebc',GradientType=1 ); /* IE6-9 */
        }
    }
    .two{
        &:after{
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d88ebc+0,bfa0c9+100 */
            background: #d88ebc; /* Old browsers */
            background: -moz-linear-gradient(left,  #d88ebc 0%, #bfa0c9 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  #d88ebc 0%,#bfa0c9 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  #d88ebc 0%,#bfa0c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d88ebc', endColorstr='#bfa0c9',GradientType=1 ); /* IE6-9 */

        }
    }
    .three{
        &:before{
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bfa0c9+0,94badd+100 */
            background: #bfa0c9; /* Old browsers */
            background: -moz-linear-gradient(left,  #bfa0c9 0%, #94badd 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  #bfa0c9 0%,#94badd 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  #bfa0c9 0%,#94badd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfa0c9', endColorstr='#94badd',GradientType=1 ); /* IE6-9 */

        }
    }
    .three{
        &:after{
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#94badd+0,8dd0dd+100 */
            background: #94badd; /* Old browsers */
            background: -moz-linear-gradient(left,  #94badd 0%, #8dd0dd 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  #94badd 0%,#8dd0dd 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  #94badd 0%,#8dd0dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94badd', endColorstr='#8dd0dd',GradientType=1 ); /* IE6-9 */
        }
    }
    .four{
        &:before{
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8dd0dd+0,8edbd5+100 */
            background: #8dd0dd; /* Old browsers */
            background: -moz-linear-gradient(left,  #8dd0dd 0%, #8edbd5 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  #8dd0dd 0%,#8edbd5 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  #8dd0dd 0%,#8edbd5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dd0dd', endColorstr='#8edbd5',GradientType=1 ); /* IE6-9 */


        }
    }
}
.assetcalc {
    max-width: 648px;
    .border-bottom{
        margin: 0 -15px;
        border-width: 2px!important;
        display: block;
         @include media-breakpoint-up(lg){
            &.first{
                margin-left:-30px;
            }
            &.last{
                margin-right:-30px;
            }
         }
    }
    label{
        padding-top: 8px;
        margin: 0 -15px;
        line-height: 1;
    }
    .col{
        max-width: 20%;
    }
    @include media-breakpoint-down(sm){
        .row{
            margin: 0 -5px;
            .col{
                padding: 0 5px;
            }
        }
        label{
            margin: 0 -5px;
            font-size: rem(16);
        }
    }
    
}

        
.graph-bottom {
    height: 256px;
    background: #f9f9f9;
    margin-top: 64px;
    &:before{
        content: "";
        top:-64px;
        left:0;
        width: 100%;
        height: 64px;
        position: absolute;
        background: #f9f9f9;
        border-radius: 500px 500px 0 0;
    }
//    [class*=" per_"],[class^=per_]{
//        transition-delay: 5s;
//        transition: height ease 2s;
//    }
}
.graph-inner {
    bottom: 0;
    width: 100%;
    border-radius: 500px 500px 0 0;
    padding-bottom: 64px;
    height: 0;
    &:after{
        content: "";
        width: 35px;
        height: 35px;
        position: absolute;
        left: 50%;
        margin: 0 -17.5px;
        top: 20px;
        background: #fff;
        box-shadow: 2px 1px 2px 2px rgba(0,0,0,0.1);
        border-radius: 50%;
        transition: all ease .5s;
    }
    &.one{
        background: #a08ccc;
    }
    &.two{
        background: #d88ebc;
    }
    &.three{
        background: #94badd;
    }
    &.four{
        background: #8edbd5;
    }
    &.five{
        background: #f7c78b;
    }
}
.helptext{
    @include media-breakpoint-up(lg){
        position: absolute;
    }
}