/*Date 8-7-2025*/

/*Defining the Reference Colors*/
:root {
  --c-primary-1: #396694;
  --c-primary-2: #006eca;
  --c-primary-3: #062b56;
  --c-primary-4: #e7f2f8;
  --c-primary-5: #fff9e5;
  --c-secondary-1: #b039b0;
  --c-secondary-2: #98cb45;
  --c-secondary-3: #e0833c;
  --c-secondary-4: #009797;
  --c-secondary-5: #f7d157;
  --c-secondary-6: #f75757;
  --c-tone-1: #fff;
  --c-tone-2: #f7f7f7;
  --c-tone-3: #c8c8c8;
  --c-tone-4: #acacac;
  --c-tone-5: #909090;
  --c-tone-6: #737373;
  --c-tone-7: #565656;
  --c-tone-8: #363636;
  --c-tone-9: #000;
  --c-tone-9-opacity-60: rgba(0, 0, 0, 0.6);
  --c-tone-9-opacity-15: rgba(0, 0, 0, 0.15);
  --c-tone-9-opacity-06: rgba(0, 0, 0, 0.06);
  --c-warning: #f7d157;
  --c-error: #f75757;
  --c-success: #e7f2f8
}

.form-item {
    max-width: 100%; /*Creating a Responsive Width for Containers and Fields*/ 
    font-size: 14px; /*Bulletpoint Font Size*/
    margin-top: .5rem; /*Evening Table Margins*/
}

/*Grey Padding Styling*/
fieldset:not(.fieldgroup) {-------------------
        display: flex;
        background-color: var(--c-tone-2);
        border: none; 
        margin: 0 0 20px 0;
        padding: 55px 20px 20px 20px;
        min-width: 100%; /*This is important to have as 100% to force the mobile widths to behave as expected and not to go beyond the screen*/
        position: relative;
      }

/*Adjusting the Header Position in Grey Padding*/
fieldset:not(.fieldgroup) > legend {
        font-size: 16px; /*Header Font Size - This refers to the first line of text on the Grey Paddings/Section*/
        color: var(--c-primary-1);
        position: absolute;
        top: 15px;
      }

/*Bolding Headers*/
.fieldset-legend {
          font-weight: 700;
      }

/*"Paragraph" Text Size - This refers to very general text which includes the subheadings and the subheadings' descriptions*/
body p {
          font-size: 14px;
      }


/*Input Fields Box Styling*/
.form-item__textfield {
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--c-tone-9-opacity-15);
  color: var(--c-tone-9);
  background: #fcfcfa;
  min-height: 44px;
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  min-width: 240px;
  width: 100%;
  font-size: 14px;
  line-height: 18px;

  /*Changing the Minus Button's Height*/
  min-height: 12px; 
  height:auto; 
  /*Changing the Min Button Width*/
  min-width: 16px;
}

/*Remove White Padding Around Table
.table__row:nth-child(odd),.text-long tr:nth-child(odd) {
          background-color: var(#FFFFFFF);
      }*/

/*Adding Indentation for Bullet Point*/
ul,ol {
  padding-left: 3em
}


/*Creating a the Checkbox's Characteristics*/
/*The Radio Buttons are also Affected Under this Styling*/
input[type=checkbox],
          input[type=radio] {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            display: inline-block;
            position: relative;
            top: 3px;
            margin: 0;
            padding: 0;
            background: #fff;
            border: 1px solid #b5b5b5;
            width: 16px;
            height: 16px;
            -webkit-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: background 0.5s ease;
            border-radius: 0;
          }

/*Button Selection Indicator*/
input[type=checkbox]:checked,
          input[type=checkbox]:disabled:checked,
          input[type=radio]:checked,
          input[type=radio]:disabled:checked,
          input[type='checkbox']:checked.error,
          input[type='radio']:checked.error{
            background: #0678be;
            box-shadow: inset 0 0 0 3px #fff;
          }

/*Button Hovering Feature*/
input[type=checkbox]:hover,
          input[type=checkbox]:focus,
          input[type=radio]:hover,
          input[type=radio]:focus {
            border-color: #0678be;
            cursor: pointer;
            outline: transparent;
          }

/*Making the Option Labels Wrap Around the Checkbox and Radio Buttons*/
.form-item label.option {
            text-transform: none;
            display: inline;
            margin-left: 5px;
            font-weight: 400;
          }

/*Preventing the Labels from Wrapping into Multiple Lines*/
.webform-options-display-side-by-side > div {
            display: inline-block;
            flex-direction: row;
            white-space: nowrap;
                    }

/*Lining Up Radio Buttons with Label*/
.webform-element--title-inline > .webform-options-display-side-by-side {
display: inline;
}

/*Lining Labels with Checkboxes and Changing the Box Width*/
.form-item--checkboxes input[type=checkbox],.form-item--checkbox__item input[type=checkbox] {
  display: inline-block;
  width: 1rem;
}

/*Changing Checkbox Height*/
.form-item--checkboxes input[type=checkbox],.form-item--checkbox__item input[type=checkbox] {
  height: 1rem;
}

/*Correcting Field Spills in Green Infrastructure Installation Summary*/
.form-item label {
          display: table;
      }

/*Making the Radio Buttons Round*/
input[type=radio] {
border-radius: 50%;
}

