.document-fields-grid {
  display: grid;
  grid-template-columns: 8.75rem minmax(14rem, 1fr);
  gap: var(--pico-spacing);
  align-items: start;
}

.document-fields-grid > section[role="field"]:first-child {
  max-width: 8.75rem;
}

.document-fields-grid > section[role="field"]:first-child select {
  width: 100%;
  padding-inline-end: 2rem;
  text-overflow: ellipsis;
}

.document-fields-grid > section[role="field"]:last-child input {
  width: 100%;
}

@media (max-width: 480px) {
  .document-fields-grid {
    grid-template-columns: 1fr;
  }

  .document-fields-grid > section[role="field"]:first-child {
    max-width: none;
  }
}

.orientation {
  font-size: small;
  position: relative;
  top: -10px;
  left: 2px;
  height: 20px;
  display: block;
}

.header_action {
  position: relative;
  top: -35px;
}

.upload_file {
  border: 3px var(--pico-primary) dashed;
  text-align: -webkit-center;
  padding: var(--pico-spacing);
  border-radius: 1.25rem;
}

[role="image_field"] {
  border: 3px var(--pico-primary) dashed;
  text-align: -webkit-center;
  padding: var(--pico-spacing);
  border-radius: 1.25rem;
}

[role="image_field"]:focus {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

[role="image_field"] .image-field-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pico-spacing) * 0.5);
  justify-content: center;
  margin-bottom: calc(var(--pico-spacing) * 0.5);
}

[role="image_field"] .image-field-hint {
  display: block;
  margin-bottom: calc(var(--pico-spacing) * 0.5);
  color: var(--pico-muted-color);
}

section[role="image-field"] {
  margin-top: 15px;
  margin-bottom: calc(var(--pico-spacing) * 0.5);
}

section[role="image-field"] > label.image-field-label {
  position: static;
  display: block;
  width: auto;
  margin-bottom: calc(var(--pico-spacing) * 0.5);
  background: none;
}

section[role="image-field"] > [role="image_field"] {
  margin-top: 0;
}

[role="header_action_screen"] {
  text-align: right;
}

[role="header_action_screen"] > small {
  height: auto;
  display: inline-block;
  align-content: center;
  margin-right: 0;
}

[role="header_action_screen"] > small > a {
  display: inline;
}

[data-tooltip]:not(button, [role="button"]) {
  border-bottom: none !important;
}

[role="button"] {
  margin-bottom: 0;
}

.label {
  font-size: medium;
  padding: 5px 10px;
  border-radius: 5px;
}

.green {
  background-color: rgb(0, 255, 0, 0.2);
}
.yellow {
  background-color: rgb(255, 255, 0, 0.2);
}
.orange {
  background-color: rgb(255, 165, 0, 0.25);
}
.red {
  background-color: rgb(255, 0, 0, 0.2);
}

.pending {
  background-color: darkgoldenrod;
}
.active {
  background-color: darkgreen;
}
.inactive {
  background-color: darkred;
}
[role="seal"] {
  border: 1px var(--pico-primary) solid;
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-text-selection-color);
  padding: 0px 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-wrap-mode: nowrap;
  white-space: nowrap;
}

section[role="field"] {
  position: relative;
  margin-bottom: 0;
  margin-top: 15px;
}

section[role="field"] > label {
  position: absolute;
  top: -16px;
  left: 10px;
  width: fit-content;
  padding-left: 1px;
  padding-right: 1px;
  background: transparent;
  background-image: linear-gradient(to bottom, var(--pico-background-color) 4px, transparent 4px);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: center 14px;
}

section[role="field"]:has(> :focus) > label {
  color: var(--pico-primary);
  transition: 0.3s ease;
  /* background: transparent; */
  /* background-image: linear-gradient(to bottom, var(--pico-background-color) 7px, transparent 7px); */
  /* background-size: 100% 4px; */
  /* background-repeat: no-repeat; */
  /* background-position: center 15px; */
}

section[role="field"] > details > summary > label {
  position: absolute;
  top: -0.6rem;
  left: 10px;
  width: fit-content;
  padding: 0 4px;
  z-index: 2;
  background: var(--pico-background-color);
  background-image: none;
}

section[role="field"]:has(> :focus) > details > summary > label {
  color: var(--pico-primary);
  transition: 0.3s ease;
}

.select-search-actions {
  margin-right: 25px;
  float: inline-end;
  font-size: x-large;
  position: relative;
  z-index: 20;
  top: 5px;
}

.navigation_address {
  text-align: right;
  font-size: x-large;
}

@media (max-width: 576px) {
  .select-search-actions {
    top: 2px;
  }
}
/*
  [data-tooltip]::before {
    z-index: 200;
  }
  [data-tooltip]:hover {
    z-index: 200;
  }

  [data-tooltip]:hover::before {
    z-index: 200;
  }


[data-tooltip]::before,
[data-tooltip]::after {
  z-index: 1001;
}
 */

.user-profile-field--readonly {
  position: relative;
  margin-top: 15px;
  margin-bottom: 0;
}

.user-profile-field__label {
  position: absolute;
  top: -16px;
  left: 10px;
  width: fit-content;
  padding-left: 1px;
  padding-right: 1px;
  background: transparent;
  background-image: linear-gradient(to bottom, var(--pico-background-color) 4px, transparent 4px);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: center 14px;
  font-size: 0.875rem;
}

.user-profile-field__value {
  display: block;
  width: 100%;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  margin: 0;
  background: var(--pico-card-sectioning-background-color, var(--pico-background-color));
  color: var(--pico-color);
}

.profile-field__status {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  font-size: 0.85rem;
  vertical-align: middle;
  cursor: help;
}

.profile-field__status--verified i {
  color: #16a34a;
}

.profile-field__status--unverified i {
  color: #dc2626;
}

section[role="field"].user-phone-field:has(> :focus) > label .profile-field__status--verified i {
  color: #16a34a;
}

section[role="field"].user-phone-field:has(> :focus) > label .profile-field__status--unverified i {
  color: #dc2626;
}

.user-phone-field__panel {
  background: var(--pico-card-background-color, var(--pico-background-color));
  border: 1px solid var(--pico-muted-border-color);
  border-radius: calc(var(--pico-border-radius) * 1.25);
  padding: calc(var(--pico-spacing) * 0.85);
  margin-top: 0.35rem;
  margin-bottom: var(--pico-spacing);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.user-phone-field__panel-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--pico-muted-color);
}

.user-phone-field__panel a[role="button"] {
  margin: 0;
  width: fit-content;
}