/* MAIN CHANGES FROM THE STANDARD CSS TEMPLATE: 
    - Change the border size of "Number of Applications Pending Adjudication in CRM" and "Total Number of Units Completed to Date" */

/* SimpliGov Form CSS Template ??? NJ DCA
   To customize: edit the variables in the SETTINGS block below.
   To extend:    add form-specific overrides at the bottom of this file.
   WARNING:      do not remove Section 8 ??? it masks raw SSN values. */


/* ?????? SETTINGS ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   Edit these values to change the form's appearance.
   Everything else in this file references these variables.                   */

:root {
  /* Colors */
  --color-background:     #f0f0f0;
  --color-form-bg:        #ffffff;
  --color-text:           #000000;
  --color-heading:        #092940;
  --color-heading-border: #347EB6;
  --color-button:         #3BA2FC;
  --color-button-text:    #ffffff;
  --color-button-hover:   color-mix(in srgb, var(--color-heading) 20%, transparent);
  --color-input-border:   color-mix(in srgb, var(--color-text) 30%, transparent);

  /* Typography ??? BariolRegular must be loaded by the host page */
  --font-body:         'Segoe UI', sans-serif;
  --font-heading:      BariolRegular, Verdana, Helvetica, Arial, sans-serif;
  --font-size-body:    14px;
  --font-size-heading: 23px;

  /* Layout */
  --form-width:  60%;
  --form-radius: 8px;
}

/* ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */


/* 1. LAYOUT & EMBEDDING ----------------------------------------------------- */

h2,
.page-head,
.page-footer,
.infoSection,
.workflowRightTab,
#print-preview {
  display: none !important;
}

#workflow-wrapper:not(.embed):not(.registered-embed) {
  min-height: 0;
}

#divWorkflowContent {
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
}

div#workflow-background-wrapper {
  border: 0;
  margin: 0 auto !important;
  width: var(--form-width);
  max-width: var(--form-width);
}

#workflow-background-wrapper {
  margin: auto !important;
  border-right: none !important;
}

div#thank-you-text,
div#workflow-background-wrapper {
  box-shadow: none !important;
}

.exit-workflow-text {
  float: left;
  padding-top: 5px;
  color: var(--color-heading);
}


/* 2. BACKGROUND & PAGE WRAP ------------------------------------------------- */

html,
body,
.page-wrap {
  background: var(--color-background) !important;
}

.page-content,
.inner,
#justForPadding,
.workflowSpecific,
#contentWorkbench,
#formWorkflowSpace,
#divWorkflowContent,
#workflow-wrapper {
  background: transparent !important;
}

#workflow-background-wrapper {
  background: var(--color-form-bg) !important;
  border-radius: var(--form-radius) !important;
  overflow: hidden;
}

#workflow-wrapper,
#divWorkflowContent {
  padding: 20px 0 !important;
}

.page-content {
  min-height: 500px;
  padding: 0 !important;
}

body div.page-content,
body div.inner {
  max-width: 100% !important;
}

div.page-wrap {
  padding-bottom: 0 !important;
}


/* 3. TYPOGRAPHY ------------------------------------------------------------- */

#tsForm-editor,
.workflowContent {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-body);
  color: var(--color-text);
  accent-color: var(--color-button);
}

body,
.form-label,
.workflowContent .form-static-text,
.form-element-wrapper .form-static-text,
.form-element-wrapper .form-static-text-area,
.formFieldWrapper .radio-checkbox-label,
.form-element-wrapper .radio-checkbox-label,
.page-content .formFieldWrapper.text-box-wrapper input.input-text,
.formFieldWrapper input.validate-email,
.formFieldWrapper input.validate-phone,
.formFieldWrapper input.validate-ssn,
.formFieldWrapper input.validate-currency,
textarea,
.select2-selection__rendered,
.select2-selection__choice {
  color: var(--color-text) !important;
}

input,
textarea,
.select2-selection__rendered {
  font-weight: normal !important;
}

.workflowContent .form-static-text,
.form-element-wrapper .form-static-text,
.form-label {
  text-wrap: pretty;
}

.form-section {
  display: block;
  overflow: hidden;
  padding-left: 10px;
  padding-bottom: 16px;
}


/* 4. HEADINGS --------------------------------------------------------------- */

.recordForm .formFieldWrapper.heading-wrapper h3,
.workflowContent .formFieldWrapper.heading-wrapper h3,
.form-element-wrapper[data-type="heading"] .heading-label-wrapper .editable-text,
.form-element-wrapper[data-type="heading"] .heading-label-wrapper input,
.page-content .workflowContent .formFieldWrapper.heading-wrapper h3 {
  color: var(--color-heading) !important;
  border-color: var(--color-heading-border) !important;
  font-family: var(--font-heading) !important;
  font-size: var(--font-size-heading) !important;
  font-weight: 400 !important;
  text-wrap: balance;
}

.formFieldWrapper .sub-heading,
.form-element-wrapper .editable-text-wrapper.sub-heading-wrapper > span,
.form-element-wrapper .editable-text-wrapper.sub-heading-wrapper > input {
  padding-top: 5px;
}