/*Field Title Font Size*/
.form-item__label {
  font-size: 14px;
  font-weight: 700;  
}

/*Dropdown Items Font Size*/
.form-item__select {
  font-size: 14px;
}

/*Checkbox Items Font Size*/
.form-item--checkboxes label,.form-item--checkbox__item label {
  font-size: 14px;
}

/*Changing the Padding Size on Tables*/
.table__heading-cell,.text-long th,.table__cell,.text-long td {
  padding: .6rem;
}

/*"Remove" Button Width and Colors*/
.button.form-submit {
  background-color: var(--c-primary-1);
  color:var(--c-tone-1);
  min-width: 270px;
  width: fit-content;
  max-width: 100%;
}

/*"Remove" Button Hover Colors"*/
.button.form-submit:hover {
  background-color: var(--c-primary-3);
  color:var(--c-tone-1);
}

/*"Remove" Button Resetting Colors After Click*/
.button.form-submit:active {
  background-color: var(--c-tone-1);
  color: var(--c-tone-9);
}

/*Adding Required Indicator (red *)*/
.form-required::after {
content: "\00a0*";
color: #e32700;
white-space: nowrap;
}

/*Adding a Red Border and Fill With Missing Required Fields*/
.form-item input.error,
.form-item textarea.error,
.form-item select.error {
border-width: 1px;
border-color: #e62600;
background-color: hsla(15, 75%, 97%, 1);
color: #a51b00;
}

/*Changing the Color of Hyperlinks*/
a {
  color: var(--c-primary-2);
}

/*Adding Highlight over Hyperlink when Hovered*/
a:not(.button):hover,.rich-text__body a:not(.button):active,.rich-text__body a:not(.button):focus {
  background-color: var(--c-primary-4);
  color: var(--c-primary-2)
}

/*Making the "Reset" Button in the Signature Field Take up the Full Width of the Field and Sit at the Bottom*/
.webform-signature-pad .button {
position: sticky;
width: 100% !important;
}

/*Making the "Save Draft" Button a Different Color*/
input.webform-button--draft.button.js-form-submit.form-submit.form-item__textfield{
  background-color: var(--c-tone-1); 
  color: var(--c-tone-9);
}

/*Making the Hover Colors of the "Save Draft" Button*/
input.webform-button--draft.button.js-form-submit.form-submit.form-item__textfield:hover {
  background-color: var(--c-primary-2);
  color: var(--c-tone-1);
}

/*Changing the Background-Color of the Dropdown Fields*/
.form-item__select {
      background-color: #fcfcfa;
  }

/*Preventing Radio Button Options from Spilling out of the Form in Mobile*/
@media (max-width: 600px) {
          .webform-options-display-side-by-side {
              flex-direction: column;
              display: flex;
          }
          .form-item label.option {
          margin-top: 1.5px;
          white-space: pre-wrap; /* Ensure text wraps within the label */
          }
          .webform-options-display-side-by-side > div {
            display: inline-flex;
          }

/*Mobile Styling*/
.webform-multiple-table td {
    white-space: normal; /*Prevents fields from spilling in mobile*/
    padding-top: 0rem; /*Creates spacing between the minus button and text so they don't overlap Castillo moved spacing to table row*/
}

@media (max-width: 768px) {
.webform-multiple-table-responsive td {
  padding: 0.0em 1em;
}
}  

/*Adding more spacing between the top of a field from the subtract button in mobile view*/
  .webform-multiple-table-responsive tr {
  padding: 2em 0 0 0em;
}

/*Making the buttons in mobile view take up the whole width of the form*/
.button.form-submit {
  width: 100%;
}
      }

/*Changing the Position of Subtract Buttons in a Container to be more Corner Centered*/
.webform-multiple-table-responsive td.webform-multiple-table--operations {
  right: 0.4rem;
}

/*This affects the way the screen prints*/
@media print {
footer, .webform-confirmation__back {
  display: none;
}
body {
  background-color: #fff !important;
}
.flexgrid {
  width: auto !important;
}
fieldset:not(.fieldgroup) {
  border: solid #c8c8c8 !important;    
  background-color: #fff !important;
}
table, th, td {
  border: 1px solid #c8c8c8 !important;
  page-break-inside: avoid;
}
}

/*Makes header 'static' on page - for printing and better mobile view*/
.header{
  position:relative;
}
body {
  padding-top:0px
}

/*Horizontal Rule Styling*/
hr {
  border: solid 1px var(--c-tone-3)
}

/*Date Picker Sizing and Zpriority*/
.ui-datepicker {
z-index: 150 !important;
width: 14.5em;
}

/*Fix flexbox flexbox margins*/
@media (min-width: 768px) {
  .webform-flexbox .webform-flexbox {
      margin: 0em -0.5em;
  }
}

/*Radio (fieldset) margin correction*/
.webform-type-radios {
  margin-top: 1em;
}

/*Status Box Color for Banner Notifications*/
.status--status{
background-color: var(--c-primary-5);
}

/*Banner Notifications Hyperlink color and word wrap*/
.status a {
  color: var(--c-primary-2);
  word-wrap: break-word;
}

/*Custom Class to Mark Text Red as Needed*/
.textred{
  color:red
}

/*Custom Class to remove links on confirmation page*/
.no-link a {
  pointer-events: none;
  color: var(--c-tone-8);
  text-decoration: none;
}