.elementor-1567 .elementor-element.elementor-element-33ff3fd{--display:flex;--background-transition:0.3s;--overlay-opacity:0.2;--margin-top:8%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1567 .elementor-element.elementor-element-33ff3fd::before, .elementor-1567 .elementor-element.elementor-element-33ff3fd > .elementor-background-video-container::before, .elementor-1567 .elementor-element.elementor-element-33ff3fd > .e-con-inner > .elementor-background-video-container::before, .elementor-1567 .elementor-element.elementor-element-33ff3fd > .elementor-background-slideshow::before, .elementor-1567 .elementor-element.elementor-element-33ff3fd > .e-con-inner > .elementor-background-slideshow::before, .elementor-1567 .elementor-element.elementor-element-33ff3fd > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-1567 .elementor-element.elementor-element-12aeab6 > .elementor-widget-container{margin:-124px 0px -124px 0px;padding:0px 0px 0px 0px;}.elementor-1567 .elementor-element.elementor-element-d262548{--display:flex;--background-transition:0.3s;--border-radius:10px 10px 10px 10px;--margin-top:12%;--margin-bottom:10%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1567 .elementor-element.elementor-element-d262548.e-con{--align-self:center;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-1567 .elementor-element.elementor-element-a8b90e6 > .elementor-widget-container{padding:50px 0px 0px 0px;}.elementor-1567 .elementor-element.elementor-element-a8b90e6{text-align:center;}.elementor-1567 .elementor-element.elementor-element-a8b90e6 .elementor-heading-title{color:#000000;font-family:"Manrope", Sans-serif;font-weight:700;}.elementor-1567 .elementor-element.elementor-element-b83da12{width:var( --container-widget-width, 720px );max-width:720px;--container-widget-width:720px;--container-widget-flex-grow:0;}.elementor-1567 .elementor-element.elementor-element-b83da12 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:24px 24px 24px 24px;border-radius:10px 10px 10px 10px;}.elementor-1567 .elementor-element.elementor-element-b83da12.elementor-element{--align-self:center;}.elementor-1567 .elementor-element.elementor-element-b83da12.ha-has-bg-overlay > .elementor-widget-container:before{opacity:0.5;transition:background 0.3s;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1567 .elementor-element.elementor-element-d262548{--width:720px;}}@media(max-width:767px){.elementor-1567 .elementor-element.elementor-element-12aeab6 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1567 .elementor-element.elementor-element-d262548{--width:85%;}.elementor-1567 .elementor-element.elementor-element-b83da12{--container-widget-width:720px;--container-widget-flex-grow:0;width:var( --container-widget-width, 720px );max-width:720px;}}/* Start custom CSS for html, class: .elementor-element-12aeab6 */body {
     background: url('https://baltisolar.fr/wp-content/uploads/2025/05/bg2.jpg') no-repeat center center/cover;
      
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    }

     .puissance-affichee {
      color: white;
      font-size: 18px;
      padding-right: 15px;
      margin: 0px;
    }

    .heading-container {
      text-align: center;
      margin: 20px;
      z-index: 1;
    }
    
    .battery-free {
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        display: none; 
        color: black;
        text-align: center;
        z-index: 1;
    }
    
    .battery-free h3{
        font-family: "manrope", Sans-Serif;
        font-weight: 600;
        font-size: 24px !important;
        margin-bottom: 0px !important;
    }
    
    .battery-free p{
        font-family: "manrope", Sans-Serif;
        font-weight: 300;
        font-size: 16px !important;
        margin-top: 0px !important;
    }

    .main-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      z-index: 1;
      padding-bottom: 0rem;
    }

    .form-container {
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      max-width: 720px;
      width: 100%;
      z-index: 1;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.6);
      border: 0px solid rgba(255, 255, 255, 0.3);
    }

    form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      z-index: 1;
    }

    input[type="text"] {
      padding: 0.5rem;
      font-size: 1rem;
      width: 100%;
      box-sizing: border-box;
      z-index: 1;

    }

    .full-width {
      grid-column: 1 / -1;
      text-align: center;
      margin-top: 1rem;
      z-index: 1;
    }

    button {
      padding: 0.6rem 2rem;
      font-size: 1rem;
      cursor: pointer;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      z-index: 1;
    }

    button:hover {
      background-color: #0056b3;
      z-index: 1;
    }

    .panneaux,
    .puissance {
      background-color: black;
      display: flex;
      padding: 0.5rem;
      justify-content: space-between;
      height: 80px;
      align-items: center;
      border-radius: 12px;
      padding-left: 18px;
    }

    .batterie-form {
      background-color: black;
      height: 80px;
      padding: 0.5rem;
      border-radius: 12px;
      width: 40%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .checkbox {
      background-color: green;
      width: 100px;
    }

    .result {
      display: flex;
      margin: 0 0;
      z-index: 1;
    }

    label {
      color: white;
      font-family: "Manrope", sans-serif;
      font-size: 12px;
    }

    .nombre-panneaux {
      width:70px !important;
      height: 40px;
      border-radius: 8px !important;
      margin-right: 8px;
    }

    .puissance-input {
      width: 90px !important;
      height: 40px;
      border-radius: 8px !important;
      margin-right: 8px;

    }

    .result-container {

      z-index: 1;
      margin-top: 50px;
    }

    .table-container {
      z-index: 1;
    }

    .result-box {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.1);
      //border: 2px solid rgba(255, 255, 255, 0.3);
      background-color: black;
      gap: 0;
      border-radius: 15px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 400px;
      margin: 1rem;
      padding-top: 12px;
      padding-bottom: 12px;
    }
    
    .header {
        color: black;
        text-align: center;
        z-index: 1;
        font-family: "manrope", Sans-Serif;
        font-weight: 800;
        font-size: 30px !important;
    }
    
    .result-p, .result-box {
        color: black;
        text-align: center;
        z-index: 1;
        font-family: "manrope", Sans-Serif;
    }
    
    .heading-content {
        color: black;
        text-align: center;
        z-index: 1;
        font-family: "manrope", Sans-Serif;
        font-size: 12px;
    }
    
    
    

    .battery-container {
      width: 200%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 2rem;
    }


    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* The switch container */
    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
    }

    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
      transition: 0.4s;
      border-radius: 34px;
    }

    /* Circle inside the slider */
    .slider::before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: black;
      transition: 0.4s;
      border-radius: 50%;
    }

    .result-p {
      color: white;
      padding: 0;
      margin: 0px;
      font-size: 12px;
    }

    .result-value {
      padding: 0;
      color: white;
      font-weight: 600;
      font-size: 24px;
      margin: 0;
    }

    /* Checked state */
    input:checked+.slider {
      background-color: #a8a8a8;
    }

    input:checked+.slider::before {
      transform: translateX(24px);
      background-color: white;
      box-shadow: 0 0 5px black;
    }

    .custom-checkbox input:checked+.checkmark::after {
      display: block;
    }
    
    @media (max-width: 768px) {
  .main-container {
    height: auto;
    padding: 1rem;
  }

  .form-container {
    padding: 1rem;
    max-width: 95%;
  }

  form {
    grid-template-columns: 1fr; /* Stack inputs vertically */
  }

  .battery-form {
    width: 100%;
    flex-direction: column;
    height: auto;
    gap: 0.5rem;
  }

  .batterie-form {
    width: 100%;
    flex-direction: column;
    height: auto;
    gap: 0.5rem;
  }

  .panneaux,
  .puissance {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    height: auto;
  }

  .nombre-panneaux,
  .puissance-input {
    width: 50% !important;
    align-items:center;
    justify-content:center;
    text-align: center !important;
  }

  .checkbox {
    width: 100%;
  }

  .result-box {
    width: 100%;
    margin: 0.5rem ;
  }

  .battery-container {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
  }
  

  button {
    width: 100%;
  }

  .heading-content,
  .result-p,
  .result-value {
    font-size: 1rem;
  }

  .header {
    font-size: 1.5rem;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d262548 */.test {
    backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      background: rgba(255, 255, 255, 0.6) !important;
}



.forminator-button {
    background-color: black !important;
    border-radius: 10px !important;
    padding: 1.2rem 4rem !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 70% !important;
}/* End custom CSS */