.elementor-16070 .elementor-element.elementor-element-36d59fc3{--display:flex;}.elementor-16070 .elementor-element.elementor-element-6e7ac20{--display:flex;}.elementor-16070 .elementor-element.elementor-element-9206546{--spacer-size:50px;}.elementor-16070 .elementor-element.elementor-element-d880f1d{width:100%;max-width:100%;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for html, class: .elementor-element-d880f1d */:root {
  --input-bg-color: #1a1a1a;
  --input-padding: 12px 16px;
  --input-border-radius: 4px;
  --input-font-size: var(--e-global-typography-text-font-size) !important;
  --input-transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.scanner-container {
  background: radial-gradient(67.49% 51.42% at 13.37% 8.39%, rgba(191, 207, 237, 0.25) 22.5%, rgba(191, 207, 237, 0.00) 100%),
            radial-gradient(64.37% 74.09% at 92.71% 100%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.00) 100%);
  margin: 0 auto;
  line-height: 1.6;
  align-items: flex-start; /* Align to top */
  font-family: var(--e-global-typography-text-font-family);
  color: var(--e-global-color-secondary);
  border-radius: 10px; /* Slightly increased for better visual */
  padding: var(--spacing-large);
  /* Adjusted box-shadow for a more prominent glow */
  box-shadow: 0 0 25px rgba(0, 229, 153, 0.4);
  animation: pulse-glow 2s infinite ease-in-out; /* Add the animation */
}

.scanner-header {
  display: block !important; /* Enable flexbox */
  justify-content: space-between; /* Push title left, buttons right */
  margin-bottom: 16px; /* Add some space below the header */
  border-bottom: 1px solid var(--input-bg-color); /* Optional: Add a bottom border */
}

.scanner-title {
  color: white;
  font-size: 32px !important;
  font-family: "Helvetica Neue Bold" !important;
  text-align: left !important; 
}

.tab-buttons {
  display: flex; /* Make buttons flex items */
  gap: 10px; /* Add space between buttons */
}


.text-field-input {
  color: var(--e-global-color-text);
  padding: var(--input-padding);
  background-color: var(--input-bg-color);
  border: 1px solid var(--e-global-color-secondary);
  border-radius: var(--input-border-radius);
  font-family: var(--e-global-typography-text-font-family);
  font-size: var(--input-font-size);
  outline: none;
  transition: var(--input-transition);
  width: 65%;
}

.text-field-input:focus {
  border-color: #33ffc2; /* fallback highlight color */
  box-shadow: 0 0 8px rgba(0, 229, 153, 0.5);
}


@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Progress bar animation */
@keyframes progress {
  0% {
      width: 0%;
  }
  100% {
      width: 100%;
  }
}

@keyframes pulse-glow {
  0% {
      box-shadow: 0 0 25px rgba(0, 229, 153, 0.4);
  }
  50% {
      box-shadow: 0 0 35px rgba(0, 229, 153, 0.6); /* Increase spread and opacity */
  }
  100% {
      box-shadow: 0 0 25px rgba(0, 229, 153, 0.4);
  }
}

.scanner-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;      /* Center horizontally */
  justify-content: center;  /* Center vertically */
  height: 100%;
  width: 100%;
  text-align: center;       /* Center text inside */
  min-height: 120px;        /* Ensures vertical centering even if parent is short */
}

.scanner-loading-text {
  margin: 0 auto;
  text-align: center;       /* Center the scanning text */
  width: 100%;
  animation: pulse 1.5s infinite ease-in-out; /* Add pulse animation */
}

.scanner-progress-bar {
  width: 100%;
  height: 10px;
  background-color: rgba(0, 229, 153, 0.2); /* Light green background */
  border-radius: 5px;
  overflow: hidden;
  margin-top: 20px;
}

.scanner-progress-bar-inner {
  height: 100%;
  background-color: var(--e-global-color-secondary); /* Solid green */
  width: 0%; /* Start at 0% */
  animation: progress 1.5s ease-in-out infinite; /* Animate progress */
}

.scanner-subtitle {
  color: var(--e-global-color-text);
  margin-bottom: var(--spacing-small)
}

.ip-scanner-input-section {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
}

.ip-scanner-results-section {
  background-color: var(--input-bg-color);
  /* border: 1px solid var(--e-global-color-secondary); */
  border-radius: 4px;
  padding: 16px;
  min-height: 150px; /* Adjust min-height if needed */
  font-size: 0.80em; /* Slightly smaller font for more density */
  display: grid; /* Use grid for columns */
  /* grid-template-columns: repeat(3, 1fr);  */
  gap: 25px; /* Gap between columns */
  align-items: start; /* Align items to the start of each column cell */
  overflow: auto; /* Add scrollbars if content overflows */
  max-height: 400px; /* Optional: Set a max-height to prevent excessive growth */
}


.ip-scanner-results-section .placeholder {
  /* Make placeholder span all columns and center */
  grid-column: 1 / -1;
  text-align: center;
  color: var(--placeholder-color);
  font-style: italic;
  align-self: center; /* Center vertically */
  padding: 20px 0;
}

.ip-scanner-placeholder-result-column {
  opacity: 0.3;
  filter: blur(1px);
}

.ip-scanner-result-column {
  /* Style for the column container if needed, but grid handles layout */
  display: flex;
  flex-direction: column;
  gap: 8px; /* Space between items within a column */
}


.ip-scanner-result-item {
  /* Each item is now just the key-value pair display */
  display: flex; /* Use flex for key-value alignment */
  justify-content: space-between; /* Push key left, value right */
  padding-bottom: 8px;
  gap: 10px; /* Gap between key and value */
}

.ip-scanner-result-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ip-scanner-result-key {
  font-weight: 700;
  color: #ccc; /* Slightly lighter grey for keys */
  text-transform: capitalize; /* Capitalize keys */
  white-space: nowrap; /* Prevent key from wrapping */
  flex-shrink: 0; /* Prevent key from shrinking */
}

.ip-scanner-result-value {
  word-wrap: break-word; /* Alias for overflow-wrap */
  overflow-wrap: break-word; /* Ensure long words break and wrap */
  color: var(--e-global-color-secondary);
  text-align: right; /* Align value to the right */
  flex-grow: 1; /* Allow value to take remaining space */
  min-width: 0; /* Important for flex items to allow wrapping */
}

.ip-scanner-result-value.boolean-true {
  color: red;
  font-weight: bold;
}

.ip-scanner-result-value.boolean-false {
  color: var(--e-global-color-secondary); 
  font-weight: bold;
}

.ip-scanner-error-section {
  margin-top: 20px;
  padding: 15px;
  background-color: rgba(255, 77, 77, 0.1); /* Light red background */
  border: 1px solid red;
  color: red;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}

.button-filled {
  width: 110px;
  background-color: var(--e-global-color-secondary);
  padding: var(--input-padding);
}

.button-filled:hover {
  background-color: var(--e-global-color-secondary);
  color: black;
}

.input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    width: 65%;
}
@media (max-width: 768px) {
  .ip-scanner-input-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .text-field-input {
    box-sizing: border-box;
  }

  .button-filled {
    padding: var(--input-padding);
    width: 100%;
  }
  
  .input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    width: 100%;
}
}/* End custom CSS */