.calc-wrapper{
    /*max-width : 450px;*/
    /*min-height :500px;*/
    margin : 40px 0;
}

.calc-title{
    font-family   : 'Rubik', sans-serif;
    font-style    : normal;
    font-weight   : 500;
    font-size     : 34px;
    line-height   : 40px;
    color         : #333333;
    margin-bottom : 50px;
}

.calc-desc{
    font-family   : 'Roboto', sans-serif;
    font-style    : normal;
    font-weight   : 400;
    font-size     : 16px;
    line-height   : 26px;
    color         : #000000;
    margin-bottom : 35px;
}

.calc_loader{
    width                   : 100px;
    height                  : 250px;
    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;
    -webkit-box-align       : center;
    -webkit-align-items     : center;
    -moz-box-align          : center;
    -ms-flex-align          : center;
    align-items             : center;
    -webkit-box-pack        : center;
    -webkit-justify-content : center;
    -moz-box-pack           : center;
    -ms-flex-pack           : center;
    justify-content         : center;
    margin                  : 0 auto 25px auto;
}

.calc_loader svg{
    width  : 75px;
    height : 75px;
}

.calcFormContainer{
    max-width : 415px;
    width     : 100%;
    margin    : auto;
}

.calcForm{
    border                : 1px solid #e5e5e5;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    padding               : 30px;
    width                 : 100%;
}

.calcFormContainer,
.calcFormContainer *{
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}

.formTitle{
    font-family   : 'Rubik', sans-serif;
    font-style    : normal;
    font-weight   : 500;
    font-size     : 24px;
    line-height   : 28px;
    color         : #333333;
    margin-bottom : 10px;
}

.calcFormField{
    display             : -webkit-box;
    display             : -webkit-flex;
    display             : -moz-box;
    display             : -ms-flexbox;
    display             : flex;
    -webkit-box-align   : center;
    -webkit-align-items : center;
    -moz-box-align      : center;
    -ms-flex-align      : center;
    align-items         : center;
    margin-bottom       : 25px;
    /*justify-content : space-between;*/
}

.calcFormField:last-child{
    margin-bottom : 0;
}

.formLabel{
    min-width          : 140px;
    width              : 100%;
    max-width          : 147px;
    font-family        : 'Roboto', sans-serif;
    font-style         : normal;
    font-weight        : 400;
    font-size          : 14px;
    line-height        : 16px;
    color              : #333333;
    margin-right       : 15px;
    -webkit-transition : color 0.3s ease;
    -o-transition      : color 0.3s ease;
    -moz-transition    : color 0.3s ease;
    transition         : color 0.3s ease;
}

.calcFormField input[type='number']{
    /*max-width     : 165px;*/
    width                 : 100%;
    padding               : 10px;
    border                : 1px solid #e11d07;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    height                : unset;
    
    font-family           : 'Roboto', sans-serif;
    font-style            : normal;
    font-weight           : 400;
    font-size             : 14px;
    line-height           : 16px;
    display               : -webkit-box;
    display               : -webkit-flex;
    display               : -moz-box;
    display               : -ms-flexbox;
    display               : flex;
    color                 : #333333;
    -webkit-transition    : all 0.3s ease;
    -o-transition         : all 0.3s ease;
    -moz-transition       : all 0.3s ease;
    transition            : all 0.3s ease;
}

.calcFormField input[type='number']:hover{
    border : 1px solid #a80000;
    
}

.calcFormField input[type='number']:focus{
    border : 1px solid #333333;
}

.radioField input[type='radio']{
    display : none;
}

.radioField span{
    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;
    -webkit-box-align       : center;
    -webkit-align-items     : center;
    -moz-box-align          : center;
    -ms-flex-align          : center;
    align-items             : center;
    -webkit-box-pack        : center;
    -webkit-justify-content : center;
    -moz-box-pack           : center;
    -ms-flex-pack           : center;
    justify-content         : center;
    min-width               : 40px;
    /*width           : 45px;*/
    height                  : 36px;
    border                  : 1px solid #e11d07;
    -webkit-border-radius   : 5px;
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    user-select             : none;
    font-family             : 'Roboto', sans-serif;
    font-style              : normal;
    font-weight             : 400;
    font-size               : 12px;
    line-height             : 14px;
    color                   : #333333;
    background              : transparent;
    -webkit-transition      : background-color 0.3s ease;
    -o-transition           : background-color 0.3s ease;
    -moz-transition         : background-color 0.3s ease;
    transition              : background-color 0.3s ease;
    cursor                  : pointer;
}

.radioField input[type='radio']:checked + span{
    background : rgba(225, 29, 7, 0.35);
}

.radioFieldGR{
    width                   : 100%;
    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;
    -webkit-box-pack        : justify;
    -webkit-justify-content : space-between;
    -moz-box-pack           : justify;
    -ms-flex-pack           : justify;
    justify-content         : space-between;
    -webkit-box-align       : center;
    -webkit-align-items     : center;
    -moz-box-align          : center;
    -ms-flex-align          : center;
    align-items             : center;
}

