.content-wrapper
{
	padding: 10px 100px;
  background: #fff;
}

#avtar_img1
{
min-width: 48px;
    height: 48px;
}
#avtar_img2
{
	width: 48px;
	height: 48px;
  margin: 12px;
}
#avtar_img3
{
	width: 70px;
    height: 70px;
}
#motor-rate
{
        /* opacity: 1; */
    /* left: 20px; */
    /* top: 20px; */
    width: 187px;
    height: 0px;
    /* transition: width 0.3s ease 0s, height 0.3s ease 0s, opacity 0.3s ease 0s; */
    /* border-radius: 5px 0 0 5px; */
    padding: 16px;
    margin: 34px 21px;
    background-image: linear-gradient(#fff3c3 ,#FECB00)!important;
    background: #FECB00;
    
}
#motor-polarity
{
       /* opacity: 1; */
    /* left: 20px; */
    /* top: 20px; */
    width: 187px;
    height: 0px;
    /* transition: width 0.3s ease 0s, height 0.3s ease 0s, opacity 0.3s ease 0s; */
    /* border-radius: 5px 0 0 5px; */
    padding: 16px;
    margin: 34px 21px;
    background-image: linear-gradient(#fff3c3 ,#FECB00)!important;
    background: #FECB00;
    
}
.frame_bg
{
/*background: #FB4F14!important;*/
height: 245px;
}
.m-auto
{padding: 22px;
    font-size: 28px;
}


  font-weight: bold;
  font-size: 1.5em;
}

[type='range'] {
  outline: none;
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--val) - var(--min))/var(--range));
  --sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em));
  margin: 0;
  padding: 0;
  width: 25.5em;
  height: 1.5em;
  background: transparent;
  font: 1em/1 arial, sans-serif;
}
[type='range'], [type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(145deg, #9cdbef 0, #406bd8 90%);
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  width: 30.5em;
  height: 5.25em;
  font: 1em/1 arial, sans-serif;
}
.wrap label {
  flex-basis: 100%;
  color: #9cdbef;
  opacity: calc( var(--val) / 100);
  font-weight: bold;
  font-size: 1.5em;
}

[type='range'] {
  outline: none;
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--val) - var(--min))/var(--range));
  --sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em));
  margin: 0;
  padding: 0;
  width: 30.5em;
  height: 1.5em;
  background: transparent;
  font: 1em/1 arial, sans-serif;
}
[type='range'], [type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
[type='range']::-webkit-slider-runnable-track {
  box-sizing: border-box;
  border: none;
  width: 30.5em;
  height: 0.2em;
  background: #eee;
}
.js [type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(#FB4F14, #FB4F14) 0/var(--sx) 100% no-repeat #eee;
}
[type='range']::-moz-range-track {
  box-sizing: border-box;
  border: none;
  width: 30.5em;
  height: 0.2em;
  background: #eee;
}
[type='range']::-ms-track {
  box-sizing: border-box;
  border: none;
  width: 30.5em;
  height: 0.2em;
  background: #eee;
}
[type='range']::-moz-range-progress {
  height: 0.2em;
  background: #FB4F14;
}
[type='range']::-ms-fill-lower {
  height: 0.2em;
  background: #FB4F14;
}
[type='range']::-webkit-slider-thumb {
  margin-top: -0.65em;
  box-sizing: border-box;
  border: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50% 50% 50% 0%;
  border: 6px solid #FB4F14;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  background: #004153;
  cursor: pointer;
}
[type='range']::-webkit-slider-thumb:hover {
  border: 3px solid #FB4F14;
}
[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  border: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50% 50% 50% 0%;
  border: 6px solid #FB4F14;
  transform: rotate(-45deg);
  background: #004153;
  cursor: pointer;
}
[type='range']::-moz-range-thumb:hover {
  border: 3px solid #FB4F14;
}
[type='range']::-ms-thumb {
  margin-top: 0;
  box-sizing: border-box;
  border: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50% 50% 50% 0%;
  border: 6px solid #FB4F14;
  transform: rotate(-45deg);
  background: #004153;
  cursor: pointer;
}
[type='range']::-ms-thumb:hover {
  border: 3px solid #FB4F14;
}
[type='range']::-ms-tooltip {
  display: none;
}
[type='range'] ~ output {
  display: none;
}
.js [type='range'] ~ output {
  display: block;
  position: relative;
  left: 0.75em;
  bottom: -18px;
  padding: .25em .5em;
  -webkit-transform: translate(calc((var(--val) - var(--min))/(var(--max) - var(--min))*29em - 50%));
          transform: translate(calc((var(--val) - var(--min))/(var(--max) - var(--min))*29em - 50%));
  color: #eee;
}
.js [type='range'] ~ output::before {
  content: "";
  display: block;
  width: 39px;
  height: 39px;
  background: #004153;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 50% 0% 50% 50%;
  z-index: -1;
}

 
.bootstrap-select {
  max-width: 200px;
  height: 0px;
}
.bootstrap-select .btn {
  background-color: #141414;
  border-style: solid;
  border-left-width: 3px;
  border-left-color: #00DDDD;
  border-top: none;
  border-bottom: none;
  border-right: none;
  color: white;
  font-weight: 200;
  padding: 12px 12px;
  font-size: 16px;
  margin-bottom: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.bootstrap-select .dropdown-menu {
  margin: 15px 0 0;
  border: 1px solid red;
}
select::-ms-expand {
  /* for IE 11 */
  display: none;
}
#what
{
  border:1px solid  red;
  margin: 30px 0;
  width: 100%;
}
#what2
{
  border:1px solid  red;
  margin: 30px 0;
  width: 100%;
}
#what1
{
  border: 1px solid red;
    /* margin: 53px -75px; */
    /* margin: 45px -53px; */
    width: 100%;
    margin: 56px -50px;
}
#what3
{
  border: 1px solid red;
    margin: 33px 0px;
    width: 100%;
}
.etarrif
{
  margin: 10px;

}
#avtar_img4
{
  width: 48px;
  height: 48px;
  margin: -5px;
}
#annual_hours
{
  text-align: right!important;
}
select option
{
  border:  1px solid red;
}
#what4
{
  border: 1px solid red;
    margin: 0px 0px;
    width: 100%;
  }
  #efficiency_percent
  {
    display: none;
  }
  .card-body1
  {
    height: 230px;
  }
  .frame_text
  {
    color: #fff;
    text-transform: uppercase;
    text-align: left;
    font-size: 2.74rem;
  }
  .frame_text1
  {
   color: #fff;
   font-size: 30px;
  }
  .frame_text2
  {
   color: #000;
   font-size: 30px;
  }
  .frame_value
  {
    color: #000;
  }
  .frame_value1
  {
    color: #fff;
    text-align: center;

    font-size: 60px;

  }
.frame_value2
{
color: #fff;
text-align: center;
    margin-top: 32px;
}
.frame_content
{
padding-left: 40px;
}
#what5
{
  border: 1px solid red;
    /* margin: 33px -34px; */
    /* margin: 32px 22px; */
    width: 100%;
    margin: 33px 0px;
  }
  .card2
  {
    height: 224px;
    background: #e7e7e7!important;
  }
  #btn_cal
  {
   background: #FB4F14;
    color: #fff;
    font-size: 18px;
    align-items: center;
    margin: 10px 450px;
    width: 300px;
    border-radius: 0;
    padding: 15px;
  }
  .annual_hours_sec
  {
  padding-left: 30px;
    padding-right: 50px;
  }
   .annual_hours_sec1
   {
  padding-left: 30px;
    padding-right: 50px;
  }
  #what6
  {
        font-size: 16px;
    /*text-align: center;*/
    padding-top: 0px;
  }
  .result_card
  {
   
        margin-top: -45px;
    margin-left: 47px;
   
    height: 135px;
     /*box-shadow: 0 4px 2px 0 #FB4F14 !important;*/
  
  }
  .result_card1{
  background: #fff!important;
}
.result-icon1
{
    width: 50px;
    height: 50px;
    margin: 0 -20px;
    
   
        margin-top: -39px;
    border-radius: 0!important;
}
.avatar, .bullet {
   
   border-radius: 50px 50px 1px 50px!important;
    background: width: 100px;
    height: 70px;
    background: #14B714!important;
    width: 70px;
        box-shadow: 5px 4px 6px 1px #a9a4a4;
    }
    .content_icon
    {
      margin: 30px 25px;
    }
    .head_result{

   padding-top: 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    }
    
    .head_result1
    {
      padding-top: 35px;
    }
    
    .mb-0, .my-0 {
    margin-bottom: 0!important;
    padding: 0px 90px;
}
.head2
{
  text-align: center;
    font-size: 35px;
    padding: 25px;
    font-weight: 700;
}
.head2:after
{
  border-bottom: 1px solid red;
}
.icon_section
{
z-index: 9; 
  
    background: red;
  }
  .value_p{
  padding: 5px;
    font-size: 35px;
        font-weight: 700;
    margin-bottom: 8px;
    padding: 5px 30px;
    padding-top: 50px;
  }
  .head_result4
  {
    padding-top: 35px;
  }
  .co2
  {
        padding: 0;
    margin-top: 15px;
  }
  .btn4{
color: #fff!important;
    background: #FB4F14!important;
    margin: 15px 130px;
  }
  .Assumption
  {
    text-align: left;
  }
  .head5
  {
    padding: 10px;
  }
  .Assumption_menu
  {
  text-align: left;
    font-size: 14px;
    font-style: italic;
  }
  #what7
{
  border: 1px solid red;
    
    width: 80%;
  }
  .calculate_price{
  padding: 0!important;
    background: #fff;
    /* box-shadow: inset -1px -2px 5px 0px black; */
    box-shadow: 0 4px 25px 0 rgba(0,0,0,.1);
    border-radius: 10px;
    height: 300px;
    margin-top: 100px;
  }
  .img_cal
  {
    width: 100%;
  }
#cal_section1
{
  background:url(../images/motorcalculate.jpg);
  width: 100%;
  background-size: cover;
  height: 300px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.head7
{
  color: #fff;
    font-size: 45px;
    text-align: center;
    font-weight: 600;
}
#price_value
{
 background-color: #e7e7e7;
    width: 100%;
    height: 100px;
    margin-top: 10px;
    display: none;
   
}
.price_nan{
text-align: center;
    font-size: 24px;
   
  }
  #btn_cal1{
   background: #FB4F14;
    color: #fff;
    align-items: center;
    width: 250px;
    border-radius: none;
    padding: 16px;
  }
  .btn
  {
    border-radius: 0!important;
  }
 .sec2 ul li{
    color: #fff;
  }
  .img_discription
  {
  width: 10%;
    
}
.motosave_sec
{
  margin-top: 10%;
    
}
.motosave_text
{
  color: #fff;
    font-weight: 600;
    font-family: 'Roboto';
    padding: 10px 0;
}
.price_control
{
  width: 50%!important;
  text-align: center;
}
.price_cal22
{
  padding: 10px 53px!important;
    background: #81B133!important;
    border: 1px!important;
    color: #fff!important;
}

@media (max-width: 768px)
{

  
.theme_right {
    padding: 0;
    width: 100%;

    border-radius: 12px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 0px 25px!important;

}

.value_right {
   
    text-align: center!important;
    margin-top: 0px!important;

   
}

.qdr-col-4>* {
    float: left;
    width: 100%!important;
   
    background: #fff;
    box-shadow: 2px 10px 25px 0 rgba(0,0,0,.06)!important;
 
}
.theme_middle {
    background: #14B714;
}
.scaled:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
        border-top: 0px solid #fff!important;
    border-right: 0px solid transparent!important;
    
}
.scaled:after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    border-bottom: 0px solid #fff!important;
    border-left: 0px solid transparent!important;

    
}
.value_left {
    
 
    text-align: center!important;
    padding: 0!important;
      
}

.icon_left {
    margin-top: 0px;
}
.theme_left {
  
    border-radius: 12px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding: 0px!important;
    margin-right: 0Px!important;

}
.head2 {
    text-align: center;
  font-size: 22px;
    padding: 8px!important;
    font-weight: 700;
}
.price_cal22 {
       padding: 10px 12px!important;
    background: #81B133!important;
    border: 1px!important;
    color: #fff!important;
   
}
.content-wrapper {
    padding: 15px!important;
}
.value_p {
    padding: 5px!important;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 11px;
    padding: 0!important;
    padding-top: 15px!important;
}
.head_result {
    padding-top: 0px!important;
    }
.head_result {
    
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    text-align: center!important;
}
.motosave_sec {
    margin-top: 30%;
    padding: 23px;
}
.headersection {
    background: url(images/motor_bg01.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 350px!important;
    background-size: cover;
}
.side_theme {
    width: 100%!important;
    height: 250px!important;
}
.section_theme2
{
  padding: 10px 20px!important;
}
.theme_righ1 {
    margin-right: 0px!important;
    
}
.xs-pb, .xs-py {
    padding-bottom: 0px!important;
}
.img_discription {
    width: 20%;
}
.wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    width: 15.5em;
    height: 5.25em;
    font: 1em/1 arial, sans-serif;
    top: -40px;
}
.formsubmissionarea {
    padding: 44px 71px;
    box-shadow: -8px 3px 15px 6px #6a6a6a40;
    margin-left: auto!important;
    z-index: 99;
    background-color: #fff;
}
.js [type='range'] ~ output {
    display: none;
    position: relative;
    left: 0.75em;
    bottom: -18px;
    padding: .25em .5em;
    -webkit-transform: translate(calc((var(--val) - var(--min))/(var(--max) - var(--min))*29em - 50%));
    transform: translate(calc((var(--val) - var(--min))/(var(--max) - var(--min))*29em - 50%));
    color: #eee;
    }
    .cl_sm_4{
    margin-bottom: -90px;
    margin-top: 0px;
  }
  .theme_middle_new {
    background: #14B714;
    box-shadow: none!important;
    border-bottom-left-radius: 0!important;
    border-radius: 0!important;
    transform: scale3d(1.0, 1.0, 1.0)!important;
    /* background-color: white; */
    width: 100%!important;
    height: fill;
}
 .col_md_8
 {
  max-width: 100%!important;
 }
 .theme_right {
    border-radius: 0px!important;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
   
    text-align: center!important;
}

}
.theme_middle_new {
    background: #81B133;
    /* box-shadow: none!important; */
    /* border-bottom-left-radius: 0!important; */
    border-radius: 50%;
       transform: scale3d(1.8, 1.8, 1.8);
    /* background-color: white; */
    width: 80%;
    height: fill
}
.img_co2_new{
    margin-top: -23px;
    width: 50px;
    height: 50px;
}
.value_number3_new {
    font-size: 35px;
    font-weight: 800;
    color: #fff;
}
.emmission_new
{
  color: #fff;
  font-size: 13px;
}
.bs-light_new
{
box-shadow: -9px 2px 20px 0 rgba(0, 0, 0, 0.07);
}
.co2_new{
color: #fff;
    font-size: 18px;
    font-weight: 700
  }
  .text_efficiency
  {
    font-size: 12px;
  }


  /*option3*/
  .price-table{
  text-align: center;
  overflow: hidden;
  margin: 20px;
  background:#fff;
  box-sizing: border-box;
  box-shadow: inset 0 0 40px rgba(0,0,0,.1), 0 20px 20px rgba(0,0,0,.3);
  border-radius: 20px
}
.price-head_title{
  padding: 50px;
  background:linear-gradient(45deg, #B9CCC3
, #004152bd);
  border-bottom-left-radius: 50%;
  border-top-right-radius: 50%;
  transition: 0.3s all linear
}
.price-head_title:hover{
  border-bottom-left-radius: 0%;
  border-top-right-radius: 0%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%
}
.price-table .price-head_title h4{
text-transform: uppercase;
margin: 0;
padding: 0;
color: #fff;
font-weight: 700
}
.price-table .price-head_title h2{
text-transform: uppercase;
margin: 0;
padding: 20px 0 0;
color: #fff;
font-size: 24px; 
}
.price-content_3{
  position: relative;
}
/*.col-sm-4:nth-child(2) .price-table{
  transform: scale(1.1)
}*/
.price-content_3 ul{
  position: relative;
  margin:0;
  padding:20px 0;
}
.price-content_3 ul li{
list-style: none;
font-size:16px;
text-transform: uppercase;
padding: 10px 0;
color:#333;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
cursor:pointer;
transition: 0.5s all
}
.price-content_3 ul li:hover{
border-left: 10px solid #9e02c5;
border-right: 10px solid #9e02c5;
}
.price-button{
  padding: 0 0 30px;
}
.price-button a{
  padding: 10px 40px;
  background: #000;
  color:#fff;
  border-radius: 25px;
  font-size:18px;
  text-decoration: none;
  background:linear-gradient(45deg, #004153, #B9CCC3);
  transition: 0.5s ease-in-out
}
.price-button a:hover{
  background:linear-gradient(-15deg, #e021d1, #3121f3);
}
.result-icon_price{width: 80px;height: 80px;}
  /*end option3*/