.ujsor {
  flex-basis: 100%;
}

/* ============================= */
/* Kompakt variacio form - alap  */
/* ============================= */

.compact-variation-form .form-item {
  display: grid;
  grid-template-columns: var(--label-col, 180px) minmax(0, 300px);
  align-items: start;
  column-gap: 8px;
  row-gap: 4px;
}

.compact-variation-form .form-item label:not(.option),
.compact-variation-form .form-item__label {
  grid-column: 1;
  font-weight: 600;
  font-size: 0.875rem;
  color: #444;
  text-align: right;
  padding-right: 10px;
  margin: 0;
}

.compact-variation-form .form-item input[type="text"],
.compact-variation-form .form-item input[type="number"],
.compact-variation-form .form-item input[type="email"],
.compact-variation-form .form-item input[type="search"],
.compact-variation-form .form-item input[type="url"],
.compact-variation-form .form-item input[type="tel"],
.compact-variation-form .form-item select,
.compact-variation-form .form-item textarea,
.compact-variation-form .form-item .form-text,
.compact-variation-form .form-item .form-number,
.compact-variation-form .form-item .form-select,
.compact-variation-form .form-item .form-textarea {
  grid-column: 2;
  max-width: 300px;
  padding: 4px 8px;
  font-size: 0.875rem;
}

.compact-variation-form .form-item .form-item__description,
.compact-variation-form .form-item .description {
  grid-column: 2;
  font-size: 0.78rem;
  color: #666;
  margin-top: 2px;
  text-align: left;
}


/* ======================================= */
/* Minden group_float_labels* csoportra    */
/* ======================================= */

[class*="group-name-group-float-labels"] .form-item {
  grid-template-columns: var(--label-col, 180px) minmax(0, 300px) auto;
}

[class*="group-name-group-float-labels"] .form-item .form-item__label,
[class*="group-name-group-float-labels"] .form-item label:not(.option) {
  grid-column: 1;
}

[class*="group-name-group-float-labels"] .form-item input[type="text"],
[class*="group-name-group-float-labels"] .form-item input[type="number"],
[class*="group-name-group-float-labels"] .form-item input[type="email"],
[class*="group-name-group-float-labels"] .form-item input[type="search"],
[class*="group-name-group-float-labels"] .form-item input[type="url"],
[class*="group-name-group-float-labels"] .form-item input[type="tel"],
[class*="group-name-group-float-labels"] .form-item .form-text,
[class*="group-name-group-float-labels"] .form-item .form-number,
[class*="group-name-group-float-labels"] .form-item select,
[class*="group-name-group-float-labels"] .form-item textarea {
  grid-column: 2;
}

[class*="group-name-group-float-labels"] .form-item .form-item__suffix {
  grid-column: 3;
  white-space: nowrap;
  margin-left: 8px;
  color: #666;
  font-size: 0.875rem;
}

[class*="group-name-group-float-labels"] .form-item .form-item__description,
[class*="group-name-group-float-labels"] .form-item .description {
  grid-column: 2 / 4;
  margin-top: 2px;
  font-size: 0.78rem;
  color: #666;
  text-align: left;
}


/* ============================= */
/* Checkbox layout               */
/* ============================= */

[class*="group-name-group-float-labels"] .form-type--checkbox,
[class*="group-name-group-float-labels"] .form-type--boolean {
  display: grid;
  grid-template-columns: var(--label-col, 180px) minmax(0, 300px);
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
}

[class*="group-name-group-float-labels"] .form-type--checkbox > input,
[class*="group-name-group-float-labels"] .form-type--boolean > input {
  grid-column: 1;
  justify-self: end;
  margin: 0 10px 0 0;
}

[class*="group-name-group-float-labels"] .form-type--checkbox > label.option,
[class*="group-name-group-float-labels"] .form-type--boolean > label.option {
  grid-column: 2;
  text-align: left;
  margin: 0;
  padding: 0;
  font-weight: 600;
  color: #444;
}

[class*="group-name-group-float-labels"] .form-type--checkbox > .form-item__description,
[class*="group-name-group-float-labels"] .form-type--boolean > .form-item__description,
[class*="group-name-group-float-labels"] .form-type--checkbox > .description,
[class*="group-name-group-float-labels"] .form-type--boolean > .description {
  grid-column: 2;
  margin: 0;
  font-size: 0.78rem;
  color: #666;
  text-align: left;
}


/* ======================================= */
/* ujsor-* wrapperben a compact blokkok    */
/* egymas melle kerulnek                   */
/* ======================================= */

[id^="ujsor-"] > .claro-details__wrapper,
[id^="ujsor-"] > .details-wrapper,
[id^="ujsor-"] > .fieldset__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}


/* compact blokkok */

[id^="ujsor-"] > .claro-details__wrapper > .compact-variation-form,
[id^="ujsor-"] > .details-wrapper > .compact-variation-form,
[id^="ujsor-"] > .fieldset__wrapper > .compact-variation-form {

  flex: 0 0 520px;
  max-width: 520px;
  min-width: 520px;

  box-sizing: border-box;

  background: linear-gradient(
    to bottom,
    rgba(247,247,247,0.85) 0px,
    rgba(247,247,247,0.6) 40px,
    rgba(247,247,247,0.35) 70px,
    rgba(247,247,247,0) 100px
  );

  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 12px 14px;
}


/* ======================================= */
/* FULLWIDTH mód                           */
/* ======================================= */

[id^="ujsor-"] > .claro-details__wrapper > .compact-variation-form.fullwidth,
[id^="ujsor-"] > .details-wrapper > .compact-variation-form.fullwidth,
[id^="ujsor-"] > .fieldset__wrapper > .compact-variation-form.fullwidth {

  flex: 1 1 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}


/* ======================================= */
/* NOCOLOR mód                             */
/* ======================================= */

.compact-variation-form.nocolor {

  background: none !important;
  border: none !important;
  box-shadow: none !important;

}


/* mobil */

@media (max-width: 1200px) {

  [id^="ujsor-"] > .claro-details__wrapper > .compact-variation-form,
  [id^="ujsor-"] > .details-wrapper > .compact-variation-form,
  [id^="ujsor-"] > .fieldset__wrapper > .compact-variation-form {

    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;

  }

}


/* Checkbox sor */

.compact-variation-form .form-type--checkbox,
.compact-variation-form .form-type--boolean {
  display: grid !important;
  grid-template-columns: var(--label-col, 180px) 1fr;
}

.compact-variation-form .form-type--checkbox input[type="checkbox"],
.compact-variation-form .form-type--boolean input[type="checkbox"] {

  grid-column: 1 !important;
  justify-self: end !important;
  margin: 0 10px 0 0 !important;

}

.compact-variation-form .form-type--checkbox label,
.compact-variation-form .form-type--boolean label {

  grid-column: 2;
  text-align: left;
  margin: 0;

}