/*----------  Outline Design Css ---------- */
:root {
  --icon-div-width: 40px;
}
body.ast-page-builder-template
  .elementor-field-group:where(
    .label-outline,
    .label-filled,
    .label-clean,
    .label-Style_Four
  )
  input.elementor-field-textual {
  height: auto !important;
}

.label-outline {
  position: relative;
}

.label-outline .elementor-field-label {
  position: absolute;
  transition: all 0.2s ease;
  pointer-events: none;
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px))
  );
  font-size: var(
    --typography-font-size,
    var(--lsfef-site-field-font-size)
  ) !important;
  line-height: var(
    --typography-font-size,
    var(--lsfef-site-field-font-size)
  ) !important;
}

.label-outline input.elementor-field-textual ~ .elementor-field-label {
  top: calc(
    var(--lsfef-input-padding-top, 0px) +
      var(--typography-font-size, var(--lsfef-site-field-font-size)) / 3
  );
}

.label-outline textarea.elementor-field-textual ~ .elementor-field-label {
  top: calc(
    var(--lsfef-input-padding-top, 0px) +
      var(--typography-font-size, var(--lsfef-site-field-font-size)) / 3
  );
}

.label-outline .elementor-field:focus {
  border-color: var(--ls-border-color) !important;
}

.label-outline .elementor-field:focus + .elementor-field-label,
.label-outline
  .elementor-field:not(:placeholder-shown)
  + .elementor-field-label {
  font-size: calc(
    var(--ls-label-font-size, var(--lsfef-site-label-spacing)) / 1.5
  ) !important ;
  line-height: calc(
    var(--ls-label-font-size, var(--lsfef-site-label-spacing)) / 1.5
  ) !important ;
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px))
  );
  top: calc(
    -1 * var(--ls-label-font-size, var(--lsfef-site-label-spacing)) / 3 + var(
        --field-border-top-width,
        var(--lsfef-field-border-top, 1px)
      ) / 2
  );
  padding: 0px 2px !important;
  background-image: linear-gradient(
    360deg,
    var(--field-background-color, var(--lsfef-site-field-background-color))
      calc(
        50% + var(--field-border-top-width, var(--lsfef-field-border-top, 1px)) /
          2
      ),
    transparent 50%
  );
}

/*---------- end css ---------- */

.label-outline > input::placeholder,
.label-clean > input::-webkit-input-placeholder,
.label-outline > textarea::placeholder,
.label-clean > textarea::-webkit-input-placeholder {
  visibility: hidden;
}

/*----------  Clean Design ----------*/
.label-clean .elementor-field-label {
  position: absolute;
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px))
  );
  transition: all 0.2s ease;
  pointer-events: none;
  font-size: var(
    --typography-font-size,
    var(--lsfef-site-field-font-size)
  ) !important ;
  padding: 0px !important;
  line-height: var(
    --typography-font-size,
    var(--lsfef-site-field-font-size)
  ) !important;
}

.label-clean input.elementor-field-textual ~ .elementor-field-label {
  top: calc(
    var(--lsfef-input-padding-top, 0px) +
      var(--typography-font-size, var(--lsfef-site-field-font-size)) / 3 +
      var(--field-border-top-width, var(--lsfef-field-border-top)) / auto
  );
}

.label-clean textarea.elementor-field-textual ~ .elementor-field-label {
  top: calc(
    var(--lsfef-input-padding-top, 0px) +
      var(--typography-font-size, var(--lsfef-site-field-font-size)) / 3
  );
}

.label-clean .elementor-field:focus {
  border-color: var(--ls-border-color) !important;
}

.label-clean .elementor-field:focus + .elementor-field-label,
.label-clean .elementor-field:not(:placeholder-shown) + .elementor-field-label {
  position: absolute;
  font-size: calc(
    var(--typography-font-size, var(--lsfef-site-field-font-size)) / 1.5
  ) !important ;
  line-height: calc(
    var(--typography-font-size, var(--lsfef-site-field-font-size)) / 1.5
  ) !important ;
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px))
  );
  top: calc(
    (
        var(--lsfef-input-padding-top, 15px) +
          var(--lsfef-input-padding-bottom, 15px)
      ) / 3 - var(--typography-font-size, var(--lsfef-site-field-font-size)) / 3 +
      var(--field-border-top-width, var(--lsfef-field-border-top, 1px)) + 3px
  );
  padding: 0 !important;
}

