/* Powermail Styles */

@media all {

  .tx-powermail {

    .container-fluid {
      padding: 0;
    }

    .powermail_form {
      --gap: 1.25rem;
      --radius: .25rem;
      --columns: 1;
      display: flex;
      flex-direction: column;
      padding: 2.5rem;
      border-radius: calc(var(--border-radius) * 2);
      box-shadow: var(--box-shadow);
      margin-bottom: 2.5rem;

      hr {
        opacity: 1;
        height: 0;
        background: transparent;
        border-top: 1px dashed rgba(0, 0, 0, .1);
        margin-block: 1.25rem;
      }

      > h3 {
        display: none;
      }

      .powermail_fieldset {
        display: grid;
        grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
        gap: var(--gap);

        + .powermail_fieldset::before {
          content: "";
          grid-column: 1 / -1;
          margin-block: 1.25rem;
          border-top: 1px solid rgba(0, 0, 0, .1);
        }

        + .powermail_fieldset {
          margin-top: calc(var(--gap) * 1.5);
        }

        .powermail_legend {
          grid-column: 1 / -1;
          margin: 0;
        }

        .powermail_fieldwrap {

          &.width-100 ,
          &[class*="powermail_fieldwrap_div"] {
            grid-column: 1 / -1;
          }

          .powermail_label {

            .mandatory {
              margin-left: .25em;
            }

            .powermail_field_description {
              display: block;
            }

          }

          .powermail_field {
            position: relative;
            font-size: 1rem;

            .powermail_input ,
            .powermail_select ,
            .powermail_file ,
            .powermail_captcha ,
            .powermail_submit ,
            .powermail_textarea {
              min-height: 2.5rem;
              background-color: rgb(0, 0, 0, .025);
              border-color: rgb(0, 0, 0, .075);
              border-width: 1px;
              border-radius: var(--radius);
              box-shadow: 0 0 .75rem rgba(0, 0, 0, .025) inset;

              &:has(+ ul) {
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
              }

            }

            .powermail_submit {
              background-color: var(--color-primary);
              color: rgb(255, 255, 255);
              font-weight: bold;
              padding: 1.25rem 2.5rem;
              display: inline-block;
              width: auto;
              max-height: unset;
            }            

            .powermail_captchaimage {
              position: absolute;
              top: 0;
              right: 0;
              max-height: 2.5rem;
              border-radius: var(--radius);
            }

            .powermail-errors-list {
              list-style: none;
              margin: 0;
              padding: .25rem .75rem;
              background-color: #bb0000;
              color: white;
              font-size: 1rem;
              font-weight: bold;
              border-bottom-left-radius: var(--radius);
              border-bottom-right-radius: var(--radius);
              max-width: unset;
            }

          }

        }

        .powermail_fieldwrap_type_text {
          grid-column: 1 / -1;
          font-size: 1rem;
          font-weight: bold;
        }

      }

      @media (min-width: 64rem) {
        --columns: 2;
      }

    }

  }

}