body{font-family: 'Mulish', sans-serif;background: #F5F5F5;}
.modal{z-index: 9999;}

a, a:hover{text-decoration: none;}


.default-button{
  width: 100px;
    background: #000;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
  -webkit-appearance: button-bevel;
  appearance: button;
}

#multistepform {
    overflow:auto;
    width:100%;
    height:100%;
}

.btn-dark{padding: 10px 20px;
    min-width: 100px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;}

#multistepform-example-container{background: #f5f5f5;}

#multistepform .bg {
    width:100%;
    height:100%;
    position: absolute;
    z-index:-5;
}
#multistepform .close {
    background-image: url(msform_sprite.png);
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 10000;
}
#multistepform-container {
  max-width: 70%;
    top:50px;
  margin: 0px auto;
  text-align: center;
  position: relative;
}
#multistepform-container .form {
  background: white;
  border: 0 none;
  border-radius: 0px;
  padding: 20px 30px;
  max-height: 500px;
    width: 90%;
    margin: 0 5%;
  box-sizing: border-box;
  position: absolute;
    background: #F0F0F0;
}
#multistepform-container .form:not(:first-of-type) {
  display: none;
}
.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}
.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}
#multistepform-progressbar {
  margin-bottom: 10px;
  overflow: hidden;
  counter-reset: step;
    text-align:center;
}
#multistepform-progressbar li {
  list-style-type: none;
  color: #000;
  font-size: 11px;
    padding: 0 15px;
  display:inline-block;
  position: relative;
    margin: 0 !important;
    padding-bottom: 15px;
    font-weight: 700;
}
#multistepform-progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 24px;
    height: 24px;
    display: block;
    font-size: 12px;
    color: #333;
    background: transparent;
    border-radius: 12px;
    margin: 0 auto 5px auto;
    line-height: 24px;
    border:solid 1px #000;
}
#multistepform-progressbar li.active:before,  #multistepform-progressbar li.active:after{
  background: #000;
  color: white;}

#multistepform-progressbar li.active{color: #000;}

 #multistepform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}
/*buttons*/
#multistepform .button {
  width: 100px;
  background: #000;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
  -webkit-appearance: button-bevel;
  appearance: button;
}
#multistepform .button:hover, #msform .button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #000;
}

.map-section{max-height: 400px;overflow: hidden;}
.top-section{overflow: hidden;min-height: 400px;}
.select-country h3{font-size: 18px;font-weight: 700;padding-bottom: 15px;}
.form-action{position: absolute;
    width: 100%;
    left: 0;
    bottom: -8em;}

.select-country{
  max-width: 90%;
    margin: 0 auto;
    background: #fff;
    padding: 20px 0;}


.owl-prev,
.owl-next {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
}

.owl-prev {
  left: -2rem;
}

.owl-next {
  right: -2rem;
}


