
.scaleToScreenHeight(@size) {
  @media (min-height: @size) {
    height: @size - 200px;
  }
}


.django-cradmin-form-wrapper {

  // Add some padding below the form. This is to avoid that the
  // floating submitrow overlaps anything in the form. It is not perfect,
  // but it works as long as there are not too many items in the submit row.
  padding-bottom: 150px;
  @media (min-width: @screen-sm-min) {
    padding-bottom: 80px;
  }

  .django-cradmin-form {
    background-color: @cradmin-form-bg;
    padding-bottom: 0;

    label {
      font-weight: normal;
      &.requiredField {
        font-weight: bold;
      }
      .asteriskField {
        color: rgb(220, 0, 0);
        display: inline-block;
        padding-left: 5px;
        font-size: ceil(@font-size-base + 2px);
        line-height: ceil(@font-size-base + 6px);
      }
    }

    &.django-cradmin-form-noasterisk {
      label .asteriskField {
        display: none;
      }
    }

    .cradmin-focusfield {
      .form-group {
        margin: 0;
        box-sizing: border-box;
        .controls {
          position: relative;

          input[type=text],
          input[type=email],
          input[type=number],
          textarea,
          .django-cradmin-bulkfileupload,
          .cradmin-div-styled-as-textarea {
            border: none;
            outline: none;
            border-radius: 0;
            box-shadow: none;
            margin: 0;
            .body-side-padding();
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #fff;
            height: auto;
            text-align: left;
            &:focus {
              background-color: @cradmin-form-selected-bg;
            }
            &.cradmin-focus {
              background-color: @cradmin-form-selected-bg;
            }

            @media (min-width: @screen-md-min) {
              max-width: 600px;
              border-right: 1px dashed #ccc;
            }
            @media (min-width: @screen-lg-min) {
              max-width: 800px;
            }
          }

          // Error messages - weird that they use the same css class as help blocks
          span.help-block {
            .body-side-padding();
          }

          // Actual help blocks
          p.help-block {
            position: relative;
            margin: 0;
            padding-top: 5px;
            padding-bottom: 15px;
            .body-side-padding();

            @media (min-width: @screen-md-min) {
              display: block;
              position: absolute;
              left: 625px;
              top: 10px;
              bottom: 0;
              overflow: hidden;
              padding-left: 22px;
              padding-right: 20px;
              padding-top: 0;
              padding-bottom: 0;
            }
            @media (min-width: @screen-lg-min) {
              left: 825px;
            }
          }
        }
      }

      &.cradmin-focusfield-lg {
        .form-group {
          input[type=text],
          input[type=email],
          input[type=number] {
            font-size: ceil(@font-size-base + 8px);
          }
        }
      }

      /**
      # .cradmin-focusfield-screenheight
      Scale the field focusfield to the screen height.
      Uses css media queries just like the bootstrap responsive grid does
      for the screen width.
      */
      &.cradmin-focusfield-screenheight {
        .form-group {
          margin: 0;
          box-sizing: border-box;
          .controls {
            textarea,
            .cradmin-div-styled-as-textarea {
              height: 200px;
              .scaleToScreenHeight(500px);
              .scaleToScreenHeight(550px);
              .scaleToScreenHeight(650px);
              .scaleToScreenHeight(750px);
              .scaleToScreenHeight(850px);
              .scaleToScreenHeight(950px);
              .scaleToScreenHeight(1050px);
            }
          }
        }
      }
    }

    fieldset legend,
    .cradmin-focusfield label {
      display: block;
      margin: 0;
      background-color: rgb(220, 220, 220);
      border: none;
      padding-top: 10px;
      padding-bottom: 10px;
      //    font-weight: normal;
      text-transform: uppercase;
      font-size: ceil(@font-size-base - 2px);
      line-height: ceil(@font-size-base + 6px);
      .body-side-padding();
    }

    fieldset,
    .cradmin-globalfields {
      // padding-top: 40px;
      // padding-bottom: 40px;
      .form-group {
        padding-top: 20px;
        padding-bottom: 4px;
        margin: 0;
        .body-side-padding();
        background-color: #fff;

        &:last-child {
          padding-bottom: 30px;
        }

        input[type=text],
        input[type=email],
        input[type=number],
        textarea,
        select {
          border: 1px solid #ddd;
          border-radius: 4px;
          outline: none;
          box-shadow: none;
          padding: 10px 12px;
          background-color: #FAFAFA;
          &:focus {
            background-color: @cradmin-form-selected-bg;
          }
        }

        input[type=text],
        input[type=email],
        input[type=number],
        textarea {
          height: auto;
          margin: 0;
          text-align: left;
        }

        @media (min-width: @screen-md-min) {
          max-width: 600px;
          border-right: 1px dashed #ccc;
        }
        @media (min-width: @screen-lg-min) {
          max-width: 800px;
        }
      }
    }
  }
}
