/**
* forms.css
* 
* Copyright 2022, Alex Stroh
* Comvation AG
* https://www.comvation.com
* 
* Released on: October 01, 2022
*/

/* ==========================================================================
   Overview
   ========================================================================== */
input {
  height: 48px;
}

input:focus {
  outline: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid rgb(223, 223, 223);
  -webkit-text-fill-color: rgba(var(--marine-blue), 1);
  -webkit-box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset;
  -moz-box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset !important;
  box-shadow: 0 0 0 1000px rgb(255, 255, 255) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  height: auto;
  width: 15px;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked+label {
  color: var(--body-color);
}

input[type="checkbox"]+label:last-child {
  margin-bottom: 0;
}

body.contact input[type="checkbox"]+label:last-child {
  margin-bottom: 3rem;
}

input[type="checkbox"]:checked+label:before {
  width: 7px;
  top: 1px;
  left: 7px;
  border-radius: 0;
  opacity: 1;
  border-color: #0bbe0b;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

input.error[type="checkbox"]+label:before {
  opacity: 1;
  border-color: var(--color-10);
}

input.error[type="checkbox"]:checked+label:before {
  width: 7px;
  top: 1px;
  left: 7px;
  border-radius: 0;
  opacity: 1;
  border-color: #0bbe0b;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

textarea {
  height: 150px;
  padding: 0.5rem 1rem !important;
}

textarea::placeholder {
  color: var(--color-2) !important;
  font-family: 'Roboto-Regular', arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}


textarea:hover,
textarea:focus-within {
  background-color: var(--color-8);
  border: 1px solid var(--color-2);
  color: var(--color-2);
  cursor: pointer;
}

label.form-label-style-choice {
  padding: 0 1rem 0 0;
  font-weight: 500;
}

label a {
  text-decoration: none;
  text-underline-offset: 5px;
  color: var(--color-2);
  cursor: pointer;
}

label a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  color: var(--color-2);
  cursor: pointer;
}

.form-label-style.style-text-427,
.form-label-style.style-text-429,
.form-label-style.style-text-428,
.form-label-style.style-text-451,
.form-label-style.style-text-426,
.form-label-style.style-text-348,
.form-label-style.style-text-362,
.form-label-style.style-text-377,
.form-label-style.style-text-391,
.form-label-style.style-text-404,
.form-label-style.style-text-416 {
  font-family: 'Roboto-Regular', arial, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

legend {
  display: none;
}

.clx-search-form-field,
.clx-contact-form-field,
.clx-contact-form-text {
  padding-bottom: 0;
}

.form-label-style {
  font-family: 'Roboto-Bold', arial, sans-serif;
  font-size: 1.063rem;
  color: var(--color-2);
  pointer-events: none;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.radio,
.checkbox {
  position: relative;
  display: inline-flex;
  min-height: 20px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.floating-input,
.hasDatepicker {
  padding: 1.5rem 1rem 0.5rem 1rem;
  transition: border-color 0.2s ease;
  caret-color: var(--body-color);
  background-color: var(--color-1);
  border: 1px solid var(--color-11);
  color: var(--body-color);
  font-size: 1rem;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  margin-bottom: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: 'Roboto-Light', arial, sans-serif;
  font-weight: 300;
}

.floating,
.hasDatepicker {
  margin-bottom: 1rem;
  transition: background-color 0.2s ease;
  min-height: 48px;
}

.checkbox-group {
  margin-bottom: 1rem;
}

.floating-input:hover,
.floating-input:focus-within {
  background-color: var(--color-8);
  border: 1px solid var(--color-2);
  color: var(--color-2);
  cursor: pointer;
}

.clx-contact-form-label-checkbox:hover,
.clx-contact-form-label-radio:hover {
  cursor: pointer;
  color: var(--color-3);
}

label.form-label-style,
label.form-label-style-choice {
  font-weight: 700;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.67;
  letter-spacing: normal;
  margin-bottom: 0;
  padding: 0 1rem;
  text-transform: uppercase;
}

label.form-label-style {
  font-size: 0.7rem;
}

.floating-input::placeholder {
  color: rgba(0, 0, 0, 0);
}

.floating-label {
  display: block;
  position: relative;
  max-height: 0;
  font-weight: 500;
  pointer-events: none;
  font-family: 'Roboto-Regular', arial, sans-serif;
  letter-spacing: normal;
}

.floating-label::after {
  content: "";
  position: absolute;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  opacity: 0;
  left: 0;
  top: 100%;
  transform: scale3d(0, 1, 1);
  width: 100%;
}

.floating-input:focus+.floating-label::after {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

.floating-input:placeholder-shown+.floating-label::before {
  transform: translate3d(0, -2em, 0) scale3d(1, 1, 1);
  font-size: 1rem;
}

.floating-input:value-shown+.floating-label::before {
  transform: translate3d(0, -2em, 0) scale3d(1, 1, 1);
  font-size: 1rem;
}

.floating-label::before,
.floating-input:focus+.floating-label::before {
  transform: translate3d(0, -2.8rem, 0) scale3d(0.6, 0.6, 1);
}

.floating-label::before,
.floating-input:focus+.floating-label::before {
  transform: translate3d(0, -2.8rem, 0) scale3d(0.6, 0.6, 1);
}

.floating-label::before {
  color: var(--color-2);
  content: attr(data-content);
  display: inline-block;
  backface-visibility: hidden;
  transform-origin: left top;
  transition: transform 0.2s ease;
  left: 1rem;
  position: relative;
  font-weight: 500;
  font-size: 1rem;
  font-stretch: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  vertical-align: middle;
}

.floating-input:focus+.floating-label::before {
  color: var(--color-13);
  font-weight: 500;
  font-size: 1rem;
  font-stretch: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  vertical-align: middle;
}

.floating-input:hover+.floating-label::before {
  color: var(--color-13);
  font-weight: 500;
  font-size: 1rem;
  font-stretch: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  vertical-align: middle;
}

.floating select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
  caret-color: var(--main_color);
  color: var(--color-2);
  background: url(/themes/bmspower_2025/img/arrow_black.svg) no-repeat 97% center;
  background-color: var(--color-1);
  border: 1px solid var(--color-11);
  font-family: 'Roboto-Regular', arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  height: 48px;
  line-height: normal;
  background-size: 10px;
  padding: 0rem 1rem;
  text-transform: uppercase;
  display: block;
  max-width: 100%;
}

.floating select:hover {
  color: var(--color-13);
  background-color: var(--color-8);
  border: 1px solid var(--color-2);
  cursor: pointer;
}

.error,
.clx-form-error-msg,
#contactFormCaptchaError {
  border: 1px solid var(--color-10) !important;
}

input.floating-input.feld_ok {
    background-color: rgba(31, 184, 113, 0.1);
    border: 1px solid #1fb871!important;
}

.clx-form-error-msg,
#contactFormCaptchaError {
  color: var(--color-1) !important;
  border: 1px solid var(--color-10);
  padding: 10px 15px;
  background-color: var(--color-10);
  margin-bottom: 30px;
}

/* ==========================================================================
   Online-Anfrage gelötete Wärmeaustauscher
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-93 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-94,
  .form-style-99,
  .form-style-100 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-90,
  .form-style-91,
  .form-style-92,
  .form-style-95,
  .form-style-96,
  .form-style-97,
  .form-style-98,
  .form-style-101,
  .form-style-102,
  .form-style-103,
  .form-style-104,
  .form-style-108,
  .form-style-109,
  .form-style-110,
  .form-style-111,
  .form-style-115,
  .form-style-116,
  .form-style-117,
  .form-style-118 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage geschraubte Plattenwärmeaustauscher
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-127 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-128,
  .form-style-135,
  .form-style-136,
  .form-style-137 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-124,
  .form-style-125,
  .form-style-126,
  .form-style-129,
  .form-style-130,
  .form-style-131,
  .form-style-132,
  .form-style-141,
  .form-style-142,
  .form-style-143,
  .form-style-144,
  .form-style-148,
  .form-style-149,
  .form-style-150,
  .form-style-151,
  .form-style-154,
  .form-style-155,
  .form-style-156,
  .form-style-157,
  .form-style-158 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Abwärmenutzungs-Systeme
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-165 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-166 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-162,
  .form-style-163,
  .form-style-164,
  .form-style-167,
  .form-style-168,
  .form-style-169,
  .form-style-170,
  .form-style-173,
  .form-style-174,
  .form-style-178,
  .form-style-179,
  .form-style-180,
  .form-style-181,
  .form-style-184,
  .form-style-185,
  .form-style-186,
  .form-style-187,
  .form-style-190,
  .form-style-191,
  .form-style-192,
  .form-style-193,
  .form-style-195,
  .form-style-196,
  .form-style-197,
  .form-style-198,
  .form-style-201,
  .form-style-202,
  .form-style-203,
  .form-style-204,
  .form-style-207,
  .form-style-208,
  .form-style-209,
  .form-style-210,
  .form-style-213,
  .form-style-214,
  .form-style-215,
  .form-style-216,
  .form-style-219,
  .form-style-220,
  .form-style-221,
  .form-style-222,
  .form-style-225,
  .form-style-226,
  .form-style-227,
  .form-style-228,
  .form-style-231,
  .form-style-232,
  .form-style-233,
  .form-style-234,
  .form-style-237,
  .form-style-238,
  .form-style-239,
  .form-style-240,
  .form-style-243,
  .form-style-244,
  .form-style-245,
  .form-style-246 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Speicher
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-254 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-255,
  .form-style-262,
  .form-style-263,
  .form-style-264 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-251,
  .form-style-252,
  .form-style-253,
  .form-style-256,
  .form-style-257,
  .form-style-258,
  .form-style-259,
  .form-style-267,
  .form-style-268,
  .form-style-269,
  .form-style-270,
  .form-style-271,
  .form-style-272,
  .form-style-273,
  .form-style-274,
  .form-style-275,
  .form-style-276,
  .form-style-277,
  .form-style-278,
  .form-style-279,
  .form-style-280,
  .form-style-283,
  .form-style-284,
  .form-style-285,
  .form-style-286,
  .form-style-287 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Frischwassersysteme
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-295 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-296,
  .form-style-312,
  .form-style-313,
  .form-style-314 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-323,
  .form-style-327,
  .form-style-329,
  .form-style-333 {
    flex: 0 0 auto;
    width: 50%;
    margin-right: 50%;
  }

  .form-style-292,
  .form-style-293,
  .form-style-294,
  .form-style-297,
  .form-style-298,
  .form-style-299,
  .form-style-300,
  .form-style-305,
  .form-style-306,
  .form-style-307,
  .form-style-308,
  .form-style-309,
  .form-style-318,
  .form-style-319,
  .form-style-320,
  .form-style-321,
  .form-style-325,
  .form-style-326,
  .form-style-331,
  .form-style-332 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Plananalyse
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-342 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-343 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-338,
  .form-style-339,
  .form-style-340,
  .form-style-341,
  .form-style-344 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Systemanalyse
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-357 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-358 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-349,
  .form-style-351 {
    flex: 0 0 auto;
    width: 50%;
    margin-right: 50%;
  }

  .form-style-354,
  .form-style-355,
  .form-style-356,
  .form-style-359,
  .form-style-360 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Engineering
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-372 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-373 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-363,
  .form-style-365,
  .form-style-367 {
    flex: 0 0 auto;
    width: 50%;
    margin-right: 50%;
  }

  .form-style-369,
  .form-style-370,
  .form-style-371,
  .form-style-374,
  .form-style-375 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Expertise
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-386 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-387 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-378,
  .form-style-380 {
    flex: 0 0 auto;
    width: 50%;
    margin-right: 50%;
  }

  .form-style-383,
  .form-style-384,
  .form-style-385,
  .form-style-388,
  .form-style-389 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Referate
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-399 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-400 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-392 {
    flex: 0 0 auto;
    width: 50%;
    margin-right: 50%;
  }

  .form-style-393,
  .form-style-396,
  .form-style-397,
  .form-style-398,
  .form-style-401,
  .form-style-402 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Online-Anfrage Individuelle Kurse
   ========================================================================== */
@media only screen and (min-width: 768px) {
  .form-style-411 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .form-style-412 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .form-style-408,
  .form-style-409,
  .form-style-410 {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* ==========================================================================
   Termin Inbetriebnahme FWS eXm
   ========================================================================== */
.form-style-494, .form-style-503 {
    width: 100%
}

.form-style-495 {
    width: 33.33333333%
}

.form-style-496 {
    width: 66.66666667%;
}

.form-style-501 input:focus {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    -o-appearance: auto;
    -ms-appearance: auto;
    appearance: auto;
}

input#contactFormFieldId_503 {
    margin-bottom: 0;
}

#contactFormFieldId_501 label.form-label-style-choice {
    padding: 0 1.5rem 0 0;
}

#contactFormFieldId_501 {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
    flex-direction: column;
}

    #contactFormFieldId_501 input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    top: 4px;
    display: inline-flex;
    position: relative;
    margin-right: 5px;
}

@media only screen and (min-width: 576px) {
    .form-style-492, .form-style-493 {
        width: 50%
    }
}

@media only screen and (min-width: 768px) {
    #contactFormFieldId_501 {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

    .form-style-495 {
        width: 16.66666667%;
    }
    
    .form-style-496 {
        width: 33.33333333%;
    }
    
    .form-style-497, .form-style-502, .form-style-503, .form-style-504, .form-style-506 {
        width: 50%;
    }    
        
      .form-style-492, .form-style-493, .form-style-494 {
        width: 33.33333333%
    }
    
    #contactFormFieldId_501 {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
    flex-direction: row;
}
    
    

    
    
}


/* ==========================================================================
   End
   ========================================================================== */