/**
 * @file
 * Paragraph Bundle Content Admin.
 *
 * Filename:     paragraph-bundle-content-admin.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */
.field-group-tab.pb-content-type-display .details-wrapper .form-radios,
.field-group-tab.pb-content-type-display .details-wrapper .form-checkboxes {
  display: grid;
  grid-auto-flow: row;
  justify-content: start;
  align-items: end;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.field-group-tab.pb-content-type-display .details-wrapper .form-radios .form-item input,
.field-group-tab.pb-content-type-display .details-wrapper .form-checkboxes .form-item input {
  margin-inline-end: 5px;
}

.field-group-tab.pb-content-type-display .details-wrapper .form-type--checkbox,
.field-group-tab.pb-content-type-display .details-wrapper .form-type--radio {
  margin-inline-end: 20px;
}

.field-group-tab.pb-content-type-display .field--name-pb-display-content-width {
  display: block;
  width: 100%;
  clear: both;
}

@media (min-width:48rem) {
  .field-group-tab.pb-content-type-display .field--type-paragraphs-bundles-rgb,
  .field-group-tab.pb-content-type-display .field--type-paragraphs-bundles-range {
    width: 49%;
    display: inline-block;
    float: inline-start;
  }

}

.field-group-tab.pb-content-type-display [data-drupal-selector="para-color-picker"] {
  display: inline-block;
  min-width: 210px;
  width: 100%;
}

.field-group-tab.pb-content-type-display [data-drupal-selector="para-color-picker"] .form-text {
  display: inline-block;
  width: calc(100% - 70px);
  border-start-start-radius: 12px;
  border-end-start-radius: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 12px;
  border-inline-end: none;
}

.field-group-tab.pb-content-type-display [data-drupal-selector="para-color-picker"] .form-color {
  display: inline-block;
  width: 40px;
  margin-inline-end: 20px;
  vertical-align: bottom;
  border-start-start-radius: 0;
  border-start-end-radius: 12px;
  border-end-start-radius: 12px;
  border-end-end-radius: 0;
  border-inline-start: none;
  padding: 5px;
  background-color: black;
  box-sizing: border-box;
}

.field-group-tab.pb-content-type-display [data-drupal-selector="para-color-picker"]label,
.field-group-tab.pb-content-type-display [data-drupal-selector="para-color-picker"] div {
  display: block;
  width: 100%;
}
