/******************** ROI Calculator *******************/


.roi {
    padding: 0;
}

.roi section {
    padding: 0
}

.roi .et_pb_row.et_pb_row_fullwidth {
    width: 100% !important;
    max-width: 100% !important;
}

.roi h3 {
    font-size: 24px;
    /*font-size: 2.4rem;*/
    font-weight: 600;
    text-align: left;
    margin-bottom: 30px;
}

.roi canvas {
    pointer-events: none
    margin-bottom: 15px
}

.roi .roi-fieldset {
    float: left;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%
}

.roi .roi-fieldset h3 {
    font-size: 18px;
    /*font-size: 1.8rem;*/
    background-color: #fff;
    margin-top: -20px;
    padding: 10px;
    margin-bottom: 20px;
}

.roi .roi-fieldset.roi-fieldset--journey,
.roi .roi-fieldset.roi-fieldset--journey h3,
.roi .row_inputs .roi-fieldset.roi-fieldset--journey .slider-title--total {
    border: 1px solid #38C2F4;
}
.roi .row_inputs .roi-fieldset.roi-fieldset--journey .slider-title--total {
    background: rgba(56, 194, 244, .2);
}

.roi .roi-fieldset.roi-fieldset--resource ,
.roi .roi-fieldset.roi-fieldset--resource h3,
.roi .roi-fieldset.roi-fieldset--resource .slider-title--total {
    border: 1px solid #EF4737;
}
.roi .row_inputs .roi-fieldset.roi-fieldset--resource .slider-title--total {
    background: rgba(239, 71, 55, 0.2);
}

.roi .roi-fieldset.roi-fieldset--planning ,
.roi .roi-fieldset.roi-fieldset--planning h3,
.roi .roi-fieldset.roi-fieldset--planning .slider-title--total {
    border: 1px solid #00548e;
}

.roi .row_inputs .roi-fieldset.roi-fieldset--planning .slider-title--total {
    background: rgba(0, 84, 142, 0.2);
}

.roi .roi-fieldset.roi-fieldset--totals ,
.roi .roi-fieldset.roi-fieldset--totals h3,
.roi .row_inputs .roi-fieldset.roi-fieldset--totals .slider-title--total {
    border: 2px solid #EF4737;
}

.roi .checkbox-switch-holder--boxed {
    clear: both;
    margin-left: -20px;
    margin-right: -20px;
    padding: 20px 20px 40px
}

@media (max-width: 800px) {
    .roi .checkbox-switch-holder--boxed {
        display:none
    }
}

.roi .roi-fieldset--journey .checkbox-switch-holder--boxed {
    background-color: #38C2F42e;
    border-bottom: 1px solid #38C2F4
}

.roi .roi-fieldset--resource .checkbox-switch-holder--boxed {
    background-color: rgba(54,162,235,.2);
    border-bottom: 1px solid #EF4737
}

.roi .roi-fieldset--planning .checkbox-switch-holder--boxed {
    background-color: rgba(0,84,142,.2);
    border-bottom: 1px solid #00548e
}

.roi .boxed-2 {
    border-top: 1px solid #38C2F4;
    margin-bottom: 20px;
    padding-bottom: 20px
}

.roi .checkbox-switch {
    display: none
}

.roi .checkbox-switch+label {
    background-color: #ccc;
    box-sizing: content-box;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    padding: 0 0 0 53px;
    position: relative;
    width: 0
}

.roi .checkbox-switch+label:after,.roi .checkbox-switch+label:before {
    border-radius: 100px;
    content: '';
    position: absolute
}

.roi .checkbox-switch+label:before {
    -moz-box-shadow: inset -1px -1px 3px #929292;
    -webkit-box-shadow: inset -1px -1px 3px #929292;
    box-shadow: inset -1px -1px 3px #929292;
    background: #fff;
    height: 25px;
    left: 2px;
    top: 2px;
    width: 25px;
    z-index: 999
}

.roi .checkbox-switch+label:after {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.roi .checkbox-switch:checked+label:before {
    -moz-box-shadow: inset 1px 1px 3px #ccc;
    -webkit-box-shadow: inset 1px 1px 3px #ccc;
    box-shadow: inset 1px 1px 3px #ccc;
    left: 26px
}

.roi .roi-fieldset--journey .checkbox-switch:checked+label:after {
    background-color: #38C2F4
}

.roi .roi-fieldset--resource .checkbox-switch:checked+label:after {
    background-color: #EF4737
}

.roi .roi-fieldset--planning .checkbox-switch:checked+label:after {
    background-color: #00548e
}

.roi .checkbox-switch-label {
    font-size: 14px;
    color: #000;
    display: block;
    margin-left: 10px;
    position: relative;
    width: 320px;
}

@media (min-width: 1200px) {
    .roi .checkbox-switch-label {
        /*width:37rem*/
    }
}

.roi .checkbox-switch-label--value {
    font-size: 16px;
    /*font-size: 1.6rem;*/
    font-weight: 600;
    line-height: 1;
    /*position: absolute;*/
    right: 0;
    top: 0;
    white-space: nowrap;
    display: block;
}

@media (min-width: 1200px) {
    .roi .checkbox-switch-label--value {
        font-size:20px;
        /*font-size: 2rem*/
    }
}

.roi .roi-fieldset--journey .checkbox-switch-label--value {
    color: #38C2F4
}

.roi .roi-fieldset--resource .checkbox-switch-label--value {
    color: #EF4737
}

.roi .roi-fieldset--planning .checkbox-switch-label--value {
    color: #00548e
}

.roi .slider-holder {
    float: left;
    position: relative;
    width: 100%
}

.roi .slider-title {
    font-size: 14px;
    /*font-size: 1.4rem;*/
    margin-bottom: 20px;
    float: left;
    width: 100%
}

.roi .slider-title--total {
    font-weight: 600;
}

.roi .slider-title--text {
    float: left;
    width: 60%;
}
.roi .row_inputs .slider-title--total .slider-title--text {
    width: 100%;
    text-align: center;
}
.roi .row_inputs .slider-title--total .slider-title--value {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
}

.roi .row_inputs .slider-title--total {
    border: 1px solid #ccc; 
    padding: 10px; 
}

@media (min-width: 1200px) {
    .roi .slider-title--text {
        width:70%;
        line-height: 1.3;
    }
}

.roi .slider-title--value {
    float: right;
    font-weight: 600;
    line-height: 1
}

@media (min-width: 768px) {
    .roi .slider-title--value {
        font-size:12px;
        /*font-size: 2rem*/
    }
}

@media (min-width: 801px) {
    .roi .slider-title--value {
        font-size:12px;
        /*font-size: 1.6rem*/
    }
}

@media (min-width: 1200px) {
    .roi .slider-title--value {
        font-size:14px;
        /*font-size: 2rem*/
    }
}

.roi .roi-fieldset--journey .slider-title--value {
    color: #38C2F4
}

.roi .roi-fieldset--resource .slider-title--value {
    color: #EF4737
}

.roi .roi-fieldset--planning .slider-title--value {
    color: #00548e
}

.roi .roi-fieldset--totals .slider-title--value {
    color: #EF4737
}

.roi .ui-slider-handle,.roi .ui-slider-range,.roi .slider-minus,.roi .slider-plus {
    border-radius: 25px
}

.roi .slider-minus,.slider-plus {
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    bottom: 35px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    height: 25px;
    position: absolute;
    text-align: center;
    width: 25px;
    z-index: 97;
    line-height: 25px;
}

.roi .roi-fieldset--journey .slider-minus,.roi .roi-fieldset--journey .slider-plus {
    background-color: #38C2F4
}

.roi .roi-fieldset--resource .slider-minus,.roi .roi-fieldset--resource .slider-plus {
    background-color: #EF4737
}

.roi .roi-fieldset--planning .slider-minus,.roi .roi-fieldset--planning .slider-plus {
    background-color: #00548e
}

.roi .slider-minus {
    left: 0
}

.roi .slider-plus {
    right: 0
}

.roi .ui-slider {
    background-color: #ccc;
    border-radius: 25px;
    clear: both;
    height: 16px;
    left: 22px;
    position: relative;
    margin-bottom: 40px;
    margin-top: 40px;
    width: 83%
}

.roi .ui-slider-range {
    height: 10px;
    left: 3px;
    position: absolute;
    top: 3px;
    z-index: 99
}

.roi .roi-fieldset--journey .ui-slider-range {
    background-color: #38C2F4
}

.roi .roi-fieldset--resource .ui-slider-range {
    background-color: #EF4737
}

.roi .roi-fieldset--planning .ui-slider-range {
    background-color: #00548e
}

.roi .ui-slider-handle {
    -moz-box-shadow: 0 4px 7px #373531;
    -webkit-box-shadow: 0 4px 7px #373531;
    box-shadow: 0 4px 7px #373531;
    background-color: #ccc;
    cursor: pointer;
    display: block;
    height: 30px;
    margin-left: -15px;
    position: absolute;
    outline: none;
    top: -7px;
    width: 30px;
    z-index: 99
}

.roi .roi-overview {
    background-color: #00548e;
    color: #fff;
    padding-bottom: 20px;
    padding-top: 20px
}

.roi .roi-overview a {
    color: #ef4036
}

.roi .roi-overview-content {
    font-size: 14px;
    /*font-size: 1.4rem*/
}

@media (max-width: 767px) {
    .roi .roi-overview-content {
        margin-bottom:20px;
        text-align: center
    }

    .roi .roi-overview-content h2 {
        text-align: center
    }
}

@media (min-width: 768px) {
    .roi .roi-overview-content {
        padding-right:20px;
        min-width: 57.62712%
    }
}

@media (min-width: 1200px) {
    .roi .roi-overview-content {
        padding-right:80px;
        min-width: 66.10169%
    }
}

.roi .roi-overview-content h2 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 5px
}

