@media (max-width: 1025px) {

  :root {
    --container-width: 95vw!important;
    --percent-font-size: 0.8;
  }

  .h1-title {
    font-size: calc(var(--h1-title-font-size) * var(--percent-font-size))!important;
  }

  .welcome-message {
    font-size: calc(var(--welcome-message-font-size) * var(--percent-font-size))!important;
  }

  .h2-title {
    margin-bottom: 16px;
    font-size: calc(var(--h2-title-font-size) *  var(--percent-font-size))!important;
  }

  .h3-title {
    font-size: calc(var(--h3-title-font-size) *  var(--percent-font-size))!important;
  }

  .menu-item mat-card a span  {
    font-size: calc(var(--menu-item-font-size) *  var(--percent-font-size))!important;
  }

  .question-label {
    font-size: calc(var(--question-label-font-size) * var(--percent-font-size))!important;
  }

  .menu-item {
    width: 100%!important;
  }

  app-root {
    max-width: var(--container-width)!important;
  }

 .wrap-portal100 {
    min-width: auto;
 }

 .app-container {
    padding: 16px;
    min-width: var(--container-width);
    max-width: var(--container-width);
 }

 .mat-vertical-content {
    padding: 0 0 16px 16px!important;
 }

 .mat-step-header {
    padding-right: 0;
 }

 .app-container {
  box-sizing: border-box;
 }

 .back-button {
   padding: 0 8px!important;
   height: auto!important;
   width: auto!important;
 }

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

 .mat-form-field-appearance-fill .mat-form-field-flex {
   min-height: 40px;
 }

 .oposicao100-form {
   margin-bottom: 24px;
 }

 app-forms {
  display: flex!important;
  flex-flow: row wrap;
  flex: 100;
  gap: 20px 2%;
  justify-content: stretch;
 }

  app-forms > div {
    width: 32%;
  }


 .header-container {
    flex-flow: column-reverse;
    gap: 16px;
 }

 .header-container .buttons-container {
   align-self: flex-end;
 }

 app-card {
  width: 48%!important;
  box-sizing: border-box;

}

.card-ocurrence {
  width: 100%!important;
}

}

@media (max-width: 769px) {


  app-forms {
    flex-direction: row!important;
    justify-content: flex-start;
  }

  app-forms > div {
    width: 49%;
  }

  app-card {
    width: 47%!important;
    box-sizing: border-box;
  }

  .container-basic-data {
    display: flex;
    justify-content: center;
  }

  .container-basic-data app-card{
    width: fit-content!important;
  }

  .card-ocurrence {
    width: 100%!important;
  }

  #panelDetalheOcorrencia {
    margin-top: 16px;
  }

  .container-ocurrence-info {
    flex-direction: column;
    gap: 8px;
  }

}

@media (max-width: 541px) {
  .header {
    overflow: hidden;
  }

  .header > div {
    flex-flow: row wrap;
  }

  .header > div > :first-child {
    width: 100%!important;
    display: flex;
    justify-content: center;
  }

  .header img {
    width: 25%;
  }

  .mat-expansion-panel-header {
    padding: 0 16px!important;
  }

  .mat-step:nth-of-type(3) .mat-vertical-content-container{
    margin-left: 0 !important;
  }

  .mat-step:nth-of-type(3) .mat-vertical-content-container .mat-vertical-content {
    padding-left: 0 !important;
  }

  .errorDialog {
    width: var(--container-width)!important;
  }

  .empty_message {
    font-size: 13px!important;
  }

  .mat-expansion-panel-body * {
    font-size: 13px!important;
  }

  .feedback-container header {
    font-size: 14px!important;
  }


  app-forms {
    flex-direction: column!important;
  }

  app-forms > div {
    width: 100%;
  }

  .container-basic-data app-card {
    width: 100%!important;
  }

  app-card {
    width: 100%!important;
    box-sizing: border-box;
  }

  app-search .mat-chip {
    font-size: 11px;
    padding-right: 7px!important;
    padding-left: 8px!important;
  }

  .mat-standard-chip .mat-chip-remove, .mat-standard-chip .mat-chip-trailing-icon {
    margin-left: 4px!important;
  }

  .filter-body {
    right: 2px!important
  }

  span#nrProtocolo {
    word-break: break-all;
  }

  .container-items {
    flex-flow: column!important;
  }

  .basic-data-card {
    width: 100%!important;
  }

  .card-small-icon {
    width: 100%!important;
  }

  .basic-data-card .content-container {
    flex-flow: column!important;
    gap: 8px;
  }

  .basic-data-card .content-container  > div:nth-of-type(2n) {
        text-align: left!important;
  }

  .card-small-icon .content-container {
    flex-flow: column!important;
  }

  .card-small-icon .content-container > div:nth-of-type(2n) {
    text-align: left!important;
  }

  .container-file-input {
    width: 100%!important;
  }
}