/* ADMIN THEME FIX */



:root {
  /* Claro vars don't make it to Layout Builder. */
  --jui-dialog-close-button-size: 2em;
  --jui-dialog-close-button-border-radius: 50%;
}

/* 1. Make sure the button container is visible */
.ui-dialog .ui-dialog-titlebar-close {
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  margin: 0 var(--gin-spacing-m) !important;
}

/* 2. Inject the “×” icon via a ::before */
.ui-dialog .ui-dialog-titlebar-close::before {
  content: "×";
  display: block;
  font-size: var(--jui-dialog-close-button-size);           /* tweak size as needed */
  line-height: 1em;
  text-align: center;
  color: #FFF;          /* inherit from titlebar text */
}

/* 3. Center it perfectly (optional tweaks) */
.ui-dialog .ui-dialog-titlebar-close {
  width: var(--jui-dialog-close-button-size);
  height: var(--jui-dialog-close-button-size);
  padding: 0;
  margin-inline-end: var(--gin-spacing-m);
  top: 50%;
  transform: translateY(-50%);
}

.ui-dialog .ui-dialog-content {

}

#layout-builder-modal textarea {
  height:100%;
}

#layout-builder-modal {
  padding-top:0;
}


#layout-builder-modal form, #layout-builder-modal {
  color: var(--gin-color-text);

}

#layout-builder-modal .description {
  color: rgba(255, 255, 255, 0.5)!important;
}

#layout-builder-modal form > #bs_ui ~ button.button {
  float:none;
  display: flex;
  margin-left: auto;
  margin-bottom: 0;
}

#layout-builder-modal .form-select {
  color:#FFF;
}