.elementor-197453 .elementor-element.elementor-element-6344c9b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-197453 .elementor-element.elementor-element-dc8150a{text-align:center;}.elementor-197453 .elementor-element.elementor-element-dc8150a .elementor-heading-title{font-size:50px;color:#3A8D5E;}.elementor-197453 .elementor-element.elementor-element-d2c7c3c.elementor-element{--align-self:center;}.elementor-197453 .elementor-element.elementor-element-f6703c4{--display:flex;}.elementor-197453 .elementor-element.elementor-element-77dd3aa{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-197453 .elementor-element.elementor-element-9a68043{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-197453 .elementor-element.elementor-element-9a68043 .elementor-divider-separator{width:100%;}.elementor-197453 .elementor-element.elementor-element-9a68043 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-197453 .elementor-element.elementor-element-997906e{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-197453 .elementor-element.elementor-element-77dd3aa{--grid-auto-flow:row;}.elementor-197453 .elementor-element.elementor-element-997906e{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-197453 .elementor-element.elementor-element-77dd3aa{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-197453 .elementor-element.elementor-element-997906e{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-d2c7c3c *//* Container for alignment */
.system-uom-toggle-wrapper {
  display: inline-block;
  margin: 10px;
}

/* Hide the actual checkbox */
.system-uom-toggle-input {
  display: none;
}

/* --- The Pill (Label) --- */
.system-uom-toggle-label {
  /* Dimensions of the full pill */
  display: flex;
  align-items: center;
  position: relative;
  width: 140px; /* Width of the pill */
  height: 30px; /* Height of the pill */
  border-radius: 20px; /* Half of height for the perfect pill shape */
  cursor: pointer;
  
  /* Default (Off) State Styles */
  background-color: #3c5ea5; /* system-uom Blue */ /* Off color (light gray) */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset; /* Subtle inner shadow */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- The Sliding Circle (Thumb) --- */
.system-uom-toggle-thumb {
  position: absolute;
  /* Dimensions of the circular thumb */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  
  /* Thumb Color and Shadow */
  background-color: #fff; /* White thumb */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  
  /* Initial (Off) Position */
  left: 4px; /* Space from the edge of the pill */
  
  /* Animation for sliding */
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.5, 0, 0.5, 1); /* system-uom-like curve */
}

/* --- Text Labels (Optional but nice) --- */
.system-uom-toggle-text {
  position: absolute;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  user-select: none;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.system-uom-toggle-text.off {
  right: 18px;
  opacity: 1; /* Visible in off state */
}

.system-uom-toggle-text.on {
  left: 12px;
  opacity: 0; /* Hidden in off state */
  color: #fff; /* White text for on state */
}


/* =========================================
   ON STATE: Triggered by :checked
   ========================================= */

.system-uom-toggle-input:checked + .system-uom-toggle-label {
  /* On State Background Color */
  background-color: #008345; /* system-uom Blue */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
}

.system-uom-toggle-input:checked + .system-uom-toggle-label .system-uom-toggle-thumb {
  /* Slide the thumb to the right */
  /* Calculation: Pill Width (100) - Thumb Width (32) - (Left Padding * 2) = 64px */
  transform: translateX(100px); 
}

/* Text visibility toggle for On State */
.system-uom-toggle-input:checked + .system-uom-toggle-label .system-uom-toggle-text.off {
  opacity: 0; /* Hide 'Off' text */
}

.system-uom-toggle-input:checked + .system-uom-toggle-label .system-uom-toggle-text.on {
  opacity: 1; /* Show 'On' text */
}

/* Container to hold the label and the toggle side-by-side */
.toggle-row-container {
    display: flex;
    /* Aligns the label text and the toggle pill vertically */
    align-items: center;
    /* Controls the space between the label and the toggle */
    gap: 15px; 
    
    margin-bottom: 15px; /* Add vertical space below the row */
}

/* Style for the descriptive label */
.descriptive-label {
    /* Ensures the text has the expected spacing and visual style */
    font-size: 16px;
    font-weight: 500;
    color: #333;
    cursor: pointer; /* Inherit the pointer for clickability */
}

/* Ensure the original toggle wrapper stays inline */
.system-uom-toggle-wrapper {
    display: inline-block;
}/* End custom CSS */