.svg-container{
    float:left;
}
.svg-container .title{
    padding-left:51px;
}
svg#svgpiechart{
    padding:0px 50px 50px 0px; 
    overflow: visible;
}
.piechart-module{
    position:relative;
}

.piesteps-container{
    float: right;
    width:36%;
}
.piecontentbox{
    width:431px;
    background:#ffffff;
    border: solid 1px #d2d2d2;
    padding-left: 34px;
    padding-right: 20px;
    padding-top:33px;
    padding-bottom: 25px;
    position: relative;
}
.piecontentbox.havefinalize{
    padding-top:54px;
}
.piecontentGenbox{
    width:431px;
    background:#ffffff;
    border: solid 1px #d2d2d2;
    padding-left: 34px;
    padding-right: 20px;
    padding-top:26px;
    padding-bottom: 25px;
    
    font-family: 'Avenir Next LT Pro';
    font-size: 16px;
    line-height: 1.63;
    color: #535658;
}
.piecontentGenbox h3.piecontentGenbox-title {
    float: left;
    width: 57%;
    font-size: 22px;
    line-height: 30px;
}
.piecontentGenbox-image {
    float: right;
    width: 43%;
    text-align: right;
}
.piecontentGenbox-image img{
    max-width: 158px;
}
.piecontentGenbox p{
    margin-bottom:20px;
}
.piecontentGenbox h3{
    font-family: 'Montserrat';
    font-size: 18px;
    line-height: 18px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #00548f;
    text-transform: uppercase;
    display:inline-block;
    padding-top: 18px;
    margin-bottom: 25px;
}
.piecontentGenbox table{
    margin-bottom:0px;
}
.piecontentGenbox table td:first-child{
    width:26px;
    text-align: center;
    vertical-align: top;
    padding-left:0px;
}
.piecontentGenbox table td{
    padding-left: 13px;
    vertical-align: top;
    padding-bottom: 25px;
}
.piecontentGenbox table tr:last-child td{
    padding-bottom: 0px;
}
.piecontentbox .steps{
    margin-bottom:5px;
}
.piecontentGenbox.hide,
.piecontentbox.hide{
    display: none;
}
.steps-category-header{
    margin-bottom: 18px;
}
.steps-category-header span{
    font-family: 'Montserrat';
    font-size: 18px;
    line-height: 18px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #00548f;
    text-transform: uppercase;
    display:inline-block;
    padding-top: 9px;
}
.steps-category-header:after{
    content:"";
    clear:both;
    display:table;
    float: none;
}
.piecontentbox .selectallitems{
    display:block;
    border: solid 1px #d3d3d3;
    background-color: #fcfcfc;
    font-family: Montserrat;
    font-size: 14px;
    line-height: 14px;
    font-weight: 800;
    color: #52585a;
    opacity: 0.71;
    text-transform: uppercase;
    text-decoration: none;
    padding:9px 11px 9px 11px;
}
.piecontentbox .selectallitems:hover{
    opacity: 1;
}
.steps-category-content{
    font-family: 'Avenir Next LT Pro';
    font-size: 16px;
    line-height: 1.63;
    color: #535658;
    border-bottom: solid 1px rgba(151,151,151,0.4);
    padding-bottom: 20px;
}
.steps-category-content.hide{
    display:none;
}
.piecontentbox .steps .step-title{
    font-family: 'Avenir Next LT Demi Pro';
    font-size: 16px;
    color: #535658;
    line-height: 1.75;
    position:relative;
    border-bottom: solid 1px rgba(151,151,151,0.4);
    padding: 10px 0px 10px 40px;
}
.piecontentbox .steps .step-desc{
    background: #ffffff;
    font-family: 'Avenir Next LT Pro';
    font-size: 16px;
    line-height: 1.63;
    color: #535658;
}
.piecontentbox .steps .step-desc p{
    margin:0px;
}
.piecontentbox .steps .step-desc{
    max-height: 0;
    overflow:hidden;
    transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
}
.piecontentbox .steps .step-desc.open{
    max-height: 500px;
    overflow:visible;
    transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    padding-top: 10px;
    padding-bottom: 10px;
}
.piecontentbox .steps .step-content:last-child .step-title{
    border-bottom: 0px;
}
.piecontentbox .steps .step-content:last-child .step-title.open{
    border-bottom: solid 1px rgba(151,151,151,0.4);
}
.piecontentbox .steps .checkbox{
    display:block;
    position:absolute;
    content:"";
    width: 26px;
    height: 26px;
    border-radius: 100%;
    border: solid 1.4px #00548f;
    background-color: #efefef;
    left:0px;
    outline:none;
    margin-top: 0;
}