/* 5. INPUTS ----------------------------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"]:not(.select2-search__field),
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  border: 1px solid var(--color-input-border);
  background-color: white;
}

.formFieldWrapper.text-area-wrapper textarea.textarea-input,
.form-element-wrapper.text-area textarea.field {
  background-color: white;
  border-color: var(--color-input-border);
}

textarea {
  width: 100% !important;
}

.withQTip.toCheck.input-text.textfield {
  width: auto !important;
}

.select2-container--bootstrap .select2-selection {
  border: 1px solid var(--color-input-border);
  color: var(--color-heading);
}

.k-dropzone {
  background-color: white;
}

.k-maskedtextbox {
  background-color: var(--color-form-bg);
}

.rc-anchor-light.rc-anchor-normal {
  border: 1px solid var(--color-input-border) !important;
}


/* 6. BUTTONS ---------------------------------------------------------------- */

.form-save-button,
.form-reset-button,
.form-print-button,
.form-change-section,
.form-collaboration-stage-submit-button,
.form-submit-button,
#divWorkflowContent .buttonPopup.blue {
  padding: 11px 15px !important;
  color: var(--color-button-text) !important;
  background: var(--color-button) !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease-in-out;
}

.form-save-button:hover,
.form-reset-button:hover,
.form-print-button:hover,
.form-change-section:hover,
.form-collaboration-stage-submit-button:hover,
.form-submit-button:hover,
#divWorkflowContent .buttonPopup.blue:hover {
  box-shadow: 0 0 0 5px var(--color-button-hover);
}

.form-section-buttons {
  padding: 50px 0 30px;
}

.form-container-wrapper .add-item-template {
  background-color: #3BA2FC;
}


/* 7. SIGNATURE FIELDS ------------------------------------------------------- */

.sigNav {
  width: 350px !important;
}

.sigPad:not(.standalone) div.sigNav div.name-wrapper:nth-of-type(1) {
  min-width: 100px !important;
  width: 30% !important;
}

.sigPad:not(.standalone) input.name {
  width: 100%;
  border: 1px solid var(--color-input-border) !important;
  margin-right: 2px;
  margin-top: 5px;
  color: var(--color-heading);
}


/* 8. SSN FIELDS ------------------------------------------------------------- */
/* SimpliGov overlays a transparent input on the masked value.
   These rules must stay ??? removing them exposes raw SSN values in plain text. */

.withQTip.toCheck.input-text.textfield.validate-ssn {
  background-color: transparent !important;
  color: transparent !important;
}

.validate-ssn,
.validate-ssn:focus {
  color: transparent !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-body) !important;
}

.input-text.validate-ssn-mask {
  width: 100% !important;
  box-sizing: border-box;
}

.truncateWithEllipsis {
  margin-top: 2px !important;
}

/* 9. EMBEDS ------------------------------------------------------------- */
/* For Embeds */
/* Force centering when the form is embedded */
#workflow-wrapper.embed, 
#workflow-wrapper.registered-embed,
#divWorkflowContent {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

#workflow-background-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* 10. MOBILE (???768px) -------------------------------------------------------- */

@media (width <= 768px) {
  .page-wrap {
    width: 95vw;
    margin: 0 auto;
  }

  body {
    overflow-x: hidden !important;
  }

  .qtip {
    display: none !important;
  }

  #StageSubmitForm {
    padding: 0 !important;
  }

  input,
  select:focus,
  textarea {
    font-size: var(--font-size-body) !important;
  }

  .k-widget.k-window {
    width: 90vw !important;
    left: 10px !important;
  }

  #contentWorkbench {
    width: 100%;
  }

  .workflowContent .formFieldWrapper,
  #ts-form-editor-wrapper .form-element-wrapper {
    padding: 15px 10px 7px 0 !important;
    font-size: var(--font-size-body);
  }

  .formFieldWrapper .radio-checkbox-label,
  .form-element-wrapper .radio-checkbox-label,
  .radio-checkbox-label {
    font-size: var(--font-size-body);
    width: 100%;
  }


  .form-element-wrapper .select2-container .select2-selection--single,
  .formFieldWrapper .select2-container .select2-selection--single {
    font-size: var(--font-size-body);
  }

  .page-content .formFieldWrapper.submit-button-wrapper > div > input,
  .page-content .formFieldWrapper.action-button-wrapper > div > input,
  .page-content .form-section-buttons button,
  .page-content .form-section-buttons input,
  .form-collaboration-stage-submit-button,
  #divWorkflowContent .buttonPopup.blue {
    font-size: var(--font-size-body) !important;
  }

  div#workflow-background-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
  }
}


/* ?????? PER-FORM OVERRIDES ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   Add form-specific CSS below this line.
   To change a color or font for one form only, override a variable:

     :root { --color-button: #e63946; }

   To hide or adjust a specific field:

     #form-element-wrapper_6 { display: none; }

   ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */