@font-face {
  font-family: "Open Sans Bold";
  src: url("../fonts/open_sans/OpenSans-Bold.ttf");
}

:root {
  /*colors*/
  --danger-color: #f44336;
  --primary-color: #189896;
  --success-color: #43a047;

  /*h1-title*/
  --h1-title-font-size: 48px;
  --h1-title-color: #484848;

  /*h2-title*/
  --h2-title-font-size: 24px;
  --h2-title-color: #484848;

  /*h3-title*/
  --h3-title-font-size: 16px;
  --h3-title-color: #484848;

  /*h4-title*/
  --h4-title-font-size: 14px;
  --h4-title-color: #484848;

  /*h4 title*/
  --h5-title-font-size: 12px;
  --h5-title-color: #000;

  /*welcome message*/
  --welcome-message-font-size: 24px;
  --welcome-message-color: #484848;

  /* menu */
  --menu-item-font-size: 16px;
  --menu-item-color: #484848;

  /*action button*/
  --action-button-background: var(--primary-color);
  --action-button-color: #fff;
  --action-button-hover-background: #333333;
  --action-button-hover-color: #fff;

  /*protocol*/
  --protocol-font-size: 16px;
  --protocol-color: #189896;

  /* form description
    --form-description-color: #000;
    --form-description-font-size: 16px; */

  /*question label*/
  --question-label-color: #717171;
  --question-label-font-size: 14px;

  /*input*/
  --input-font-size: 14px;
  --input-color: rgba(0, 0, 0, 0.87);

  /*input-description*/
  --input-description-font-size: 12px;
  --input-description-color: rgba(0, 0, 0, 0.54);

  /*card-field-label*/
  --card-field-label-font-size: 15px;
  --card-field-label-color: #717171;

  /*card-field-value*/
  --card-field-value-font-size: 14px;
  --card-field-value-color: #797575;

  /*search filter*/
  --filter-font-size: 13px;
  --filter-font-color: 13px;

  /* table */
  --table-header-color: #189896;
  --table-header-font-size: 14px;

  --table-body-font-size: 12px;
  --table-body-color: #999;

  --table-paginator-background: var(--action-button-background);
  --table-paginator-color: #fff;
  --table-paginator-font-size: 14px;
  /*container*/
  --container-width: 1008px;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: #f8fafd;
  font-family: Roboto, sans-serif !important;
}

.app-container {
  width: var(--container-width);
  background: rgba(255, 255, 255, 0.4);
  padding: 40px 48px;
  border-radius: 8px;
  min-height: 100vh;
}

.h1-title {
  line-height: normal;
}

.h2-title {
  font-size: var(--h2-title-font-size);
  color: var(--h2-title-color);
  font-family: "Open Sans Bold";
  line-height: 150%;
}

.h3-title {
  font-size: var(--h3-title-font-size) !important;
  color: var(--h3-title-color) !important;
  font-family: "Open Sans Bold" !important;
  line-height: 150%;
}

.h4-title {
  font-size: var(--h4-title-font-size);
  color: var(--h4-title-color);
  text-transform: capitalize;
  font-family: "Open Sans Bold";
}

.welcome-message {
  font-size: var(--welcome-message-font-size);
  color: var(--welcome-message-color);
  margin-bottom: 40px;
  font-family: "Open Sans Bold";
  line-height: 150%;
}

.action-button {
  background-color: var(--action-button-background) !important;
  color: var(--action-button-color) !important;
}

.action-danger-button {
  background-color: var(--danger-color) !important;
  color: var(--action-button-color) !important;
}

.action-button mat-icon {
  color: var(--action-button-color) !important;
}

.action-button:hover {
  background-color: var(--action-button-hover-background);
  color: var(--action-button-hover-color);
}

.protocol-color,
.protocol {
  color: var(--protocol-color) !important;
}

.protocol {
  font-size: var(--protocol-font-size);
  font-weight: 500;
}

.question-label {
  color: var(--question-label-color);
  font-size: var(--question-label-font-size);
  font-family: "Open Sans Bold";
  line-height: 150%;
  margin-bottom: 16px;
  display: block;
}

.status {
  color: #43a047 !important;
  border: 1px solid #43a047;
  width: fit-content;
  padding: 3px;
  padding-right: 6px;
  padding-left: 6px;
  background-color: #f6ffed;
  border-radius: 4px;
  text-align: center;
  margin-top: 3px;
  font-size: 14px;
  letter-spacing: normal;
}

.input,
.input .ng-value-label,
.input .ng-option-label {
  font-size: var(--input-font-size);
  color: var(--input-color) !important;
  margin: 12px 0 !important;
}

.input-description {
  font-family: Roboto, sans-serif;
  font-size: var(--input-description-font-size);
  color: var(--input-description-color);
  line-height: 150%;
}

.card-field-label {
  font-size: var(--card-field-label-font-size);
  color: var(--card-field-label-color);
}

.card-field-value {
  font-size: var(--card-field-value-font-size);
  color: var(--card-field-value-color);
}

/* table component */
.mat-header-cell,
.mat-sort-header {
  color: var(--table-header-color);
  font-size: var(--table-header-font-size);
}

.mat-cell {
  font-size: var(--table-body-font-size);
  color: var(--table-body-color);
}

.ui-paginator.ui-paginator-bottom,
.mat-paginator {
  background-color: var(--table-paginator-background);
  font-size: var(--table-paginator-font-size);
}