.formLabelGR{
    margin-right : 15px;
    width        : -webkit-calc(100% / var(--c) - 10px);
    width        : -moz-calc(100% / var(--c) - 10px);
    width        : calc(100% / var(--c) - 10px);
}

.formLabelGR:last-child{
    margin-right : 0;
}

.radioFieldGRLast span{
    min-width : 75px;
}

.calcFormField[data-error='true'] .formLabel{
    color : #e11d07;
}

.errorMsg{
    font-family : 'Roboto', sans-serif;
    font-style  : normal;
    font-weight : 400;
    font-size   : 12px;
    line-height : 14px;
    margin      : 10px 0;
    color       : #e11d07;
}

.buttonField{
    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;
    -webkit-box-align       : center;
    -webkit-align-items     : center;
    -moz-box-align          : center;
    -ms-flex-align          : center;
    align-items             : center;
    -webkit-box-pack        : center;
    -webkit-justify-content : center;
    -moz-box-pack           : center;
    -ms-flex-pack           : center;
    justify-content         : center;
    margin-top              : 35px;
}

.calcFormBtn{
    margin-right            : 15px;
    padding                 : 12px;
    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;
    -webkit-box-align       : center;
    -webkit-align-items     : center;
    -moz-box-align          : center;
    -ms-flex-align          : center;
    align-items             : center;
    -webkit-box-pack        : center;
    -webkit-justify-content : center;
    -moz-box-pack           : center;
    -ms-flex-pack           : center;
    justify-content         : center;
    text-align              : center;
    font-family             : 'Roboto', sans-serif;
    font-style              : normal;
    font-weight             : 400;
    font-size               : 16px;
    line-height             : 19px;
    color                   : #ffffff;
    background              : #e11d07;
    -webkit-transition      : background-color 0.3s ease;
    -o-transition           : background-color 0.3s ease;
    -moz-transition         : background-color 0.3s ease;
    transition              : background-color 0.3s ease;
    width                   : 160px;
    border                  : none;
}

.calcFormBtn:hover{
    background : #333333;
}

.calcFormBtn:last-child{
    margin-right : 0;
    background   : #333333;
}

.calcFormBtn:last-child:hover{
    margin-right : 0;
    background   : #e11d07;
}

.calcResultWrapper{
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
    width                   : 100vw;
    height                  : 100vh;
    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;
    -webkit-box-align       : center;
    -webkit-align-items     : center;
    -moz-box-align          : center;
    -ms-flex-align          : center;
    align-items             : center;
    -webkit-box-pack        : center;
    -webkit-justify-content : center;
    -moz-box-pack           : center;
    -ms-flex-pack           : center;
    justify-content         : center;
    background-color        : #16161659;
    z-index                 : 999;
}

.calcResult{
    position                : relative;
    max-width               : 415px;
    width                   : 100%;
    background              : #ffffff;
    border                  : 1px solid #e5e5e5;
    -webkit-box-shadow      : 0 4px 14px rgba(0, 0, 0, 0.25);
    -moz-box-shadow         : 0 4px 14px rgba(0, 0, 0, 0.25);
    box-shadow              : 0 4px 14px rgba(0, 0, 0, 0.25);
    -webkit-border-radius   : 5px;
    -moz-border-radius      : 5px;
    border-radius           : 5px;
    padding                 : 30px;
    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;
    -webkit-box-orient      : vertical;
    -webkit-box-direction   : normal;
    -webkit-flex-direction  : column;
    -moz-box-orient         : vertical;
    -moz-box-direction      : normal;
    -ms-flex-direction      : column;
    flex-direction          : column;
    -webkit-box-align       : center;
    -webkit-align-items     : center;
    -moz-box-align          : center;
    -ms-flex-align          : center;
    align-items             : center;
    -webkit-box-pack        : center;
    -webkit-justify-content : center;
    -moz-box-pack           : center;
    -ms-flex-pack           : center;
    justify-content         : center;
}

.calcResultClose{
    position                : absolute;
    top                     : 20px;
    right                   : 20px;
    background              : rgba(255, 255, 255, 0.2);
    -webkit-border-radius   : 6px;
    -moz-border-radius      : 6px;
    border-radius           : 6px;
    border                  : none;
    outline                 : none;
    cursor                  : pointer;
    z-index                 : 3;
    font-size               : 0;
    width                   : 42px;
    height                  : 42px;
    padding                 : 0;
    display                 : -webkit-box;
    display                 : -webkit-flex;
    display                 : -moz-box;
    display                 : -ms-flexbox;
    display                 : flex;
    -webkit-box-align       : center;
    -webkit-align-items     : center;
    -moz-box-align          : center;
    -ms-flex-align          : center;
    align-items             : center;
    -webkit-box-pack        : center;
    -webkit-justify-content : center;
    -moz-box-pack           : center;
    -ms-flex-pack           : center;
    justify-content         : center;
    -webkit-transition      : all 0.3s ease;
    -o-transition           : all 0.3s ease;
    -moz-transition         : all 0.3s ease;
    transition              : all 0.3s ease;
}

