.elementor-1822 .elementor-element.elementor-element-fae8a7:not(.elementor-motion-effects-element-type-background), .elementor-1822 .elementor-element.elementor-element-fae8a7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5813E;background-image:url("https://spiderit.lol/wp-content/uploads/2025/02/digial-download-store-cta-vector-image-background.svg");}.elementor-1822 .elementor-element.elementor-element-fae8a7 > .elementor-container{max-width:1250px;}.elementor-1822 .elementor-element.elementor-element-fae8a7, .elementor-1822 .elementor-element.elementor-element-fae8a7 > .elementor-background-overlay{border-radius:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-fae8a7{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:50px 0px 50px 0px;}.elementor-1822 .elementor-element.elementor-element-fae8a7 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1822 .elementor-element.elementor-element-2d874a3e > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-1822 .elementor-element.elementor-element-39f58113 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-39f58113 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:42px;font-weight:700;color:#FFFFFF;}.elementor-1822 .elementor-element.elementor-element-3bf4ff67 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-3bf4ff67 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:400;line-height:32px;color:#FFFFFF;}.elementor-bc-flex-widget .elementor-1822 .elementor-element.elementor-element-5f255f64.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-1822 .elementor-element.elementor-element-5f255f64.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-1822 .elementor-element.elementor-element-5f255f64 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );}.elementor-1822 .elementor-element.elementor-element-5b2e1e81 .elementor-button{background-color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;fill:#000000;color:#000000;border-style:none;border-radius:50px 50px 50px 50px;}.elementor-1822 .elementor-element.elementor-element-5b2e1e81 .elementor-button:hover, .elementor-1822 .elementor-element.elementor-element-5b2e1e81 .elementor-button:focus{background-color:#FFFFFF;color:#000000;border-color:#FFFFFF;}.elementor-1822 .elementor-element.elementor-element-5b2e1e81 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-5b2e1e81 .elementor-button:hover svg, .elementor-1822 .elementor-element.elementor-element-5b2e1e81 .elementor-button:focus svg{fill:#000000;}.elementor-1822 .elementor-element.elementor-element-cfc98fe{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-1822 .elementor-element.elementor-element-1eee173{--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-1822 .elementor-element.elementor-element-1eee173.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1822 .elementor-element.elementor-element-34f70bb{width:var( --container-widget-width, 111.818% );max-width:111.818%;--container-widget-width:111.818%;--container-widget-flex-grow:0;}.elementor-1822 .elementor-element.elementor-element-34f70bb.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1822 .elementor-element.elementor-element-c68d0c2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-1822 .elementor-element.elementor-element-c68d0c2:not(.elementor-motion-effects-element-type-background), .elementor-1822 .elementor-element.elementor-element-c68d0c2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F8FC;}.elementor-1822 .elementor-element.elementor-element-8f43c2a{--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;--border-radius:20px 20px 20px 20px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1822 .elementor-element.elementor-element-8f43c2a:not(.elementor-motion-effects-element-type-background), .elementor-1822 .elementor-element.elementor-element-8f43c2a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F8FC;}.elementor-1822 .elementor-element.elementor-element-15c12ca{--display:flex;}.elementor-1822 .elementor-element.elementor-element-e72a1ba{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-1822 .elementor-element.elementor-element-e72a1ba:not(.elementor-motion-effects-element-type-background), .elementor-1822 .elementor-element.elementor-element-e72a1ba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1822 .elementor-element.elementor-element-afa8d88{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-1822 .elementor-element.elementor-element-afa8d88 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-afa8d88.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-1822 .elementor-element.elementor-element-fc8c8eb{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-1822 .elementor-element.elementor-element-fc8c8eb:not(.elementor-motion-effects-element-type-background), .elementor-1822 .elementor-element.elementor-element-fc8c8eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1822 .elementor-element.elementor-element-488cba1{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-1822 .elementor-element.elementor-element-488cba1.elementor-element{--align-self:flex-end;--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}.elementor-1822 .elementor-element.elementor-element-4d9f13b{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-1822 .elementor-element.elementor-element-4d9f13b.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-1822 .elementor-element.elementor-element-1166ca9{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-1822 .elementor-element.elementor-element-1166ca9:not(.elementor-motion-effects-element-type-background), .elementor-1822 .elementor-element.elementor-element-1166ca9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1822 .elementor-element.elementor-element-a39df76{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-1822 .elementor-element.elementor-element-a39df76.elementor-element{--align-self:flex-end;--flex-grow:0;--flex-shrink:0;}.elementor-1822 .elementor-element.elementor-element-5d6e7b2{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-1822 .elementor-element.elementor-element-5d6e7b2.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-1822 .elementor-element.elementor-element-bc503fe{--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-1822 .elementor-element.elementor-element-6e74036 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 50px;}.elementor-1822 .elementor-element.elementor-element-43ec9b5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 50px;}.elementor-1822 .elementor-element.elementor-element-4551f59 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 50px;}.elementor-1822 .elementor-element.elementor-element-ac56eda > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 50px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1822 .elementor-element.elementor-element-1eee173{--width:100%;}.elementor-1822 .elementor-element.elementor-element-c68d0c2{--width:1196px;}.elementor-1822 .elementor-element.elementor-element-8f43c2a{--width:50%;}.elementor-1822 .elementor-element.elementor-element-bc503fe{--width:50%;}}@media(max-width:1024px){.elementor-1822 .elementor-element.elementor-element-fae8a7 > .elementor-container{max-width:691px;}.elementor-1822 .elementor-element.elementor-element-39f58113 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-39f58113{text-align:left;}.elementor-1822 .elementor-element.elementor-element-39f58113 .elementor-heading-title{font-size:28px;}.elementor-1822 .elementor-element.elementor-element-3bf4ff67 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-3bf4ff67{text-align:left;}.elementor-1822 .elementor-element.elementor-element-3bf4ff67 .elementor-heading-title{font-size:18px;}.elementor-1822 .elementor-element.elementor-element-5b2e1e81 .elementor-button{border-radius:50px 50px 50px 50px;}.elementor-1822 .elementor-element.elementor-element-e72a1ba{--grid-auto-flow:row;}.elementor-1822 .elementor-element.elementor-element-fc8c8eb{--grid-auto-flow:row;}.elementor-1822 .elementor-element.elementor-element-1166ca9{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-1822 .elementor-element.elementor-element-fae8a7 > .elementor-container{max-width:425px;}.elementor-1822 .elementor-element.elementor-element-fae8a7{margin-top:0px;margin-bottom:0px;padding:040px 15px 50px 15px;}.elementor-1822 .elementor-element.elementor-element-2d874a3e > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-39f58113 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-39f58113{text-align:center;}.elementor-1822 .elementor-element.elementor-element-3bf4ff67 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-3bf4ff67{text-align:center;}.elementor-1822 .elementor-element.elementor-element-5b2e1e81 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1822 .elementor-element.elementor-element-e72a1ba{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1822 .elementor-element.elementor-element-fc8c8eb{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1822 .elementor-element.elementor-element-1166ca9{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1822 .elementor-element.elementor-element-6e74036 > .elementor-widget-container{margin:0px 0px 0px -50px;padding:0px 60px 60px 60px;}.elementor-1822 .elementor-element.elementor-element-43ec9b5 > .elementor-widget-container{margin:0px 0px 0px -50px;padding:0px 60px 60px 60px;}.elementor-1822 .elementor-element.elementor-element-4551f59 > .elementor-widget-container{margin:0px 0px 0px -50px;padding:0px 60px 60px 60px;}.elementor-1822 .elementor-element.elementor-element-ac56eda > .elementor-widget-container{margin:0px 0px 0px -50px;padding:0px 60px 60px 60px;}}@media(max-width:1024px) and (min-width:768px){.elementor-1822 .elementor-element.elementor-element-2d874a3e{width:70%;}.elementor-1822 .elementor-element.elementor-element-5f255f64{width:30%;}}/* Start custom CSS for html, class: .elementor-element-34f70bb */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

#customer-panel {
  font-family: 'Poppins', sans-serif;
  background: #ffffff;
  padding: 25px 30px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  margin-bottom: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-end;
}

