.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{
    width: 20px;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick{
    transform: unset;
}

/* =========================================
   Layout Builder - Configure Block (Gin)
   Admin UI Improvements
   ========================================= */

/* Scope ONLY to Layout Builder modal */
.ui-dialog.ui-dialog--layout-builder {
  border-radius: 12px;
  overflow: hidden;
}

/* Modal header */
.ui-dialog--layout-builder .ui-dialog-titlebar {
  background: #1f2937; /* Dark neutral (Gin-like) */
  color: #ffffff;
  padding: 16px 20px;
  border-bottom: 1px solid #374151;
}

.ui-dialog--layout-builder .ui-dialog-title {
  font-size: 16px;
  font-weight: 600;
}

/* Close button */
.ui-dialog--layout-builder .ui-dialog-titlebar-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.ui-dialog--layout-builder .ui-dialog-titlebar-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Modal content */
.ui-dialog--layout-builder .ui-dialog-content {
  padding: 20px;
  background-color: #f9fafb;
}

.layout-builder-configure-block{
  font-size: 12px !important;  
}

/* Field groups spacing */
.layout-builder-configure-block .form-item {
  margin-bottom: 20px !important;
  font-size: 12px !important;
}

/* Labels */
body .layout-builder-configure-block label {
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 5px !important;
  display: block !important;
}

/* Textfields & Selects */
body .layout-builder-configure-block input[type="text"],
.layout-builder-configure-block textarea,
.layout-builder-configure-block select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  font-size:12px !important;    
}

.layout-builder-configure-block input:focus,
.layout-builder-configure-block textarea:focus,
.layout-builder-configure-block select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* WYSIWYG */
.layout-builder-configure-block .ck-editor {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d1d5db;
}

/* Checkbox alignment */
.layout-builder-configure-block .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.layout-builder-configure-block .form-type-checkbox label {
  margin: 0;
  font-size: 12px !important;
}

/* Footer actions */
.layout-builder-configure-block .ui-dialog-buttonpane {
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 16px 20px;
}

/* Primary button */
.layout-builder-configure-block .button--primary {
  background-color: #4f46e5;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 600;
}

.layout-builder-configure-block .button--primary:hover {
  background-color: #4338ca;
}

/* Secondary button */
.layout-builder-configure-block .button {
  border-radius: 8px;
}

.layout-builder-configure-block .paragraphs-dropdown-actions{
    display: flex !important;
    gap: 8px !important;
    margin-top: -12px !important;
}

.layout-builder-configure-block .paragraphs-dropdown-actions input[value="Remove"]{
    background-color: #bf0000 !important;
    border: 1px solid #bf0000 !important;
}

.layout-builder-configure-block .js-form-item .description{
    margin: 0 !important;
}

.layout-builder-configure-block .js-form-wrapper .tabledrag-toggle-weight-wrapper button[type="button"]{
    margin: 0 !important;
    background: #000 !important;
    padding: 6px 10px !important;
    border-radius: 5px !important;
}

.layout-builder-configure-block .js-form-wrapper .field-group-tab summary.card-header{
    border: 2px solid #46a6ff !important;
    font-size: 14px !important;
    color: #fff !important;
    background-color: #a2d2ff !important;
    color: #000 !important;
}

.layout-builder-configure-block .paragraph-type--vertical-carousel-paragraph:hover{
    background-color: #0a2430 !important;
}

.layout-builder-configure-block table th h4{
    margin: 0 !important;
}

/* .layout-builder-configure-block .field-multiple-table tr th.field-label .paragraphs-actions{
    display: flex !important;
    gap: 5px !important;
} */

.ui-widget.ui-dialog.ui-dialog-off-canvas {
  --gin-offcanvas-active: var(--gin-color-primary);
  background: #163E4C !important;
  border: 0 none;
  box-shadow: 0 0 48px rgba(0, 0, 0, .075);
}

.ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
  background: #000000 !important;
  border-radius: 0;
  padding-top: 13px !important;
  padding-bottom: 9px !important;
}

.ui-dialog .button.button--small{
  margin: 5px 0 !important;
}

.ui-dialog .button.button--extrasmall{
  width: auto !important;
  margin: 5px 0 0 0 !important;
}

.ui-dialog .ui-widget-content.ui-dialog-buttonpane .button.button--danger,
.ui-dialog [data-drupal-selector*=-remove-form] .button.button--danger {
  border-color: var(--gin-color-danger) !important;
}

.erl-overlay,
.layout-paragraphs-dialog {
  position: fixed !important;
  inset-block-start: 50% !important;
  inset-inline-start: 50% !important;
  width: calc(100% - var(--gin-spacing-xl)) !important;
}

.paragraphs-tabs-wrapper table .draggable:hover{
    background:#021923 !important
}

.paragraphs-tabs-wrapper table .draggable:hover td{
    background:#021923 !important
}