.calcResultClose svg path{
    stroke             : #333333;
    -webkit-transition : all 0.3s ease;
    -o-transition      : all 0.3s ease;
    -moz-transition    : all 0.3s ease;
    transition         : all 0.3s ease;
}

.calcResultClose:hover svg path{
    stroke : #ffffff;
}

.calcResultClose svg{
    -webkit-transition : -webkit-transform 0.3s ease;
    transition         : -webkit-transform 0.3s ease;
    -o-transition      : -o-transform 0.3s ease;
    -moz-transition    : transform 0.3s ease, -moz-transform 0.3s ease;
    transition         : transform 0.3s ease;
    transition         : transform 0.3s ease, -webkit-transform 0.3s ease, -moz-transform 0.3s ease, -o-transform 0.3s ease;
}

.calcResultClose:hover svg{
    -webkit-transform : scale(1.1);
    -moz-transform    : scale(1.1);
    -ms-transform     : scale(1.1);
    -o-transform      : scale(1.1);
    transform         : scale(1.1);
}

.calcResultClose:active svg{
    -webkit-transform : scale(0.9);
    -moz-transform    : scale(0.9);
    -ms-transform     : scale(0.9);
    -o-transform      : scale(0.9);
    transform         : scale(0.9);
}

.resultTitle{
    font-family : 'Rubik', sans-serif;
    font-style  : normal;
    font-weight : 500;
    font-size   : 24px;
    line-height : 28px;
    text-align  : center;
    color       : #333333;
    margin      : 0;
}

.resultSum{
    font-family : 'Rubik', sans-serif;
    font-style  : normal;
    font-weight : 500;
    font-size   : 32px;
    line-height : 38px;
    text-align  : center;
    color       : #333333;
    margin      : 25px 0;
}

.resultSum span{
    font-size   : 24px;
    line-height : 28px;
}

.calcRemark{
    margin-bottom : 0;
    list-style    : unset;
}

.calcRemark li,
.calcRemark li a{
    font-family : 'Roboto', sans-serif;
    font-style  : normal;
    font-weight : 400;
    font-size   : 14px;
    line-height : 150%;
    color       : #333333;
}

.calcRemark li{
    margin-bottom : 1px;
}

.calcRemark li a{
    color              : #e11d07;
    -webkit-transition : color 0.3s ease;
    -o-transition      : color 0.3s ease;
    -moz-transition    : color 0.3s ease;
    transition         : color 0.3s ease;
}

.calcRemark li a:hover{
    color : #333333;
}

@media (max-width : 480px){
    .calc-title{
        font-size     : 22px;
        line-height   : 26px;
        text-align    : center;
        margin-bottom : 25px;
    }
    
    .calc-desc{
        font-weight   : 400;
        font-size     : 12px;
        line-height   : 150%;
        margin-bottom : 30px;
    }
    
    .formTitle{
        font-weight : 500;
        font-size   : 17px;
        line-height : 20px;
        text-align  : center;
    }
    
    .calcForm{
        padding : 22px;
    }
    
}

@media (max-width : 420px){
    .calcFormField{
        -webkit-flex-wrap : wrap;
        -ms-flex-wrap     : wrap;
        flex-wrap         : wrap;
        margin-bottom     : 15px;
    }
    
    .formLabel{
        max-width     : 100%;
        margin-right  : 0;
        margin-bottom : 5px;
    }
    
    .calcFormBtn{
        max-width     : 90%;
        width         : 100%;
        margin-right  : 0;
        margin-bottom : 10px;
    }
    
    .buttonField{
        margin-top              : 25px;
        -webkit-box-orient      : vertical;
        -webkit-box-direction   : normal;
        -webkit-flex-direction  : column;
        -moz-box-orient         : vertical;
        -moz-box-direction      : normal;
        -ms-flex-direction      : column;
        flex-direction          : column;
        -webkit-box-align       : center;
        -webkit-align-items     : center;
        -moz-box-align          : center;
        -ms-flex-align          : center;
        align-items             : center;
        -webkit-box-pack        : center;
        -webkit-justify-content : center;
        -moz-box-pack           : center;
        -ms-flex-pack           : center;
        justify-content         : center;
    }
    
    .calcFormBtn:last-child{
        margin-bottom : 0;
    }
    
    .calcResult{
        max-width : 95%;
        padding   : 22px;
    }
    
    .calcResultClose{
        top    : 15px;
        right  : 15px;
        width  : 30px;
        height : 30px;
    }
    
    .calcResultClose svg{
        width  : 20px;
        height : 20px;
    }
    
    .resultTitle{
        font-size   : 20px;
        line-height : 24px;
        margin-top  : 25px;
    }
    
    .resultSum{
        font-size   : 24px;
        line-height : 28px;
    }
    
    .calcRemark li, .calcRemark li a{
        font-size   : 12px;
        line-height : 14px;
    }
}

.noScroll{
    overflow : hidden;
}