.label-clean.elementor-field-textual:not(.elementor-field-type-tel .iti__tel-input, .elementor-field-type-country .iti__tel-input) {
  padding-top: calc(
    (
        var(--lsfef-input-padding-left, 15px) +
          var(--lsfef-input-padding-bottom, 10px)
      ) -
      (
        var(--lsfef-input-padding-left, 15px) +
          var(--lsfef-input-padding-bottom, 10px)
      ) / 3
  ) !important ;
  padding-bottom: calc(
    (
        var(--lsfef-input-padding-left, 15px) +
          var(--lsfef-input-padding-bottom, 10px)
      ) / 3
  ) !important;
}

/*---------- end css---------- */

/*---------- label Filled Design css-start----------*/

.label-filled .elementor-field-label {
  position: absolute;
  font-size: calc(
    var(--typography-font-size, var(--lsfef-site-field-font-size)) / 1.5
  ) !important ;
  line-height: calc(
    var(--typography-font-size, var(--lsfef-site-field-font-size)) / 1.5
  ) !important;
  top: calc(
    (var(--lsfef-input-padding-top) + var(--lsfef-input-padding-bottom)) / 3 -
      var(--typography-font-size, var(--lsfef-site-field-font-size)) / 3 +
      var(--field-border-top-width, var(--lsfef-field-border-top)) + 4px
  );

  left: calc(
    var(--lsfef-input-padding-left, 15px) + var(--lsfef-input-offset-left, 1px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px))
  );
  padding: 0 !important;
}

.label-filled .elementor-field:focus {
  border-color: var(--ls-border-color);
}

.label-filled
  .elementor-field-textual:not(.elementor-field-type-tel .iti__tel-input, .elementor-field-type-country .iti__tel-input ) {
  padding-top: calc(
    (
        var(--lsfef-input-padding-left, 15px) +
          var(--lsfef-input-padding-bottom, 10px)
      ) -
      (
        var(--lsfef-input-padding-left, 15px) +
          var(--lsfef-input-padding-bottom, 10px)
      ) / 3
  ) !important ;
  padding-bottom: calc(
    (
        var(--lsfef-input-padding-left, 15px) +
          var(--lsfef-input-padding-bottom, 10px)
      ) / 3
  ) !important;
}

/*---------- end css ---------- */

/*---------- Style 4 Css ---------- */

.label-Style_Four .elementor-field-label {
  position: absolute;
  font-size: calc(
    var(--ls-label-font-size, var(--lsfef-site-label-spacing)) / 1.5
  ) !important ;
  line-height: calc(
    var(--ls-label-font-size, var(--lsfef-site-label-spacing)) / 1.5
  ) !important ;
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px))
  );
  top: calc(
    -1 * var(--ls-label-font-size, var(--lsfef-site-label-spacing)) / 3 + var(
        --field-border-top-width,
        var(--lsfef-field-border-top, 1px)
      ) / 2
  );
  padding: 0px 2px !important;
  background-image: linear-gradient(
    360deg,
    var(--field-background-color, var(--lsfef-site-field-background-color))
      calc(
        50% + var(--field-border-top-width, var(--lsfef-field-border-top, 1px)) /
          2
      ),
    transparent 50%
  );
}

.label-Style_Four .elementor-field:focus {
  border-color: var(--ls-border-color) !important;
}

/*---------- end css ---------- */

/* For Firefox */
.label-outline .elementor-field-textual::placeholder,
.label-clean .elementor-field-textual::placeholder {
  opacity: 0 !important;
  color: transparent !important;
}

/* css for icon style */

.elementor-field-group .icon_div {
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: var(--icon-div-width);
  padding: 0px 5px;
  background-color: var(--lsfef-icon-background-color);
}

.elementor-field-group.lsfef-form-style .icon_div {
  height: calc(
    100% -
      (
        var(--field-border-top-width, var(--lsfef-field-border-top, 1px)) +
          var(
            --field-border-bottom-width,
            var(--lsfef-field-border-bottom, 1px)
          )
      ) / 1.2
  );
  top: calc(
    var(--field-border-top-width, var(--lsfef-field-border-top, 1px)) / 1.2
  );
}

