@media screen and (max-width: 430px) {
  h1 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .page-heading {
    padding-top: 0px !important;
  }

  .page-header {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

/*
Date: 2025-09-26
Description: Commented out as required from 
User Story 89935: As a user, I would like the header and footer to  to reflect the updated design
*/
/*
  body {
    padding-right: 5px;
    padding-left: 5px;
  }
*/
  div.container {
    padding-right: 0px;
    padding-left: 0px;
  }

  div.col-md-12 {
    padding-right: 0px;
    padding-left: 0px;
  }

  p {
    font: -apple-system-body;
  }
  .p-text-size {
    font-size: 1em;
  }
}

h2 {
  margin-top: 0px !important;
}

/*
Story: User Story 35445: As a user, I would like to see more padding between open text fields and the text character counters
Date: Jan 22, 2026
Description: apply to all 10 textareas.
*/
#detailsOfTheProblemSection textarea {
    margin-bottom: 10px; 
}



/*
User Story: Incidents and Issues 98980: As a user, the manadatory field * should be the same colour as the error messages
Date: Jan 26, 2026
*/

:root {
    --color-mandatory: #9E0B0F; /* Mandatory field indicator color - change here to update everywhere */
}

 /*
        Date: 2026-01-29
        Story: User Story 99010: Confirmation email for SO311 should be sent to all users who provide an email address
               Set the Visible Checkbox to Checked (For the User UI)
 */
#ci_confirmationemail_row {
    display: none;
}

/*
    Date: 2026-02-03
    User Story 99011: Disclaimer text for councillor and mayor checkbox should be modified
    
*/
#sr_contact_notes {
    padding-left:14px;
    padding-right:14px; 
    margin-top:5px;
}

/*
Date: 2025-09-26
Description: Commented out as required from 
User Story 89935: As a user, I would like the header and footer to  to reflect the updated design

.row {
  margin-bottom: 5px !important;
}
*/


.overlay{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(255,255,255,0.7) url("loader.svg") center no-repeat;
  }

body.loading{
  overflow: hidden;   
  }

body.loading .overlay{
  display: block;
  }


/* Date: 2025-09-22
   Purpose: Site-specific overrides for Header & Footer imported from ottuxWidgets.
   Rationale: Some ottuxWidgets rules are being overwritten or superseded by shared CSS
             (e.g., ottawabasev2.css, portalbasictheme.css). These rules restore the
             intended layout, alignment, and colors for header/footer only.
   Scope:    Header (#ott-header-container …) and Footer (#ottawa-footer …) — do not
             target other components.
   Strategy: Prefer scoped, higher-specificity selectors over !important. If load order
             cannot be changed, ensure selectors out-rank base/theme rules. */


/* Only the copyright line in the footer */
footer#ottawa-footer .row.copyright span { color: #fff; }

/* Header logo container: override theme.css (.logo-container { height:51px }) */
#ott-header-container .logo-container { 
  height: auto;          /* or: height: initial; or unset */
  min-height: 0;         /* safety in case theme set one */
}


#ottawa-backtotop {
   /*right: 20px;   or whatever value you want */
 /*  position: fixed; make sure it’s fixed to viewport */
        max-width: 100%;
}

/* phones (Bootstrap "xs") */
@media (max-width: 992px) {
  #ott-header-container .header-row.row.topbar.align-items-stretch {
    min-height: 90px;
  }

    /* Kill the Bootstrap clearfix pseudo-elements only in the header area */
    #ott-header-container .container::before,
    #ott-header-container .container::after {
      content: none;   /* prevents the pseudo-elements from being created */
      /* display becomes irrelevant once content is none */
    }

}