.roi .roi-overview-btn {
    float: right;
    text-align: right
}

.roi .roi-overview-btn .btn,.roi .roi-overview-btn .newsletter-form .hs-form div.actions .hs-button,.roi .newsletter-form .hs-form div.actions .roi-overview-btn .hs-button,.roi .roi-overview-btn .nav-main li.nav-main-btn a,.roi .nav-main li.nav-main-btn .roi-overview-btn a {
    background-color: #8cc63e;
    color: #fff
}

.roi.layout-small {padding-top: 20px; padding-bottom:0; background: transparent;}
.roi.layout-small .roi-fieldset {margin-bottom: 10px;padding-left:0;}
.roi.layout-small .roi-fieldset h3 {display:none;}
.roi.layout-small .roi-fieldset {border:none !important;}
.roi.layout-small #Slider2,.roi.layout-small  #Slider3,.roi.layout-small  #Slider4 {display:none;}
.roi.layout-small .slider-title--total {display:none}
.roi.layout-small #Slider6,.roi.layout-small  #Slider7,.roi.layout-small  #Slider8 {display:none;}
.roi.layout-small #Slider10,.roi.layout-small  #Slider11,.roi.layout-small  #Slider12 {display:none;}
.roi.layout-small .slider-title {margin-bottom: 0;}

.roi.layout-small .row_inputs .et_pb_column { width: 100% !important; max-width: 100% !important; }

.roi.layout-small .ui-slider {margin-bottom:10px;margin-top: 10px;}
.roi.layout-small .slider-minus,.roi.layout-small  .slider-plus { bottom: 5px;}

.roi.layout-small .roi-fieldset--planning .slider-minus,.roi.layout-small  .roi-fieldset--planning .slider-plus,
.roi.layout-small .roi-fieldset--planning .ui-slider-range {background-color:#fff;color: #00548e;}

.roi.layout-small .roi-fieldset--planning .slider-title--value,
.roi.layout-small .roi-fieldset--planning .slider-title--value { color: #fff;}
.roi.layout-small .slider-title--text { width: 60%; margin-bottom: 10px; }

.roi.layout-small .row_chart {display: none;}
.roi.layout-small .row_results {width: 100%;}