@media (max-width: 700px)
{
   .esconder-mobile{
       display: none !important;
   }
}
.lista-diferenciais li{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px
}
    .lista-diferenciais p{
    font-size: 23px;
    font-weight: 600;
}
.calculo-conta div.col-md-7  {
    text-align: center;
    padding: 40px 25px;
    border: 1px solid white;
    border-radius: 25px
}
.calculo-conta h3{
    font-size: 35px;
    font-weight: 600;
}
.calculo-conta input{
    width: 100%;
    margin: 50px 0 0px;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]:focus {
  outline: none;
}
body#light input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb{
    color: #FF9425
}
body#light input[type="range"]::-webkit-slider-thumb{
    background-color: #FF9425
}
body#light input[type="range"]:focus::-webkit-slider-thumb{
    outline: 3px solid #FF9425;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: #a4aaad;
  border-radius: 0.5rem;
  height: 0.5rem;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  margin-top: -8px; 
  background-color: var(--theme);
  border-radius: 3.5rem;
  height: 1.5rem;
  width: 1.5rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
  outline: 3px solid var(--theme);
  outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: #a4aaad;
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  background-color: var(--theme);
  border: none; /*Removes extra border that FF applies*/
  border-radius: 3.5rem;
  height: 1.5rem;
  width: 1.5rem;
}