.piecontentbox .steps .checkbox:hover{
    background-color: #e0e0e0;
}
.piecontentbox .steps .checkbox.active{
    background-color: #309321;
    background-image:url("../images/checkicon.svg");
    background-repeat: no-repeat;
    background-position: center;
    border-color: #309321;
}
.piecontentbox .steps .checkbox.disable{
    background-color: #bebebe;
    background-image:url("../images/checkicon.svg");
    background-repeat: no-repeat;
    background-position: center;
    border-color: #bebebe;
}
.piecontentbox .steps .stepitem-clap{
    font-family: 'Avenir Next LT Demi Pro';
    font-size: 16px;
    color: #535658;
    line-height: 1.75;
    text-decoration:none;
    outline:none;
    position: relative;
    padding-right: 35px;
    display:block;
}
.piecontentbox .steps .stepitem-clap:after{
    position: absolute;
    content:"";
    display:block;
    background:url(../images/info-icon.svg) no-repeat center;
    width: 20px;
    height: 20px;
    right:0px;
    top:0px;
}
.piecontentbox .steps .stepitem-clap.open{
    font-family: 'Avenir Next LT Pro';
    font-weight: bold;
    font-size: 16px;
    color: #155f93;
}
.step-pagination{
    margin-bottom:10px;
}
.step-pagination a{
    text-decoration:none;
    font-family: 'Montserrat';
    font-size: 14px;
    font-weight: 700;
    text-transform:uppercase;
    color:#00548f;
    opacity: 0.72;
    outline:none;
}
.step-pagination a:hover{
    opacity: 1;
    color:#00548f;
}
.step-pagination a.step-page-prev{
    float:left;
}
.step-pagination a.step-page-prev i{
    margin-right: 12px;
}
.step-pagination a.step-page-next{
    float:right; 
}
.step-pagination a.step-page-next i{
    margin-left: 12px;
}
.step-pagination:after{
    content:"";
    clear:both;
    float:none;
    display:table;
}
.step-page.hide{
    display:none;
}
.step-pagination a.hide{
    display:none;
}
.stepactions{
    margin-bottom:20px;
    display: none;
}
.stepactions.show{
    display:block;
}
.stepactions:after{
    content:"";
    clear:both;
    float:none;
    display:table;
}
.piecontentbox .topaction {
    position: absolute;
    min-width: 182px;
    right: 0px;
    top: 0px;
    padding-top: 35px;
    padding-right: 20px;
}
.piecontentbox.havefinalize .topaction {
    padding-top: 54px;
}
.piecontentbox .topaction .finiazeact{
    display:none;
    width:183px;
    position:absolute;
    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 700;
    color:#ffffff;
    text-decoration: none;
    padding:5px 8px 5px;
    background-color: #4c8906;
    text-transform: uppercase;
    right: 0px;
    top: 0px;
    text-align: center;
}
.piecontentbox .topaction .finiazeact.show{
    display:block;
}
.stepactions .finiazeact{
    display:block;
    width: 100%;
    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 700;
    color:#ffffff;
    text-decoration: none;
    padding:9px 15px 8px;
    box-shadow: 1px 1px 1px 1px #335a06;
    background-color: #4c8906;
    text-transform: uppercase;
    text-align: center;
    transition: 0.3s all ease-in;
    -webkit-transition: 0.3s all ease-in;
    -moz-transition: 0.3s all ease-in;
    -o-transition: 0.3s all ease-in;
}
.stepactions .finiazeact:hover{
    background-color:#3d6f03;
    transition: 0.3s all ease-in;
    -webkit-transition: 0.3s all ease-in;
    -moz-transition: 0.3s all ease-in;
    -o-transition: 0.3s all ease-in;
}
.stepactions .savetocart{
    display:block;
    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 700;
    color:#00548f;
    text-decoration: none;
    padding:9px 15px 8px 15px;
    background-color: #ffffff;
    text-transform: uppercase;
    margin-bottom:10px;
    text-align: center;
    border:2px solid #00548f;
    
    transition: 0.3s all ease-in;
    -webkit-transition: 0.3s all ease-in;
    -moz-transition: 0.3s all ease-in;
    -o-transition: 0.3s all ease-in;
}
.stepactions .savetocart:hover{
    background:#00548f;
    color:#ffffff;
    transition: 0.3s all ease-in;
    -webkit-transition: 0.3s all ease-in;
    -moz-transition: 0.3s all ease-in;
    -o-transition: 0.3s all ease-in;
}
.stepssavedmsg.success{
    padding:12px 20px 12px 21px;
    border: solid 2px #4c8906;
    background-color: #f3ffe6;
    font-family: 'Avenir Next LT Demi Pro';
    font-size: 15px;
    line-height: 1.67;
    color: #4c8906;
    margin-bottom:10px;
}
.diet-form{
    width:431px;
    background:#ffffff;
    border: solid 1px #d2d2d2;
    padding-left: 38px;
    padding-right: 28px;
    padding-top:33px;
    padding-bottom: 25px;
    display:none;
}

