/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./code/app_custom_corporategifting/cartridge/client/default/scss/contact/contact.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  /** ==================================================================== **/
  /** Create Custom CSS Variables from "sfra bootstrap override" variables **/
  /** ==================================================================== **/
  --color-white: #fff;
  --color-black: #000;
  --color-blue: #0070d2;
  --color-green: #008827;
  --color-primary: #00a1e0;
  --color-red: #c00;
  --color-success: var(--color-green);
  --color-danger: var(--color-red);
  --color-light-blue: #7ed0ee;
  --color-grey1: #f9f9f9;
  --color-grey2: #eee;
  --color-grey3: #ccc;
  --color-grey4: #999;
  --color-grey5: #666;
  --color-grey6: #444;
  --color-grey7: #222;
  --color-grey8: #333;
  --color-grey-transparent-1: rgba(0, 0, 0, 0.65);
  --color-grey-transparent-2: rgba(0, 0, 0, 0.25);
  --color-light-gray: var(--color-grey1);
  --color-slightly-darker-gray: var(--color-grey4);
  --color-dark-gray: var(--color-grey6);
  --color-darker-gray: var(--color-grey7);
  --color-horizontal-rule-grey: var(--color-grey3);
  --color-product-number-grey: var(--color-grey3);
  --color-horizontal-border-grey: var(--color-grey4);
  --color-menu-link: var(--color-grey6);
  --color-close-menu-bg: var(--color-grey2);
  --color-link-color: var(--color-dark-gray);
  --color-hr-border-color: var(--color-grey3);
  /** ==================================================================== **/
  /** Define skin named variables here                                    **/
  /** ==================================================================== **/
  --skin-background-color-1: var(--color-gray1);
  --skin-border-color-1: var(--color-white);
  --skin-main-text-color-1: var(--color-gray7);
  --skin-main-text-color-2: var(--color-gray7);
  --skin-menu-color-1: #444;
  --skin-menu-color-1-invert: var(--color-white);
  --skin-menu-color-2: #222;
  --skin-link-color-1: #444;
  --skin-link-color-2: var(--color-blue);
  --skin-primary-color-1: var(--color-primary);
  --skin-primary-color-2: var(--color-primary);
  --skin-primary-color-invert-1: var(--color-white);
  --skin-selectbox-background-color-1: var(--color-white);
  --skin-selectbox-text-color-1: var(--skin-main-text-color-1);
  --skin-banner-background-color-1: #444;
  --skin-banner-background-color-2: #222;
  --skin-banner-text-color-1: var(--color-white);
  --skin-heading-color-1: var(--color-primary);
  --skin-heading-color-1-invert: var(--color-white);
  --skin-price-1: var(--color-gray7);
  --skin-header-font: 'Dosis';
  --skin-body-font: var(--font-family-sans-serif); }

