.container {
  width: unset;
}

#ccrrc-contact-us-form {
  @font-face {
      font-family: 'Graphik Regular';
      src: url('clientlib-forms/font/Graphik-Regular.otf') format('otf');
      font-style: normal;
  }

  #guideContainerForm {
      margin-top: 24px;
      font-size: 16px;
      font-family: 'Graphik Regular';
      color: black;
      line-height: 150%;
      font-weight: 400;

      .step.mobileLayout {
          display: none;
      }

      .validation-failure {
          background-color: transparent;
          border: none;
      }

      .fd-row.guideGridFluidLayout2Container {
          &::before {
              display: none;
          }
      }

      #guideContainer-rootPanel-panel-panel___guide-item-container,
      #guideContainer-rootPanel-panel-panel___guide-item-container * {
          box-sizing: border-box;
      }

      #guideContainer-rootPanel-panel-panel___guide-item-container {
          overflow: visible !important;

          .fd-row.guideGridFluidLayout2Container {
              display: flex;
              flex-wrap: wrap;
              gap: 24px;

              > div {
                  flex: 0 0 calc(100%);
                  @media (min-width: 855px) {
                      flex: 0 0 calc(50% - 12px);
                  }
              }
          }
      }

      #guideContainer-rootPanel-panel-panel-guidetextbox_63391189___guide-item {
          flex: 0 0 calc(100%) !important;
          max-width: 100%;
          height: 168px;
      }

      #guideContainer-rootPanel-panel-guidecaptcha___guide-item {
          display: none;
      }

      .guideFieldNode.guideTextBox {
          margin: 0;
          padding: 0;

          &.validation-failure {
              background-color: transparent;
              border: none;

              input {
                  outline: 2px solid #d80000;
                  outline-offset: -2px;
              }
          }

          &.validation-success {
              background-color: transparent;
              border: none;
          }
      }

      .guideFieldError {
          font-size: 14px;
          font-family: 'Graphik', sans-serif;
          line-height: 150%;
          font-weight: 400;
          color: #d80000;
          margin-bottom: 0;
      }

      label {
          font-size: 16px;
          font-family: 'Graphik', sans-serif;
          color: black;
          line-height: 150%;
          font-weight: 400;
          margin-bottom: 8px;
      }

      textarea {
          height: 168px !important;
          resize: none;
      }

      .button-default.button-medium.submit {
          color: white;
          cursor: pointer;
          background: black;
          border: 0.166667rem solid transparent;
          border-radius: 8.33333rem;
          justify-content: center;
          align-items: center;
          gap: 0.333333rem;
          max-width: 27.1667rem;
          min-height: 3.66667rem;
          margin: 32px 0 24px 0;
          padding: 0.666667rem 1.33333rem;
          font-family: 'Graphik', sans-serif;
          font-size: 1.33333rem;
          font-weight: 600;
          line-height: 2rem;
          transition: all 0.3s;
          display: inline-flex;
          position: relative;

          &:hover {
              background-color: #545757;
              border-color: #545757;
          }

          &:active {
              background-color: #818387;
              border-color: transparent;
          }

          span {
              font-size: 16px;
              font-family: 'Graphik', sans-serif;
              color: white;
              line-height: 150%;
              font-weight: 400;
          }
      }

      .iconButton-label {
          &::after {
              content: '';
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19M19 12L13 18M19 12L13 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
              display: inline-block;
              width: 24px;
              height: 18px;
              transition: transform 0.3s ease;
          }

          &:hover {
              &::after {
                  transform: translateX(4px);
              }
          }
      }

      input,
      textarea {
          font-family: 'Graphik', sans-serif;
          font-size: 16px;
          color: black;
          max-width: 100%;
          line-height: 150%;
          font-weight: 400;
          background: #ffffff;
          border: 1px solid black;
          border-radius: 0;
          padding: 16px 24px;
          margin-bottom: 8px;

          &:focus {
              outline: 2px solid black;
              box-shadow: 0 0 10px #00000059;
              outline-offset: -2px;
          }

          &:hover {
              background: #ededed;
          }

          &:active {
              background: #dcdcdc;
          }
      }

      input {
          height: 56px;
      }

      textarea {
          height: 168px !important;
          resize: none;
      }
  }
}