input[type="range"]:focus::-moz-range-thumb{
  outline: 3px solid var(--theme);
  outline-offset: 0.125rem;
}
#valorConta, #valorConta>span{
 font-size: 30px;
    margin-bottom: 10px
}
#planoSelecionado, #planoSelecionado>span{
    font-size: 28px
}
#planoSelecionado>span, #economiaMensal>span, #economiaAnual>span{
    color: var(--theme)
}
#economiaMensal, #economiaMensal>span{
    font-size: 24px
}
#economiaAnual, #economiaAnual>span{
    font-size: 28px
}
.calculo-conta div.col-md-5{
    display: grid
}
.calculo-conta div.col-md-5 div{
    text-align: center;
    display: block;
    border: 1px solid white;
    margin-bottom: 15px;
    border-radius: 20px;
    padding: 15px 30px;
    transition: 500ms
}
.calculo-conta div.col-md-5 div>div{
    text-align: center;
    display: flex;
    border: none;
    justify-content: space-around;
    margin-bottom:0
}
.calculo-conta div.col-md-5 div.plano-selecionado{
    border-color: var(--theme);
    box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 50px -5px;
}
#cta{
    background-image: url("../img/index/bg_cta.jpg");
    padding: 90px 10px;
}
#cta .container{
     z-index: 5;
    position: relative;
}
#cta .container h3{
    font-size: 44px;
    margin-bottom: 20px;

} #cta .container h3>span{
    color: var(--theme);
    font-size: 44px
}
#cta .getin-touch{
    border: 1px solid var(--white);
    border-radius: 8px;
    transition: all 0.5s;
}
#cta .getin-touch:hover{
    border-color: var(--theme);
    color: var(--theme);
}
#cta .getin-touch:hover .icons{
    transform: rotate(-35deg);
}
.lista-numeros{
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-top: 35px
}
.lista-numeros li{
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    padding-left: 15px
}
.lista-numeros li::before{
    content: '';
    position: absolute;
    left: 0px;
    top: -100%;
    width: 3px;
    height: 100%;
    background-color: var(--theme);
    transition: 400ms
}
.lista-numeros li:hover::before{
    top: 0
}
.como-funciona{
    padding: 40px 0 80px
}
.card-como-funciona{
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
    position: relative;
    background: #1B1B1B;
    padding: 20px 15px;
    border: 1px solid var(--spantext);
    border-radius: 20px;
    box-shadow: rgba(255, 255, 255, 0.12) 0px 1px 3px, rgba(255, 255, 255, 0.24) 0px 1px 2px;
}
 .como-funciona .container .row:first-child .card-como-funciona::before{
    content: '';
    position: absolute;
    width: 60%;
    height: 180px;
    border-top: 4px dashed var(--spantext);
    border-right: 4px dashed var(--spantext);
    bottom: -65%;
    right: -20%;
    border-radius: 15px;
    z-index: -1
}
 .como-funciona .container .row:nth-child(2) .card-como-funciona::before{
    content: '';
    position: absolute;
    width: 60%;
    height: 180px;
    border-top: 4px dashed var(--spantext);
    border-left: 4px dashed var(--spantext);
    bottom: -65%;
    left: -20%;
    border-radius: 15px;
    z-index: -1
}
.card-como-funciona .passo, .card-como-funciona .conteudo{
    position: relative;
    z-index: 2
}
.card-como-funciona .passo{
    font-size: 40px;
    font-weight: 900;
    background: #E3FF00;
    background: linear-gradient(to right, rgb(227,255,0), rgb(227,255,0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    margin-top: 5px
} 
@media screen and (max-width:700px){
    .como-funciona .container .row:first-child .card-como-funciona::before,
    .como-funciona .container .row:nth-child(2) .card-como-funciona::before{
        width: 50%;
        left: 0;
        bottom: -25%
    }
    .como-funciona .container .row:nth-child(2) .card-como-funciona::before{
       border-left: 0;
       border-right: 4px dashed var(--spantext);

    }
}
.case-study-section .painel .col-md-8{
    margin-top: 80px
}
.case-study-section #mensal.col-md-4,
.case-study-section #anual.col-md-4,
.case-study-section #semestral.col-md-4{
    padding: 15px;
    cursor: pointer
}
.case-study-section .col-md-4 div{
    padding: 20px 10px;
    border-radius: 20px;
    background: #1B1B1B;
    transition: 100ms
}
.case-study-section .plano-selecionado.col-md-4 div{
    box-shadow: rgba(227, 255, 0, 0.45) 0px 25px 20px -20px;
    border-bottom: 3px solid #1B1B1B;
}
@media screen and (max-width:1400px){
    .header-section .main-navbar .custom-nav .menu-item button, .header-section .main-navbar .custom-nav .menu-item a, .header-section .main-navbar .custom-nav .menu-link button, .header-section .main-navbar .custom-nav .menu-link a{
        font-size: 12px !important
    }
}
.finul-result h4.white-clr, .case-study-detials-inner h4.white-clr{
    position: relative;
    width: fit-content;
    padding-bottom: 5px;
    overflow: hidden
}
.finul-result h4.white-clr::before, .case-study-detials-inner h4.white-clr::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--theme);
    bottom: 0;
    left: -100%;
    transition: 400ms
}
.finul-result h4.white-clr:hover::before, .case-study-detials-inner h4.white-clr:hover::before{
    left: 0
}
.calculo-conta input[type=text], .calculo-conta input[type=date], .calculo-conta input[type=password],.calculo-conta input[type=email], .calculo-conta select{
    color: #fff;
    background: #353535;
    padding: 7px 20px;
    border-radius: 15px;
    border: none;

}
.customer-active{
    font-size: 21px !important;
    font-weight: 400
}
.customer-active>span{
    color: var(--theme);
    font-size: 21px !important
}
.login{
    height: 100vh;
    background: url('assets/img/team/team-stafbg.png') no-repeat center center;
    padding-top: 30vh;
    overflow-y: scroll;
}
.login h1{
    font-size: 70px;

}
.login h1>span{
    font-size: 70px;
    color: var(--theme);
    text-decoration: underline
}
.ainda-nao-sou-cliente{
    font-weight: 800
}
.ainda-nao-sou-cliente>a{
    color: var(--theme);
    text-decoration: underline;
    font-weight: 400
}
.login .bg-login{
    position: absolute;
    width: 100vw;
    height: 130vh;
    left: 0px;
    top: -25vh;
    background: rgb(209 209 209 / 5%);
    box-shadow: 0 4px 30px rgb(0 0 0 / 47%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.login-form{
    position: relative;
    z-index: 1;
    justify-content: center;
    text-align: center;
    margin-top: -80px
}
.login-form h2{
    color: #fff;
    font-weight: 700;
    font-size: 45px
}
.form-group{
    display: grid;
    margin-top: 30px;
    text-align: left;
    padding: 0 40px;
    margin-bottom: 10px
}
.form-group label{
    color: #fff;
    margin-bottom: 5px
}
.input-form{
    border-radius: 10px;
    border: 3px solid var(--border1);
    color: black !important;
    padding: 7px
}
.esqueci-senha{
    text-decoration: underline
}
.esqueci-senha:hover, .esqueci-senha:hover a{
    color: var(--theme)
}
.login .getin-touch{
    border: 1px solid var(--white);
    border-radius: 8px;
    transition: all 0.5s;
}
.login .getin-touch:hover{
    border-color: var(--theme);
    color: var(--theme);
}
.login .getin-touch:hover .icons {
    transform: rotate(-35deg);
}
.login-form img{
        width: 400px
    }
@media screen and (max-width:980px){
    .login{
        width: inherit;
        height: inherit;
        padding-top: 10vh;
    }
    .bg-login{
        display: none
    }
    .login-form{
        margin-top: 20px
    }
    .login-form img{
        width: 320px
    }
    .login h1{
        font-size: 55px;
        margin-top: 20px
    }
    .login h1>span{
        font-size: 55px;
    }
    .form-group{
        padding: 0 15px
    }
}
.hero-section-version2{
    font-size: 90px;
    text-transform: none
}
a.como-funciona-parceiro{
    margin-top: 80px !important
}
.hero-section-version2 .getin-touch, .about-product .getin-touch, footer .getin-touch, a.como-funciona-parceiro{
    border: 1px solid var(--white);
    border-radius: 8px;
    transition: all 0.5s;
}
.hero-section-version2 .getin-touch, .about-product .getin-touch, footer .getin-touch, a.como-funciona-parceiro{
    margin: 0px;
    transition: all 0.4s ease-in-out;
    font-size: 16px;
    font-family: "Manrope", sans-serif;
    color: var(--white);
}
.hero-section-version2 .getin-touch:hover, .about-product .getin-touch:hover, footer .getin-touch:hover, a.como-funciona-parceiro:hover{
    border-color: var(--theme);
    color: var(--theme);
}
.hero-section-version2 .getin-touch:hover .icons, .about-product .getin-touch:hover .icons, footer .getin-touch:hover .icons, a.como-funciona-parceiro:hover .icons{
    transform: rotate(-35deg);
}
@media screen and (max-width:1200px){
    .hero-section-version2{
        font-size: 60px
    }
}
@media screen and (max-width:700px){
    .hero-section-version2{
        font-size: 40px
    }
}
.lista-diferenciais img{
    width: 50px
}
.offer-sectionv02 img{
    width: 80px
}
@media screen and (max-width:700px){
    .calculo-conta div.col-md-5 div{
        padding: 15px 0;
    }
    .calculo-conta div.col-md-5 div:first-child{
        margin-top: 25px
    }
}
.text-justify{
    text-align: justify !important
}
@media screen and (max-width:700px){
    #bannerContent{
        margin-top: 0 !important
    }
}
.header-section .main-navbar .custom-nav .menu-item button::after {
    position: absolute;
    content: "\f062";
    font-family: "FontAwesome";
    font-weight: 500;
    font-size: 16px;
    left: 0px;
    transition: all 0.1s ease;
    transform: rotate(60deg);
}
header img{
    width: 100%;
}
.containerLogo{
    width: 15%
}
.btn-contrateNav{
    border: 1px solid white;
    padding: 9px 13px;
    border-radius: 4px;
    position: absolute;
    overflow: hidden !important;
    width: 190px;
    background-color: var(--theme);
}
.btn-contrateNav:hover{
    background-color: transparent;
}
.btn-contrateNav span{
    z-index: 3;
    position: relative;
    transition: 300ms;
    color: black
}
.btn-contrateNav:hover span{
    color: white !important;
    background: transparent;
}
.btn-contrateNav::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-color: transparent;
    transition: 300ms
}
.btn-contrateNav:hover::before{
    left: 0
}
.botaocontratar{
    width: 200px;
    margin-top: -10px;
}
#areaCliente{
    margin-top: 85px;
    padding: 50px 0;
    background: #151515
}
#areaCliente nav{
    border-radius: 10px;
    padding: 15px;
    background: #222322;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    position: fixed
}
#areaCliente h1, h2,h3,h4,h5,h6,a{
    color: white
} 
#areaCliente nav h4{
    padding: 10px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border1)
}
#areaCliente nav h4>span{
    color: var(--theme);
    font-size: 26px
}
#areaCliente ul li{
    margin-bottom: 15px;
    padding-left: 15px
}
#areaCliente ul li a>i{
    width: 40px;
    text-align: start;
    font-size: 27px
}
#areaCliente ul li:last-child a>i{
    transform: scaleX(-1); 
    position: relative; 
    left: -12px
}
#areaCliente .instalacao{
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    background: #222322;
    position: relative;
    cursor: pointer;
    display: flex;
}
#areaCliente .instalacao i{
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 25px 
}
#historicoGastos, .faturas{
    padding: 20px 15px 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    background: #222322;;
    margin-bottom: 20px
}
#historicoGastos .grafico{
    align-content: flex-end;
    padding: 0px 15px;
    margin-top: 20px;
    padding-top: 400px;
}
#historicoGastos .grafico div{
    border-top: 3px solid var(--border1);
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative
}
.graph-bar{
    width: 50%;
    height: 160px;
    background: #667300;
    position: absolute !important;
    bottom: 123%;
    transition: 300ms;
    border: none !important
}
.graph-bar:hover{
    background: var(--theme)
}
.graph-bar span{
    margin-top: -40%;
    opacity: 0;
    transition: 300ms;
    font-weight: 800
}
.graph-bar:hover span{
    opacity: 1;
}
h4{
    position: relative;
    width: fit-content;
    overflow: hidden;
    transition: 350ms
}
h4::after{
    position: absolute;
    content: '';
    width: 0%;
    height: 2px;
    background-color: var(--theme);
    left: 0;
    bottom: 0;
    transition: 350ms
}
h4:hover::after{
    width: 100%;
}