.steps-category-header .goback{
    display:block;
    float: right;
    border: solid 1px #d3d3d3;
    background-color: #fcfcfc;
    font-family: Montserrat;
    font-size: 15px;
    line-height: 15px;
    font-weight: 800;
    color: #52585a;
    text-transform: uppercase;
    text-decoration: none;
    padding:11px 24px 11px 45px;
    position:relative;
    opacity: 0.71;
}
.steps-category-header .goback:before{
    position:absolute;
    left:23px;
    content:"\f053";
    font-family:Font Awesome\ 5 Pro;
}
.steps-category-header .goback:hover{
    opacity: 1;
}
.steps-selected{
    border-bottom: solid 1px rgba(151,151,151,0.4);
}
.steps-selected-label{
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #52585a;
    text-transform: uppercase;
    margin-bottom:19px;
}
.diet-form .steps-category{
    margin-bottom: 28px;
}
.dietchart-formfield{
    margin-bottom:20px;
}
.firstname-field{
    width:48%;
    float:left;
}
.lastname-field{
    width:48%;
    float:right;
}
.dietchart-formfield label{
    display:block;
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #52585a;
    margin-bottom:6px;
}
.dietchart-formfield label span{
    font-family: 'Avenir Next LT Pro';
    font-size: 13px;
    opacity: 0.72;
    line-height: 2.23;
    color: #535658;
    font-weight: normal;
}
.dietchart-formfield > span{
    display:inline-block;
    text-align: center;
    margin-right: 18px;
    font-family: 'Avenir Next LT Pro';
    font-size: 14px;
    color:#535658;
}
.dietchart-formfield > span:last-child{
    margin-right: 0px;
}
.dietchart-formfield input[type="text"],
.dietchart-formfield input[type="email"],
.dietchart-formfield input[type="password"]{
    border: solid 1px #155e91;
    background-color: #efefef;
    padding:5px 11px 4px 11px;
    font-family: 'Avenir Next LT Pro';
    font-size: 14px;
    color:#535658;
    line-height: 2.07;
    border-radius: 0px;
    width:100%;
}

.dietchart-formfield input[type="text"].err,
.dietchart-formfield input[type="email"].err,
.dietchart-formfield input[type="password"].err{
    border: solid 1px #c5220c;
    background-color: #e1d8d8;
}

.dietchart-formfield.gender-field{
    float:left;
}
.dietchart-formfield.bdate-field{
    width:176px;
    float:right;
}
input[type="submit"].dietchart-submit{
    border: 1px solid #1ca3c9;
    background-color: #30bce3;
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 700;
    color:#ffffff;
    text-transform: uppercase;
    padding:12px 0px 11px;
    width:242px;
    text-align: center;
    cursor:pointer;
    margin:0px;
}
input[type="submit"].dietchart-submit:hover{
    background-image: none;
    background-color:#186e86;
}
input[type="submit"].dietchart-submit.disable{
    background-color:#9ea3a7;
}