.mat-form-field-appearance-fill .mat-form-field-infix {
  padding: 0 !important;
  border-top: 0 !important;
  min-width: 60px !important;
  display: flex;
}

.mat-form-field {
  display: block !important;
  width: auto !important;
}

.mat-form-field-appearance-fill .mat-form-field-flex {
  padding-top: 0 !important;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  page-break-inside: avoid !important;
  page-break-after: avoid !important;
}

.mat-input-element {
  min-height: 20px !important;
}

.mat-form-field-appearance-fill .mat-select {
  margin: 0 auto !important;
}

.mat-form-field-appearance-fill .mat-select .mat-select-arrow-wrapper {
  display: flex;
}

.mat-chip-container > div {
  justify-content: space-between;
}

.card-field-label {
  font-size: var(--card-field-label-font-size);
  font-family: "Open Sans Bold";
  letter-spacing: 0.15px;
  color: var(--card-field-label-color);
  line-height: 21px;
  margin-bottom: 4px !important;
}

.card-field-value {
  font-size: var(--card-field-value-font-size);
  font-family: Roboto;
  color: var(--card-field-value-color);
  line-height: 21px;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* word-break: break-all; */
}

mat-cell:last-of-type {
  padding-right: 0 !important;
}

.mat-stepper-vertical {
  background-color: transparent !important;
}

.mat-step-header {
  padding-left: 2px !important;
}

.mat-stepper-vertical-line {
  margin-left: 12px !important;
}

.mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
  background-color: var(--primary-color) !important;
}

.mat-form-field-appearance-fill .mat-form-field-wrapper {
  padding-bottom: 0 !important;
}

.mat-form-field-appearance-fill .mat-form-field-underline {
  position: relative;
  bottom: auto;
}

.mat-form-field-appearance-fill .mat-form-field-subscript-wrapper {
  position: static;
  padding: 0 !important;
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline {
  color: var(--primary-color) !important;
}

.mat-primary .mat-pseudo-checkbox-checked,
.mat-primary .mat-pseudo-checkbox-indeterminate {
  background: var(--primary-color) !important;
}

input:-internal-autofill-selected {
  background-color: transparent !important;
}

textarea.mat-input-element {
  padding: 0 !important;
}

/* feedback-message - ocurrence, consent*/
.feedback-icon {
  font-size: 85px;
  width: 85px !important;
  height: 85px !important;
  margin-bottom: 12px;
}

.success {
  color: #43a047;
}

.error {
  color: var(--danger-color);
}

.feedback-message {
  font-size: 16px;
  color: rgba(0, 0, 0, 87%);
  font-weight: 500;
}

.message-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto !important;
}

.message-container > div {
  display: flex;
  justify-content: flex-end;
  height: auto !important;
}

.mat-stepper-vertical .container-buttons {
  margin-top: 24px;
  display: flex !important;
  justify-content: flex-end !important;
}

.mat-stepper-vertical .container-buttons button:nth-child(2) {
  margin-left: 16px !important;
}

.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background-color: var(--primary-color) !important;
}

.mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: var(--primary-color) !important;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: var(--primary-color) !important;
}

.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
  color: var(--primary-color) !important;
}

.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
  color: var(--primary-color) !important;
}

.mat-vertical-stepper-header {
  pointer-events: none !important;
}

.mat-snack-bar-container {
  background-color: var(--danger-color) !important;
  color: #fff !important;
  opacity: 0.85 !important;
}

.mat-simple-snackbar-action {
  color: rgba(0, 0, 0, 87%) !important;
}

.mat-expansion-panel-content {
  display: block !important;
}

.message-container {
  display: block !important;
}

.message-container > *:not(.mat-expansion-panel) {
  text-align: center;
  width: fit-content;
  width: -moz-fit-content;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media print {
  @page {
    size: A4;
    margin: 15mm;
    width: 210mm !important;
  }

  @page :footer {
    color: #fff!important;
  }

  @page :header {
    color: #fff!important;
  }

  body,
  html {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    background: #fff !important;
    width: 100% !important;
  }

  .container-login100 {
    background: #fff !important;
    width: 100% !important;
    display: block !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    min-height: 0 !important;
  }

  .app-container {
    background: #fff !important;
    padding: 4px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding-bottom: 2px !important;
  }

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

  .header {
    margin-right: 6px;
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  .header > div {
    transform: scale(80%);
    transform-origin: left center;
    margin: 0;
  }

  app-header .buttons-container {
    display: none !important;
  }

  app-occurrence ::ng-deep .container-buttons {
    display: none !important;
  }

  .grecaptcha-badge {
    display: none !important;
  }

  .file-input {
    display: none !important;
  }

  .container-file-input {
    min-height: auto !important;
  }

  .radio-container {
    display: block !important;
  }

  .mat-form-field-flex,
  .feedback-container,
  .radio-container {
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }

  .card-no-info {
    display: block !important;
  }

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

  .mat-vertical-content-container {
    margin-left: 4px !important;
  }
  .app-container .container-buttons {
    display: none !important;
  }

  mat-tab-group {
    display: none !important;
  }

  .print-vision-basic-consult {
    display: block !important;
  }

  .print-vision-basic-consult > div {
    margin: auto !important;
    margin-top: 40px !important;
    width: -moz-fit-content;
    width: fit-content;
  }
}