@media screen and (max-width:980px){
    #areaCliente nav{
        position: relative;
        margin-bottom: 20px
    }  
    #areaCliente nav img{
        left: -20px
    }
    .faturas tbody tr td:first-child{
        text-align: start;
        padding-left: 10px
    }
    .graph-bar span{
        margin-top: -80%
    }
}
.instalacao>i{
    transition: 100ms
}
.instalacao.ativo>i{
    transform: rotate(90deg);
    transition: 300ms
}
.instalacoes{
    position: absolute;
    margin-top: 70px;;
    background: #222322;
    width: 100%;
    left: 0;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;;
    height: 0;
    overflow: hidden;
    transition: 300ms;
    border-radius: 10px;
    z-index: 1
}
.instalacoes.ativo{
    height: max-content;
    padding-bottom: 10px
}
.instalacoes ul li{
    padding: 7px 15px !important;
    margin-bottom: 5px !important
}
.instalacoes ul li a i{
    position: inherit !important;
    width: auto !important;
    margin-right: 7px
}
.instalacoes ul li:hover{
    background-color: #1A1A1A
}
#areaCliente ul li:hover a{
    color: var(--theme)
}
#instalacao>h4::after{
    position: inherit
}
.faturas table{
    width: 100%;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.faturas thead tr{
    background: #1A1A1A;
}
.faturas thead tr th{
    padding: 10px 0;
    font-size: 18px
}
.faturas thead tr>th:first-child{
    border-radius: 15px 0 0 0px
}
.faturas thead tr>th:last-child{
    border-radius: 0 15px 0  0 
}
.faturas table tr,td,th{
    text-align: center
}
.faturas td{
    padding: 5px 0;
   /* font-weight: 600;
    font-size: 16px*/
}
.faturas img{
    width: 60px;
    object-fit: contain;
}
.faturas tbody tr{
    transition: 300ms
}
.faturas tbody tr:nth-child(even){
    background: #1e1e1e
}
.faturas tbody tr:last-child td:first-child{
    border-radius: 0 0 0 15px
}
.faturas tbody tr:last-child td:last-child{
    border-radius: 0 0 15px 0 
}
.faturas tbody tr:hover td{
    background: #1A1A1A;
}
 .modal-content{
    background-color: #1b1b1b
}
.modal h5{
    color: White
}
.modal-header{
    border-bottom: none
}
.modal .faturas{
    margin-top: 0;
    padding: 0
}
.modal .faturas table tbody tr td:last-child{
    color: var(--theme)
}
.instalacoes-wrapper{
    height: auto;
    transition: 400ms;
    position: relative;
    overflow: hidden
}
.faturas.position-relative{
    transition: 400ms
}
 .adicionar-instalacao{
                position: absolute;
                top: 0;
                transform: translateX(105%);
                transition: 400ms;
                background-color: #1B1B1B
              }
              .adicionar-instalacao input{
                  width: 100%;
                  margin: 50px 0 20px;
              }
              .adicionar-instalacao input[type=text]{
                  color: #fff;
                  background: #353535;
                  padding: 7px 20px;
                  border-radius: 15px;
                  border: none;
              }
              .buttons-instalacoes{
                  width: 100%;
                  display: flex;
                  justify-content: flex-end;
                  gap: 15px;
                  margin-top: 15px
              }
              .modal-content{
                  transition: 400ms
              }
.buttons-instalacoes button {
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-family: arial,sans-serif;
  font-size: 14px;
  height: 36px;
  line-height: 27px;
  min-width: 54px;
  padding: 0 16px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: pre;
  transition: 300ms
}
.buttons-instalacoes button:first-child{
    color: white
}
 button.btn1{
     border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-family: arial,sans-serif;
  font-size: 22px;
  height: 36px;
  line-height: 27px;
  min-width: 54px;
  padding: 0 16px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: pre;
  transition: 300ms;
 background: rgba(25, 135, 84) 
}
button.btn1:hover{
    background: #0e4b2e
}
.buttons-instalacoes button:first-child:hover{
     background: #af2936 !important
}

.buttons-instalacoes button:hover {
  border-color: #dadce0;
  box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;
   background: #0e4b2e !important
}

.buttons-instalacoes button:focus {
  border-color: #4285f4;
  outline: none;
}
.text-center{
    text-align: center !important;
    text-align: -webkit-center !important
}