.gender-field input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    display:none;
}
.gender-field span.d-radio{
    height: 23px;
    width: 23px;
    transition: all 0.15s ease-out 0s;
    background: #efefef;
    color: #fff;
    cursor: pointer;
    display: block;
    margin: 0px auto 13px auto;
    outline: none;
    position: relative;
    z-index: 1;
    border-radius: 50%;
    border: 1px solid #155e91;
}
.gender-field span.d-radio:after {
    border-radius: 50%;
}
.gender-field span.d-radio:hover {
    background: #155e91;
}
.gender-field span.d-radio.checked {
    background: #155e91;
}
.gender-field span.d-radio.checked:before {
    content:"";
    height: 20px;
    width: 20px;
    position: absolute;
    background-image: url("../images/checkicon.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    font-size: 12px;
    text-align: center;
    line-height: 23px;
    left: 0px;
    top: 0px;
}
.gender-field span.d-radio.checked:after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    background: #155e91;
    content: '';
    display: block;
    position: relative;
    z-index: 100;
}
.diet-form .user-data-use{
    font-family: 'Avenir Next LT Pro';
    font-size: 13px;
    opacity: 0.72;
    line-height: 15px;
    color: #535658;
    font-weight: normal;
    margin-bottom: 20px;
}
.dietchart-formresponse .success{
    padding:12px 20px 12px 21px;
    border: solid 2px #4c8906;
    background-color: #f3ffe6;
    font-family: 'Avenir Next LT Demi Pro';
    font-size: 15px;
    line-height: 1.67;
    color: #4c8906;
    margin-bottom:10px;
}
.dietchart-formresponse .error{
    padding:12px 20px 12px 21px;
    border: solid 2px #c5220c;
    background-color: #e1d8d8;
    font-family: 'Avenir Next LT Demi Pro';
    font-size: 15px;
    line-height: 1.67;
    color: #c5220c;
    margin-bottom:10px;
}
.dietchart-formresponse{
    margin-top: 20px;
    display: none;
}
.steps-selected-data{
    margin-bottom: 22px;
}
.steps-selected-data ul{
    margin:0px;
    list-style: none;
    padding:0px;
}
.steps-selected-data ul li.step-selected{
    font-family: 'Avenir Next LT Pro';
    font-size: 16px;
    line-height: 1.75;
    color: #535658;
    position:relative;
    padding-left:40px;
}
.steps-selected-data ul li.step-selected:before{
    content:"";
    width:18px;
    height:18px;
    background-color:#00548f;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    display:block;
    position: absolute;
    left:0px;
    top:5px;
}
.arc{
    cursor: pointer;
    transition:0.3s all ease-in;
    -webkit-transition:0.3s all ease-in;
    -moz-transition:0.3s all ease-in;
    -o-transition:0.3s all ease-in;
}
.arctext{
    cursor: pointer;
    transition:0.3s all ease-in;
    -webkit-transition:0.3s all ease-in;
    -moz-transition:0.3s all ease-in;
    -o-transition:0.3s all ease-in;
}
.arctext.inactive{
    fill:#bebebe;
}
.arc.inactive path.shape{
    fill:#bebebe;
}
a.phback-diet{
    text-decoration: none;
    font-family: 'Montserrat',sans-serif;
    font-size: 18px;
    line-height: 21px;
    font-weight: 700;
    display: inline-block;
    padding: 18px 37px 14px 37px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    
    border: 1px solid #1ca3c9;
    background-color: #30bce3;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position:relative;
}
a.phback-diet:hover{
    background-color: #186e86;
    background-image: none;
    border-color: #186e86;
}

#dietchart-loading{
    position: absolute;
    background:rgba(255,255,255,0.8);
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}

.spinner {
  width: 130px;
  position:absolute;
  height:130px;
  margin: auto;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  text-align: center;
}
.spinner .loading-icon{
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    background-color: transparent;
    border-radius: 0px;
    margin: 0px auto;
    position: absolute;
    top: 36px;
    left: -9px;
    right: 0;
}
.spinner .loading-icon2{
  background-image:url(../images/loading-ring-120px.svg);
  background-repeat: no-repeat;
  width: 130px;
  height: 130px;
  background-color: transparent;
  border-radius: 0px;
  margin: 0px auto 10px auto;
}
.spinner .loading-icon svg .st0{
    fill: #30BCE3
}
.pdownloadapp{
    font-family: 'Montserrat',sans-serif;
    font-size: 18px;
    line-height: 21px;
    font-weight: 700;
    display: inline-block;
    padding: 18px 37px 14px 37px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #30bce3;
    border: 1px solid #1ca3c9;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    margin-bottom: 40px;
}