/* Group boxes for visual structure */
#customer-panel > div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 240px;
}

/* Input & Select styling */
#customer-panel input[type="text"],
#customer-panel select {
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  width: 100%;
  background-color: #fafafa; /* light grey so text shows */
  color: #1f2937;            /* dark grey text */
  transition: border-color 0.3s;
}

#customer-panel input[type="text"]::placeholder {
  color: #6b7280; /* medium grey placeholder, visible */
}

#customer-panel input[type="text"]:focus,
#customer-panel select:focus {
  border-color: #1f7ae0;
  outline: none;
  background-color: #fff; /* goes pure white on focus */
  color: #1f2937;         /* keep text dark */
}

/* ===== Button styling ===== */
#customer-panel button {
  background-color: #1f7ae0 !important;  /* solid blue background */
  color: #ffffff !important;             /* white text */
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s ease, box-shadow 0.2s ease;
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#customer-panel button:hover {
  background-color: #155ab6 !important;  /* darker blue hover */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Label styling */
#customer-panel label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: #333; /* readable dark grey */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6e74036 */:root { 
  --label-bg: #f7f8fc;   /* light background for label box */
  --label-text: #333333; /* dark text inside label box */
}

/* Each recommendation block as a grid */
.controls-container .recommendation {
  display: grid !important;
  grid-template-columns: 1fr auto auto; /* name | priority | checkbox/% */
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #eaecef;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 12px;
}