.country-img img{width: 30px!important;margin: 0 auto;}
.country-img a{display: block;text-decoration: none;color: #000;}
.c-select span{font-size: 12px;line-height: 1.3;display: inline-block;}
.country-inactive span{color: #9999C7!important;}
.country-inactive img{filter: sepia(100%) grayscale(100%) saturate(1)!important;opacity: 0.4!important;}
.active-country img{filter: none;opacity: 1;}

.dimention-info{max-width: 80%;margin:  0 auto;}
.volumn-digit{background: #000;
    border-radius: 3px;
    width: 100px;
    position: absolute;
    top: 1px;
    right: 1px;
    color: #fff;
    font-size: 11px;
    height: 45px;
    margin: 2px;
  display: flex;
  align-items:center;
    justify-content: center;}

.m-cube{font-size: 2em;font-weight: 700;}
.enter-volumn{position: relative;}
.more-info, .more-info:hover{color: #000;text-decoration: none;display: inline-block;}
.more-info .lnr{font-size: 2em;}
.more-info i{font-size: 13px;display: inline-block;text-align: left;text-decoration: underline;font-style: normal;}

.custom-container{max-width: 1000px;margin: 0 auto;}
.modal-dialog{background: #fff;}
.modal-header{border-bottom: none;}
.enter-volumn .form-control{height: 50px;}



.info-label{display: flex;
    align-items: center;
    justify-content: flex-end;
color: #8A8C91;
    font-size: 12px;
    font-weight: 600;}

.rangeslider {
  position: relative;
  height: 8px;
  border-radius: 5px;
  width: 100%;
  background-color: #E3E3E3;
  margin: 2em 0;
}
.rangeslider__handle {
  transition: background-color 0.2s;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: #000;
  touch-action: pan-y;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  z-index: 3;
  top: -12px;

}
.rangeslider__handle__value {
  transition: background-color 0.2s, box-shadow 0.1s, transform 0.1s;
  box-sizing: border-box;
  width: 90px;
  text-align: center;
  padding: 0px;
  background-color: #000;
  border-radius: 5px;
  color: white;
  left: -35px;
  top: -30px;
  position: absolute;
  white-space: nowrap;
  box-shadow: 0 -4px 1px rgba(0, 0, 0, 0.07), 0 -5px 20px rgba(0, 0, 0, 0.3);
}
.rangeslider__handle__value:before {
  transition: border-top-color 0.2s;
  position: absolute;
  bottom: -7px;
  left: calc(50% - 3px);
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid;
  border-top-color: #000;
}
.rangeslider__handle__value:after {
  content: " cm";
}
.rangeslider__fill {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 100%;
  background-color: #000;
  border-radius: 5px;
}
.rangeslider__labels {
  position: absolute;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  display: none;
}
.rangeslider__labels__label {
  font-size: 0.75em;
  position: relative;
  padding-top: 15px;
  color: gray;
}
.rangeslider__labels__label:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 1px;
  height: 9px;
  border-radius: 1px;
  background-color: rgba(128, 128, 128, 0.5);
}
.rangeslider__labels__label:first-child:before, .rangeslider__labels__label:last-child:before {
  height: 12px;
  width: 2px;
}
.rangeslider__labels__label:first-child:before {
  background-color: #0099FF;
}
.rangeslider__labels__label:last-child:before {
  background-color: gray;
}
.rangeslider__labels__label:first-child {
  transform: translateX(-48%);
}
.rangeslider__labels__label:last-child {
  transform: translateX(48%);
}
.rangeslider.rangeslider--active .rangeslider__handle, .rangeslider.rangeslider--active .rangeslider__handle * {
  background-color: #000;
}
.rangeslider.rangeslider--active .rangeslider__handle *:before {
  border-top-color: #000;
}
.rangeslider.rangeslider--active .rangeslider__handle__value {
  transform: translateY(-5px);
  box-shadow: 0 -3px 2px rgba(0, 0, 0, 0.04), 0 -9px 25px rgba(0, 0, 0, 0.15);
}


ul.ks-cboxtags {
    list-style: none;
    padding: 20px;
}
ul.ks-cboxtags li{
  display: inline;
}
ul.ks-cboxtags li label{
    display: inline-block;
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
    border-radius: 0px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}

ul.ks-cboxtags li label {
    padding: 10px 12px;
    cursor: pointer;
    min-width: 130px;
}



ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {

}

ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 1px solid #000;
    background-color: #000;
    color: #fff;
    transition: all .2s;
}

ul.ks-cboxtags li input[type="checkbox"] {
  display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
  border: 1px solid #000;
}

.usage-section h5{color: #8A8C91;font-size: 16px;}
.usage-section{text-align: left;max-width: 600px;margin: 0 auto;padding-top: 2em;}

.settings-btn, .settings-btn:hover{display: inline-block;
    padding: 10px;
    border: solid 1px #000;
    color: #000;
    text-decoration: none;}

.settings-tile{border: solid 1px #EDEDED;margin-bottom: 5px;}

.tgl {
  position: relative;
  outline: 0;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  margin: 0 0 5px 0;
  font-size: 12px;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl + .tgl-btn::selection {
  background: none;
}
.tgl span {
  position: relative;
  display: block;
  height: 30px;
  min-width: 90px;
  line-height: 1.2em;
  overflow: hidden;
  font-weight: normal;
  text-align: center;
  border-radius: 2em;
  /*padding: 0.2em 1em;*/
  border: 1px solid #fafafa;
  transition: color 0.3s ease, padding 0.3s ease-in-out, background 0.3s ease-in-out;
}
.tgl span:before {
  position: relative;
  display: block;
  line-height: 1.3em;
  padding: 0 0.2em;
  font-size: 9px;
    top: 8px;
    left: 1px;
    font-weight: 700;
}
.tgl span:after {
  position: absolute;
  display: block;
  content: '';
  border-radius: 2em;
  width: 1.3em;
  height: 1.3em;
  margin-left: -1.45em;
  top: 6px;
  background: #FFFFFF;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 0.97), background 0.3s ease-in-out;
}
.tgl input[type="checkbox"] {
  display: none !important;
}
.tgl input[type="checkbox"]:not(:checked) + span {
  background: #E7E7EF;
  color: #9292B2;
}
.tgl input[type="checkbox"]:not(:checked) + span:before {
  content: attr(data-off);
  color: #9292B2;
}
.tgl input[type="checkbox"]:not(:checked) + span:after {
  background: #FFFFFF;
  left: 1.8em;
}
.tgl input[type="checkbox"]:checked + span {
  background: #000;
  color: #fff;
  padding-left: 0.4em;
  padding-right: 1.6em;
}
.tgl input[type="checkbox"]:checked + span:before {
  content: attr(data-on);
}
.tgl input[type="checkbox"]:checked + span:after {
  background: #FFFFFF;
  left: 94%;
}
.tgl input[type="checkbox"]:disabled,
.tgl input[type="checkbox"]:disabled + span,
.tgl input[type="checkbox"]:read-only,
.tgl input[type="checkbox"]:read-only + span {
  cursor: not-allowed;
}
.tgl-gray input[type="checkbox"]:not(:checked) + span {
  background: #e3e3e3;
  color: #999999;
}
.tgl-gray input[type="checkbox"]:not(:checked) + span:before {
  color: #999999;
}
.tgl-gray input[type="checkbox"]:not(:checked) + span:after {
  background: #ffffff;
}
.tgl-inline {
  display: inline-block !important;
  vertical-align: top;
}
.tgl-inline.tgl {
  font-size: 16px;
}
.tgl-inline.tgl span {
  min-width: 50px;
}
.tgl-inline.tgl span:before {
  line-height: 1.4em;
  padding-left: 0.4em;
  padding-right: 0.4em;
}
.tgl-inline-label {
  display: inline-block !important;
  vertical-align: top;
  line-height: 26px;
}

.simple-toggle {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  text-align: center;
  margin: auto;
}

.tile-title{color: #8A8C91;font-size: 12px;}
.time-duration{display: block;font-size: 26px;font-weight: 700;}

.time-duration .electricity-input {
    max-width: 100px;
    height: 32px;
    background: #f1f1f1;
    border: none;
    border-radius: 5px;}
.phase-options{margin: 0;padding: 0;}
.phase-options li{list-style: none;float: left;padding: 0 5px 0 0;}
.phase-options li a{font-size: 16px;
    font-weight: 600;
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    border: solid 1px #000;
    text-align: center;
    color: #000;
    line-height: 1.8;
    text-decoration: none;}

.phase-options li a.active{background: #000;color: #fff;}
.edit-btn{color: #000;}
.country-flag{margin-right: 5px;}
.advanced-settings-modal .container{padding: 0;}


.box select {
  background-color: #fff;
  color: #000;
  padding: 5px;
  width: 250px;
  border: none;
  font-size: 20px;
  -webkit-appearance: button;
  appearance: button;
  outline: none;
}

.box::before {
  content: "\f13a";
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  line-height: 45px;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.box:hover::before {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.2);
}

.box select option {
  padding: 30px;
}
.action-button-section{padding-top: 10px;}
.cancel-btn{display: inline-block;padding: 8px 15px;color: #000;}



/* E-commerce */
.product-box {
  padding: 0;

}

.product-imitation {
  text-align: center;
  padding: 10px 0;
  background-color: #fff;
  color: #bebec3;
  font-weight: 600;
}
.cart-product-imitation {
  text-align: center;
  padding-top: 30px;
  height: 80px;
  width: 80px;
  background-color: #f8f8f9;
}
.product-imitation.xl {
  padding: 120px 0;
}
.product-desc {
  padding: 5px;
  position: relative;
}
.ecommerce .tag-list {
  padding: 0;
}
.ecommerce .fa-star {
  color: #d1dade;
}
.ecommerce .fa-star.active {
  color: #f8ac59;
}
.ecommerce .note-editor {
  border: 1px solid #e7eaec;
}
table.shoping-cart-table {
  margin-bottom: 0;
}
table.shoping-cart-table tr td {
  border: none;
  text-align: right;
}
table.shoping-cart-table tr td.desc,
table.shoping-cart-table tr td:first-child {
  text-align: left;
}
table.shoping-cart-table tr td:last-child {
  width: 80px;
}
.product-name {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  display: block;
  margin: 2px 0 5px 0;
}
.product-name:hover,
.product-name:focus {
  color: #1ab394;
}
.product-cat {
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
  padding: 6px 12px;
  position: absolute;
  top: 5px;
  right: -10px;
}

.best-product{background: #40C774;}
.cost-eficient{background: #E0BE2F;}

.product-detail .ibox-content {
  padding: 30px 30px 50px 30px;
}
.image-imitation {
  background-color: #f8f8f9;
  text-align: center;
  padding: 200px 0;
}
.product-main-price small {
  font-size: 10px;
}
.product-images {
  margin: 0 20px;
}

.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox.collapsed .ibox-content {
  display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.ibox:after,
.ibox:before {
  display: table;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 3px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 14px 15px 7px;
  min-height: 48px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 10px;
  position: relative;
}
.ibox-footer {
  color: inherit;
  font-size: 90%;
  background: #ffffff;
  padding: 10px 15px;
}

.list-action{padding: 1em 0;}
.change-settings-btn{color: #000;
    font-size: 14px;
    border: solid 1px #000;
    padding: 5px 10px;
    margin: 0 1em;
  height: fit-content;}


.product-info{margin: 5px 0;padding: 0;display: inline-block;}
.product-info li{list-style: none;
    margin: 0;
    padding: 0;
    color: #9999C7;
    display: inline-block;
    float: left;
    font-size: 12px;
    padding: 5px;
    border: solid 1px #9999C7;
    margin: 1px;}

.product-points{font-size: 11px;padding: 3px 0;}
.product-points img{padding-right: 4px;margin-right: 1px;}

.product-column{background: #fff;border: solid 4px #f5f5f5;}


.popover{z-index: 10000;}
.popover-header{display: none;}
.tile-title .lnr{color: #000;font-weight: 600;display: inline-block;padding: 0 3px;}

.pump-info .card{border: none;}
.pump-info .card .card-body .card-text{margin: 0px;font-weight: 700;font-size: 12px;color: #9999C7;}
.energy-pricing span{font-size: 12px;}
.energy-values{padding: 10px 15px;}

.no-product-found{min-height: 500px;padding-top: 2em;}
.no-product-found h3{color: #c5c5c5;
    font-size: 3em;
    font-weight: 300;
    padding: 15px 0 0;}
.no-product-found p{color: #c5c5c5;}
.energy-cost-graph{
  position: absolute;
    background: #fff;
    padding: 5px;
    box-shadow: 0px 1px 5px 2px #e6e6e6;
    border-radius: 50px;
    top: -32px;
    width: 35px;
    height: 35px;
    text-align: center;}

/*---------------------------==============Media css================------------------------------*/

@media (max-width: 480px) {

#multistepform-progressbar{margin: 0;padding: 0;}
#multistepform-container{max-width: 100%;}
#multistepform-container .form{width: 100%;margin: 0;}
.owl-nav{display: none;}
.top-section img{width: 200px;}
.top-section{min-height: inherit;}
.info-label{justify-content: flex-start;}
.volumn-digit{position: inherit;height: inherit;}
.dimention-info, .select-country{width: 100%;max-width: 100%;}
.form-action{bottom: -5em;}
ul.ks-cboxtags li label{min-width: 80px;font-size: 12px;}
.usage-section{padding-top: 0em;}
.advanced-settings img{width: 20px!important;}
.time-duration{font-size: 15px;}
#multistepform-container{top: 15px;}
.modal.modal-top .modal-body, .modal.modal-bottom .modal-body {padding: 1px 15px;}

.list-action h5{text-align: center;padding-bottom: 15px;}
.advanced-settings img{width: 25px!important;}

}

@media (min-width: 481px) and (max-width: 767px) {

#multistepform-progressbar{margin: 0;padding: 0;}
#multistepform-container{max-width: 100%;}
#multistepform-container .form{width: 100%;margin: 0;}
.owl-nav{display: none;}
.top-section img{width: 200px;}
.top-section{min-height: inherit;}
.info-label{justify-content: flex-start;}
.volumn-digit{position: inherit;height: inherit;}
.dimention-info, .select-country{width: 100%;max-width: 100%;}
.form-action{bottom: -5em;}
ul.ks-cboxtags li label{min-width: 80px;font-size: 12px;}
.usage-section{padding-top: 0em;}
.advanced-settings img{width: 20px!important;}
.time-duration{font-size: 15px;}
#multistepform-container{top: 15px;}
.modal.modal-top .modal-body, .modal.modal-bottom .modal-body {padding: 1px 15px;max-width: 100%;}

.list-action h5{text-align: center;padding-bottom: 15px;}
.advanced-settings img{width: 25px!important;}



}

@media (min-width: 768px) and (max-width: 991px) {
.top-section img{width: 300px;}
.top-section{min-height: inherit;}
.volumn-digit{position: inherit;}
.top-section img{width: 300px;}
.top-section{min-height: inherit;}
.volumn-digit{position:inherit;}
.advanced-settings img{width: 25px!important;}

}


/* Styles added by developer */

.rangeslider__handle__value:after {
  content: " m";
}
.economic{background: #309de0;}