@import "tailwindcss";

@media screen {
  .dnd-column:has(.form-module) {
    padding:0;
}
  .form-module {
    .form-wrapper {
      max-width:954px;
      margin:0 auto;
      .top-content {
        margin-bottom: 30px;
        .heading {
          margin-bottom: 30px;
          h2 {
            font-size: 32px;
            font-weight: 300;
            @media(max-width:768px) {
              line-height:normal;
            }  
            @media (min-width:768px) {
              font-size: 48px;
            }
            strong {
              font-weight: 700;
            }
          }
        }
        .description 
          a {
            color:#285EA3;
            &:hover {
              text-decoration:underline;
            }
          }
          p {
            font-size: 16px;
          }
        }
      }
      .form {
        .form-title {
          display: none;
        }
        form {
          border-radius: 12px;
          border: 1px solid var(--Light-Grey, #BCBEC0);
          background-color: #FFF;
          box-shadow: 0px 4px 71.6px 0px rgba(0, 0, 0, 0.15);
          padding: 20px;
          max-width: 700px;
          margin: auto;
          .form-columns-0 {
            max-width: 100%;
            margin-bottom: 30px;
          }
          .form-columns-2 {
            display:flex;
            flex-direction: row;
            gap:24px;
            align-items: start;
            flex-wrap:wrap;
            justify-content:space-between;
            max-width: 100%;
            .hs-form-field {
              width: 100%;
              @media (min-width:768px) {
                width: calc(50% - 12px);
              }
              input {
                width: 100%;
              }
            }
            .hs-input {
              width:100%;
              border-radius: 4px;
              border: 1px solid var(--Light-Grey, #BCBEC0);
              background: #FFF;
            }
            .input {
              margin-right: 0;
            }
          }
          .form-columns-1 {
            max-width: 100%;
            .hs-input {
              width:100%;
              border-radius: 4px;
              border: 1px solid var(--Light-Grey, #BCBEC0);
              background: #FFF;
            }
            .input {
              margin-right: 0;
            }
          }
          .hs-richtext {
            font-size: 16px;
            margin: 0 0 30px;
            p {
              font-size: 16px;
              margin: 0 0 30px;
            }
            
          }
          textarea {
            height: 200px !important;
          }
          .input {
            .hs-input {
             height: 48px;
             padding: 0 15px;
             font-size: 16px;
            }
            input[type="file"] {
              padding: 5px;
            }
          }
    
          .hs-form-field {
            margin-bottom:30px;
          }
          .hs-form-booleancheckbox {
            margin:0;
          }
          label {
            margin-bottom: 8px;
            font-size: 16px;
            &.hs-form-booleancheckbox-display {
              display:flex;
              flex-direction: row;
              width: 100%;
              margin: 0;
              align-items:center;
            }
            input[type="checkbox"] {
              width: 24px !important;
              height: 24px !important;
              border-radius: 6px !important;
              border: 1px solid var(--Light-Grey, #BCBEC0);
              background: #FFF;
              margin-right: 8px;
            }
            span {
              color: var(--Grey, #4A4A49);
              font-family: "Open Sans";
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              line-height: 28px; /* 140% */
              letter-spacing: -0.2px;
            }
            .hs-form-required {
              color: #F00;
            }
          }
          .legal-consent-container {
            .hs-richtext {
              a {
                color:#C94E00;
                text-decoration:underline;
              }
            }
          }
          .hs-submit {
            input {
              border-radius: 4px;
              background: #C94E00;
              border:2px solid #C94E00;
              width: 100%;
              color: var(--White, #FFF);
              font-family: Aptos;
              font-size: 16px;
              font-style: normal;
              font-weight: 700;
              line-height: 28px;
              transition: 0.3s all ease-in-out;
              padding:14px;
              &:hover {
                background-color: transparent;
                color:#C94E00;
              }
            }
          }
        }
      } 
    }

  }
}