@media screen and (min-width:1024px) and (max-width:1249px){
    .piechart-module{
        /*max-width: 967px;*/
        margin:0px auto;
    }
    .svg-container{
        width:55%;
    }
    .piesteps-container{
        width:45%;
    }
    svg#svgpiechart{
        width: 100%;
        height: 100%;
        padding:0px;
    }
    .piecontentGenbox{
        width:100%;
        max-width: 431px;
    }
    .piecontentbox{
        width:100%;
        max-width: 431px;
    }
    .diet-form{
        width:100%;
        max-width: 431px;
    }
    .svg-container .title{
        padding-left:0px;
        margin-bottom: 30px;
    }
    .sk-folding-cube{
        top:35%;
    }
}
@media screen and (min-width:768px) and (max-width:1023px){
    svg#svgpiechart{
        width: 100%;
        padding:0px;
        margin: 0px auto 20px auto;
    }
    .svg-container{
        padding-left:0px;
        float:none;
        width: 100%;
    }
    .piesteps-container{
        float:none;
        width: 100%;
    }
    .diet-form,
    .piecontentGenbox,
    .piecontentbox{
        margin:0px auto;
    }
    .svg-container .title{
        padding-left:0px;
    }
    .sk-folding-cube{
        top:30%;
    }
}
@media screen and (max-width:767px){
    svg#svgpiechart{
        width: 400px;
        height: 400px;
        padding:0px;
        display:block;
        margin: 0px auto;
    }
    .diet-form,
    .piecontentGenbox,
    .piecontentbox{
        width: 100%;
        max-width: 431px;
        margin: 0px auto;
    }
    .arctext{
        display:none;
    }
    .svg-container{
        padding-left:0px;
        float:none;
        width: 100%;
    }
    .piesteps-container{
        float:none;
        width: 100%;
    } 
    .svg-container .title{
        padding-left:0px;
    }
    .sk-folding-cube{
        top:25%;
    }
}
@media screen and (max-width:474px){
    svg#svgpiechart{
        width: 300px;
        height: 300px;
        padding:0px;
        display:block;
        margin: 0px auto;
    }
    .diet-form,
    .piecontentGenbox,
    .piecontentbox{
        padding:20px;
        width: 100%;
        max-width: 431px;
        margin: 0px auto;
    }
    .diet-form{
        padding:20px 15px
    }
    .piecontentbox .topaction{
        min-width: 155px;
        padding-right: 10px;
        padding-top: 20px;
    }
    .steps-category-header span{
        font-size: 14px;
        line-height: 16px;
    }
    .piecontentbox .selectallitems{
        font-size: 12px;
        line-height: 12px;
    }
    .steps-category-header .goback{
        font-size: 12px;
        line-height: 12px;
    }
    .steps-category-header .goback:before{
        display: none;
    }
    .stepssavedmsg.success{
        padding:12px 10px 12px 10px;
    }
    .svg-container .title{
        padding-left:0px;
    }
}
@media screen and (max-width:567px){
    .dietchart-formfield.gender-field,
    .dietchart-formfield.bdate-field,
    .dietchart-formfield.firstname-field,
    .dietchart-formfield.lastname-field{
        float: none;
        width: 100%;
    }
    .piecontentbox .steps .stepitem-clap{
        display:block;
    }
}
@media screen and (max-width:441px){
    .stepactions .savetocart{
        font-size: 12px;
        padding: 9px 5px 8px 5px;
    }
}
@media screen and (max-width:375px){
    .stepactions .savetocart{
        font-size: 13px;
        padding: 9px 5px 8px 5px;
    }
}
@media screen and (max-width:320px){
    .stepactions .savetocart{
        font-size: 10px;
        padding: 9px 5px 8px 5px;
    }
}