.controls-container .category-name { font-weight: 600; }

/* Priority box styles */
.controls-container .priority-box {
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
  align-self: center;
  justify-self: end;
  font-weight: 600;
}

/* Critical = red */
.controls-container .priority-box.critical {
  border-color: #f2c0c0;
  background: #fff5f5;
  color: #d93025;
}

/* High = orange */
.controls-container .priority-box.high {
  border-color: #ffd9c2;
  background: #fff8f4;
  color: #f5813e;
}

/* Checkbox container */
.controls-container .checkbox-container {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.controls-container .checkbox-container input[type="checkbox"] {
  width: 18px; 
  height: 18px; 
  cursor: pointer;
}

/* Always-visible label box under row */
.controls-container .label-box {
  grid-column: 1 / -1 !important;   /* full width */
  display: block !important;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--label-bg);
  color: var(--label-text);
  font-size: 14px;
  border: 1px solid #e5e7eb; /* subtle border */
}

/* Mobile responsive */
@media (max-width: 640px) {
  .controls-container .recommendation {
    grid-template-columns: 1fr auto; /* name | priority */
  }
  .controls-container .checkbox-container { justify-self: end; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4551f59 *//* Controls container style */
.controls-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: fit-content;
    max-width: 500px;
    margin: 20px auto; /* Center the container */
}

/* Header */
.controls-container h2 {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    color: #333;
}

/* Recommendation row */
.recommendation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Category name (Security, Efficiency, etc.) */
.category-name {
    font-size: 16px;
    font-weight: bold;
    width: 150px; /* Fixed width for category name */
    text-align: left;
}

/* Priority box */
.priority-box {
    font-size: 16px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    text-align: center;
    width: 100px; /* Fixed width for priority box */
    text-transform: uppercase;
}

.priority-box.critical {
    background-color: #e74c3c; /* Red */
}

.priority-box.high {
    background-color: #f39c12; /* Orange */
}

/* Checkbox container */
.checkbox-container {
    display: flex;
    align-items: center;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
    margin-left: 10px;
}

/* Optional: add spacing between checkbox text */
.checkbox-container label {
    font-size: 16px;
}

/* Extra styling for the checkbox container for better visual alignment */
.checkbox-container {
    flex-grow: 1; /* Ensure checkboxes and labels are aligned to the right side */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Additional styles for alignment */
.recommendation .category-name, .recommendation .priority-box, .recommendation .checkbox-container {
    padding: 5px;
    margin-right: 10px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ac56eda *//* Controls container style */
.controls-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: fit-content;
    max-width: 500px;
    margin: 20px auto; /* Center the container */
}

/* Header */
.controls-container h2 {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    color: #333;
}

/* Recommendation row */
.recommendation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Category name (Security, Efficiency, etc.) */
.category-name {
    font-size: 16px;
    font-weight: bold;
    width: 150px; /* Fixed width for category name */
    text-align: left;
}

/* Priority box */
.priority-box {
    font-size: 16px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    text-align: center;
    width: 100px; /* Fixed width for priority box */
    text-transform: uppercase;
}

.priority-box.critical {
    background-color: #e74c3c; /* Red */
}

.priority-box.high {
    background-color: #f39c12; /* Orange */
}

/* Checkbox container */
.checkbox-container {
    display: flex;
    align-items: center;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
    margin-left: 10px;
}

/* Optional: add spacing between checkbox text */
.checkbox-container label {
    font-size: 16px;
}

/* Extra styling for the checkbox container for better visual alignment */
.checkbox-container {
    flex-grow: 1; /* Ensure checkboxes and labels are aligned to the right side */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Additional styles for alignment */
.recommendation .category-name, .recommendation .priority-box, .recommendation .checkbox-container {
    padding: 5px;
    margin-right: 10px;
}/* End custom CSS */