.contact-container {
  padding: 2.5rem 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; }
  @media (min-width: 768px) {
    .contact-container {
      margin: 0 0.25rem;
      padding: 1.875rem 0;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 1024px) {
    .contact-container {
      margin: 0 3.125rem; } }
  .contact-container .contact-container-left {
    padding: 1.5rem;
    width: 100%;
    background-color: #bac4c738;
    -webkit-box-shadow: 0 0 0.25rem 0 #14606e;
            box-shadow: 0 0 0.25rem 0 #14606e;
    border-radius: 0.625rem;
    margin-top: 1.875rem; }
    .contact-container .contact-container-left .contact-left .contact-heading {
      color: #212529;
      line-height: normal; }
    .contact-container .contact-container-left .contact-left .contact-icon {
      width: 2.375rem;
      aspect-ratio: 1;
      margin-bottom: 0.75rem; }
    .contact-container .contact-container-left .contact-left .contact-text {
      color: #212529;
      line-height: 1.625rem;
      margin: 0; }
      .contact-container .contact-container-left .contact-left .contact-text strong {
        font-weight: 500; }
    @media (min-width: 768px) {
      .contact-container .contact-container-left {
        padding: 3.5rem 2rem;
        margin-top: 0rem;
        border-radius: 0.625rem 0 0 0.625rem; }
        .contact-container .contact-container-left .contact-left .contact-icon {
          width: 3.125rem;
          aspect-ratio: 1;
          margin-bottom: 0.9375rem; }
        .contact-container .contact-container-left .contact-left .contact-text {
          line-height: 2rem;
          font-size: 1.125rem; } }
  .contact-container .contact-container-right {
    padding: 0rem; }
    .contact-container .contact-container-right .contact-form-container {
      padding: 1.25rem;
      width: 100%;
      background-color: #f5fffe;
      border-radius: 1.25rem;
      text-align: center; }
      .contact-container .contact-container-right .contact-form-container .success-modal-gif img {
        width: 9.375rem;
        height: 9.375rem; }
      .contact-container .contact-container-right .contact-form-container .contact-hyperlink-button:hover .contact-hyperlink {
        color: #fff !important; }
      .contact-container .contact-container-right .contact-form-container .contact-hyperlink-button .contact-hyperlink {
        text-decoration: none !important; }
        .contact-container .contact-container-right .contact-form-container .contact-hyperlink-button .contact-hyperlink:hover {
          color: inherit !important; }
      .contact-container .contact-container-right .contact-form-container .contact-form-title {
        font-weight: 700; }
      .contact-container .contact-container-right .contact-form-container .contact-form-subtitle {
        color: #636466;
        margin-bottom: 1.125rem; }
      .contact-container .contact-container-right .contact-form-container .contact-form .form-fields {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1.0625rem;
        margin-bottom: 0.9375rem; }
        .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input {
          position: relative;
          width: 100%; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .form-dropdown-field {
            width: 100%;
            color: #636466;
            position: relative; }
            .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .form-dropdown-field .select-dropdown-icon {
              position: absolute;
              right: 0.5rem;
              top: 50%;
              -webkit-transform: translateY(-50%) rotate(90deg);
                      transform: translateY(-50%) rotate(90deg);
              pointer-events: none;
              color: #4dc1d9;
              font-size: 1rem; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .form-input-fields {
            width: 100%;
            background-color: transparent;
            outline: none;
            border: none;
            border-bottom: 2px solid #ccc;
            padding: 0.625rem 0.3125rem 0.3125rem;
            color: #636466;
            font-size: 1rem;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .custom-dropdown {
            position: relative;
            width: 100%; }
            .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .custom-dropdown-selected {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
                  -ms-flex-align: center;
                      align-items: center;
              -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                      justify-content: space-between;
              height: 2.5625rem;
              padding: 0 0.5rem;
              cursor: pointer;
              background: transparent;
              padding-right: 1.5625rem;
              position: relative; }
            .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .custom-dropdown .select-dropdown-icon {
              position: absolute;
              right: 0.5rem;
              top: 50%;
              -webkit-transform: translateY(-50%) rotate(90deg);
                      transform: translateY(-50%) rotate(90deg);
              pointer-events: none;
              color: #4dc1d9;
              font-size: 1rem; }
            .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .custom-dropdown.open .custom-dropdown-selected {
              border-bottom-color: #00a6a6; }
            .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .custom-dropdown.open .custom-dropdown-options {
              display: block; }
            .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .custom-dropdown-options {
              position: absolute;
              left: 0;
              right: 0;
              background: #fff;
              max-height: 11.875rem;
              overflow-y: auto;
              display: none;
              border: 1px solid #ccc;
              z-index: 1; }
              .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .custom-dropdown-options li {
                text-align: left;
                padding: 0.3125rem 0.4375rem;
                font-size: 0.875rem;
                color: #636466;
                cursor: pointer;
                -webkit-transition: background-color 0.15s ease;
                transition: background-color 0.15s ease; }
                .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .custom-dropdown-options li:hover {
                  background-color: #0a58ca;
                  color: #fff; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input label {
            position: absolute;
            left: 0.3125rem;
            top: 0.625rem;
            pointer-events: none;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            margin-bottom: 0.3125rem;
            color: #636466;
            font-size: 0.875rem;
            line-height: 1.375rem;
            background-color: transparent; }
            .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input label.required::after {
              content: "*";
              color: #4dc1d9; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .form-input-fields:focus {
            border-color: #4dc1d9; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input input.form-input-fields:not(:-moz-placeholder-shown) + label {
            top: -0.75rem;
            font-size: 0.75rem;
            color: #4dc1d9; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input input.form-input-fields:not(:-ms-input-placeholder) + label {
            top: -0.75rem;
            font-size: 0.75rem;
            color: #4dc1d9; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input input.form-input-fields:focus + label,
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input input.form-input-fields:not(:placeholder-shown) + label {
            top: -0.75rem;
            font-size: 0.75rem;
            color: #4dc1d9; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input select.form-input-fields:invalid + label {
            display: block; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input select.form-input-fields:valid + label {
            display: none; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input select.form-input-fields:has(option:checked[value=""]) + label {
            display: block; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input select.form-input-fields:has(option:checked:not([value=""])) + label {
            display: none; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .input-error {
            border-bottom: 1px solid #dc3545 !important; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .label-error {
            color: #dc3545 !important; }
            .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input .label-error.required::after {
              color: #dc3545; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input select.input-error {
            border-bottom: 1px solid #dc3545; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input input:-webkit-autofill,
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input input:-webkit-autofill:focus,
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input input:-webkit-autofill:hover {
            -webkit-text-fill-color: #333 !important;
            -webkit-transition: background-color 9999s ease-in-out 0s !important;
            transition: background-color 9999s ease-in-out 0s !important;
            -webkit-box-shadow: 0 0 0 62.5rem transparent inset !important;
                    box-shadow: 0 0 0 62.5rem transparent inset !important;
            background-color: transparent !important; }
      .contact-container .contact-container-right .contact-form-container .contact-form .checkbox-wrapper {
        margin-bottom: 0.9375rem; }
        .contact-container .contact-container-right .contact-form-container .contact-form .checkbox-wrapper .form-label {
          text-align: left;
          color: #4dc1d9;
          font-size: 0.75rem;
          margin-bottom: 0rem; }
        .contact-container .contact-container-right .contact-form-container .contact-form .checkbox-wrapper .form-checkbox-input {
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none;
          width: 1.125rem;
          aspect-ratio: 1;
          border: 0.0625rem solid #14606e;
          border-radius: 0.25rem;
          background-color: #d4f2ef;
          cursor: pointer;
          margin-right: 0.625rem;
          position: relative; }
          .contact-container .contact-container-right .contact-form-container .contact-form .checkbox-wrapper .form-checkbox-input:checked {
            width: 1.125rem;
            height: 1.125rem;
            background-color: #14606e;
            border-color: #14606e; }
            .contact-container .contact-container-right .contact-form-container .contact-form .checkbox-wrapper .form-checkbox-input:checked::after {
              content: "";
              position: absolute;
              width: 0.375rem;
              height: 0.625rem;
              left: 0.375rem;
              top: 0.125rem;
              -webkit-transform-origin: center;
                      transform-origin: center;
              border: solid #d4f2ef;
              border-width: 0 0.125rem 0.125rem 0;
              -webkit-transform: rotate(45deg);
                      transform: rotate(45deg); }
    @media (min-width: 768px) {
      .contact-container .contact-container-right .contact-form-container {
        padding: 3.5rem 2.5rem;
        border-radius: 2rem; }
        .contact-container .contact-container-right .contact-form-container .contact-form-subtitle {
          margin-bottom: 1.5rem; }
        .contact-container .contact-container-right .contact-form-container .contact-form .form-fields {
          gap: 1.5rem;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          margin-bottom: 1.25rem; }
          .contact-container .contact-container-right .contact-form-container .contact-form .form-fields .form-input {
            width: 50%; }
        .contact-container .contact-container-right .contact-form-container .contact-form .checkbox-wrapper {
          margin-bottom: 1.25rem; } }