.elementor-field-group.lsfef-form-style textarea ~ .icon_div {
  height: 50px !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.elementor-field-group.label-none label ~ .icon_div {
  height: calc(
    100% -
      (
        var(--lsfef-input-label-spacing, 0px) +
          var(--ls-label-font-size, var(--lsfef-site-label-spacing))
      ) -
      (
        var(--field-border-top-width, var(--lsfef-field-border-top, 1px)) +
          var(
            --field-border-bottom-width,
            var(--lsfef-field-border-bottom, 1px)
          )
      ) / 1.2
  );
  top: calc(
    (
        var(--lsfef-input-label-spacing, 0px) +
          var(--ls-label-font-size, var(--lsfef-site-label-spacing))
      ) + var(--field-border-top-width, var(--lsfef-field-border-top, 1px)) /
      1.2
  );
}

.elementor-field-group .icon_div > i {
  font-size: var(--lsfef-icon-size);
  color: var(--lsfef-icon-color);
}

.elementor-field-group .icon_div > svg {
  fill: var(--lsfef-icon-color);
  height: var(--lsfef-icon-size);
}

.label-outline.icon_clss.icon_left_side .elementor-field-label {
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px)) +
      var(--icon-div-width)
  );
}

.label-outline.icon_clss.icon_left_side
  .elementor-field:focus
  + .elementor-field-label,
.label-outline.icon_clss.icon_left_side
  .elementor-field:not(:placeholder-shown)
  + .elementor-field-label {
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px)) +
      var(--icon-div-width)
  );
}

.elementor-field-group.lsfef-form-style.icon_clss.icon_left_side
  .elementor-field-textual.lsfef-padding {
  padding-left: calc(var(--lsfef-input-padding-left) + var(--icon-div-width));
}

.label-filled.icon_clss.icon_left_side .elementor-field-label {
  left: calc(
    var(--lsfef-input-padding-left, 15px) + var(--lsfef-input-offset-left, 1px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px)) +
      var(--icon-div-width)
  );
}

.label-Style_Four.icon_clss.icon_left_side .elementor-field-label {
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px)) +
      var(--icon-div-width)
  );
}

.label-clean.icon_clss.icon_left_side .elementor-field-label {
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px)) +
      var(--icon-div-width)
  );
}

.label-clean.icon_clss.icon_left_side
  .elementor-field:focus
  + .elementor-field-label,
.label-clean.icon_clss.icon_left_side
  .elementor-field:not(:placeholder-shown)
  + .elementor-field-label {
  left: calc(
    var(--lsfef-input-padding-left, 16px) + var(--lsfef-input-offset-left, 0px) /
      2 + var(--field-border-left-width, var(--lsfef-field-border-left, 1px)) +
      var(--icon-div-width)
  );
}

.elementor-field-group.lsfef-form-style.icon_right_side .icon_div {
  right: calc(
    var(--field-border-right-width, var(--lsfef-field-border-right, 1px)) +
      calc(var(--lsfef-input-offset-left, 0px) / 2) - 0.5px
  );
  border-top-right-radius: calc(
    var(--field-border-right-radius, var(--lsfef-field-border-right-radius)) /
      1.2
  );
  border-bottom-right-radius: calc(
    var(--field-border-bottom-radius, var(--lsfef-field-border-bottom-radius)) /
      1.2
  );
}

.elementor-field-group.lsfef-form-style.icon_left_side .icon_div {
  left: calc(
    var(--field-border-left-width, var(--lsfef-field-border-left, 1px)) +
      calc(var(--lsfef-input-offset-left, 0px) / 2)
  );
  border-top-left-radius: calc(
    var(--field-border-top-radius, var(--lsfef-field-border-top-radius)) / 1.4
  );
  border-bottom-left-radius: calc(
    var(--field-border-left-radius, var(--lsfef-field-border-left-radius)) / 1.4
  );
}

.elementor-field-group .elementor-field-textual:hover {
  box-shadow: var(--box-shadow-hr) var(--box-shadow-vr) var(--box-shadow-blr)
    var(--box-shadow-sprd) var(--box-shadow-color); /* Fallback color */
}
.elementor-field-group.label-none.icon_clss .elementor-field-label {
  line-height: var(
    --ls-label-font-size,
    var(--lsfef-site-label-spacing)
  ) !important;
}

.elementor-field-type-textarea.lsfef-form-style.label-none textarea {
  line-height: calc(
    var(--ls-label-font-size, var(--lsfef-site-field-font-size)) / 1.5
  ) !important;
}

.elementor-field-group .icon_div {
  height: 100%;
}


.elementor-field-group .icon_div > svg.icon{
  width:40px;
} 

.elementor-field-group.icon_clss.icon_left_side
  .elementor-field-textual.lsfef-padding {
  padding-left: calc(var(--lsfef-input-padding-left) + var(--icon-div-width));
}