/***** Element profiles *****/
/***** Active state and focused state *****/
/***** Animations *****/
/***** Element header *****/
/***** Align profiles *****/
/***** Color profiles *****/
/***** Font-size profiles *****/
/***** Font-weight profiles *****/
/***** Gap profiles *****/
/***** Orientation profiles *****/
/***** Position profiles *****/
/***** Size profiles *****/
/***** Border-radius profiles *****/
/***** Stretch profiles *****/
/***** Element badge *****/
/***** Element info *****/
/***** Element indent *****/
/***** Elements ... *****/



/***** Element profiles *****/

body {
  /*  320px (legkisebb támogatott képernyő-szélesség)
   * - 96px (kettő ikon-gomb szélessége) */
  --element-min-width-xxs: 224px;

  /*  320px (legkisebb támogatott képernyő-szélesség)
   * - 48px (egy ikon-gomb szélessége) */
  --element-min-width-xs:  272px;

  /* */
  --element-min-width-s:   272px;
  --element-min-width-m:   272px;
  --element-min-width-l:   272px;
  --element-min-width-xl:  272px;
  --element-min-width-xxl: 272px;
}

/***** Element profiles *****/



/***** Active state and focused state *****/

/* A checkbox, radio-button és switch elemnek csak a felirata és a helper
 * változik az elemre való kattintáskor */
.e-checkbox--option:active     .e-checkbox--option-content,
.e-checkbox--option:focus      .e-checkbox--option-content,
.e-radio-button--option:active .e-radio-button--option-content,
.e-radio-button--option:focus  .e-radio-button--option-content,
.e-switch--option:active       .e-switch--option-content,
.e-switch--option:focus        .e-switch--option-content {
  opacity: .5;
}

/***** Active state and focused state *****/



/***** Align profiles *****/
/*** Horizontal align ***/

.e-button--body[data-horizontal-align="left"],
.e-card-group[data-horizontal-align="left"],
.e-label--body[data-horizontal-align="left"],
.e-menu-bar--body[data-horizontal-align="left"],
.e-row--body[data-horizontal-align="left"] {
  justify-content: flex-start;
}

.e-card--body[data-horizontal-align="left"],
.e-column--body[data-horizontal-align="left"]{
  align-items: flex-start;
}

.e-text--body[data-horizontal-align="left"] {
  align-items: flex-start;
  text-align: left;
}

.e-button--body[data-horizontal-align="center"],
.e-card-group[data-horizontal-align="center"],
.e-label--body[data-horizontal-align="center"],
.e-menu-bar--body[data-horizontal-align="center"],
.e-row--body[data-horizontal-align="center"] {
  justify-content: center;
}

.e-card--body[data-horizontal-align="center"],
.e-column--body[data-horizontal-align="center"] {
  align-items: center;
}

.e-text--body[data-horizontal-align="center"] {
  align-items: center;
  text-align: center;
}

.e-button--body[data-horizontal-align="right"],
.e-card-group[data-horizontal-align="right"],
.e-label--body[data-horizontal-align="right"],
.e-menu-bar--body[data-horizontal-align="right"],
.e-row--body[data-horizontal-align="right"] {
  justify-content: flex-end;
}

.e-card--body[data-horizontal-align="right"],
.e-column--body[data-horizontal-align="right"] {
  align-items: flex-end;
}

.e-text--body[data-horizontal-align="right"] {
  align-items: flex-end;
  text-align: right;
}

.e-row--body[data-horizontal-align="space-around"] {
  justify-content: space-around;
}

.e-row--body[data-horizontal-align="space-between"] {
  justify-content: space-between;
}

.e-row--body[data-horizontal-align="space-evenly"] {
  justify-content: space-evenly;
}

/*** Horizontal align ***/

/*** Vertical align ***/

.e-column--body[data-vertical-align="top"] {
  justify-content: flex-start;
}

.e-row--body[data-vertical-align="top"] {
  align-items: flex-start;
}

.e-column--body[data-vertical-align="center"] {
  justify-content: center;
}

.e-row--body[data-vertical-align="center"] {
  align-items: center;
}

.e-column--body[data-vertical-align="bottom"] {
  justify-content: flex-end;
}

.e-row--body[data-vertical-align="bottom"] {
  align-items: flex-end;
}

.e-column--body[data-vertical-align="space-around"] {
  justify-content: space-around;
}

.e-column--body[data-vertical-align="space-between"] {
  justify-content: space-between;
}

.e-column--body[data-vertical-align="space-evenly"] {
  justify-content: space-evenly;
}

/*** Vertical align ***/
/***** Align profiles *****/



/***** Color profiles *****/
/*** Var ***/
/* Background-color */

.e-button--body[data-background-color="var"],
.e-card--body[data-background-color="var"],
.e-chip[data-background-color="var"] .e-chip--body,
.e-color-marker--color[data-color="var"],
.e-color-stamp--color[data-color="var"],
.e-icon-button--body[data-background-color="var"],
.e-toggle--body[data-background-color="var"] {
  background-color: var( --background-color );
}

/* Background-color */

/* Border-color */

.e-button--body[data-border-color="var"],
.e-card--body[data-border-color="var"],
.e-checkbox[data-border-color="var"]     .e-checkbox--option-button::before,
.e-counter[data-border-color="var"]      .e-counter--decrease-button,
.e-counter[data-border-color="var"]      .e-counter--increase-button,
.e-icon-button--body[data-border-color="var"],
.e-radio-button[data-border-color="var"] .e-radio-button--option-button,
.e-switch[data-border-color="var"]       .e-switch--option-track {
  border-color: var( --border-color );
}

/* Border-color */

/* Hover-color */

/* XXX#4005 (source-code/cljs/elements/element/helpers.cljs) */
.e-button[data-disabled="false"]      .e-button--body:hover[data-hover-color="var"],
.e-card[data-disabled="false"]        .e-card--body[data-hover-color="var"]:hover,
.e-icon-button[data-disabled="false"] .e-icon-button--body[data-hover-color="var"]:hover::before,
.e-toggle[data-disabled="false"]      .e-toggle--body[data-hover-color="var"]:hover {
  background-color: var( --hover-color );
}

/* Hover-color */

/* Line-color */

.e-button-separator--body[data-color="var"],
.e-horizontal-line--body[data-color="var"],
.e-line-diagram--section[data-color="var"],
.e-vertical-line--body[data-color="var"] {
  background-color: var( --color );
}

/* Line-color */

/* Stroke-color */

.e-circle-diagram--section[data-color="var"] {
  stroke: var( --color );
}

/* Stroke-color */

/* Text-color */

.e-anchor--body[data-color="var"],
.e-button--body[data-color="var"],
.e-chip[data-color="var"] .e-chip--body,
.e-icon--body[data-color="var"],
.e-icon-button--body[data-color="var"],
.e-label--body[data-color="var"],
.e-text--body[data-color="var"],
.e-text-field--button-adornment[data-color="var"],
.e-text-field--static-adornment[data-color="var"] {
  color: var( --color );
}

/* Text-color */
/*** Var ***/

/*** Muted ***/
/* Background-color */

.e-button--body[data-background-color="muted"],
.e-card--body[data-background-color="muted"],
.e-chip[data-background-color="muted"] .e-chip--body,
.e-color-marker--color[data-color="muted"],
.e-icon-button--body[data-background-color="muted"],
.e-toggle--body[data-background-color="muted"] {
  background-color: var( --background-color-muted );
}

/* Background-color */

/* Border-color */

.e-button--body[data-border-color="muted"],
.e-card--body[data-border-color="muted"],
.e-checkbox[data-border-color="muted"]     .e-checkbox--option-button::before,
.e-counter[data-border-color="muted"]      .e-counter--decrease-button,
.e-counter[data-border-color="muted"]      .e-counter--increase-button,
.e-icon-button--body[data-border-color="muted"],
.e-radio-button[data-border-color="muted"] .e-radio-button--option-button,
.e-switch[data-border-color="muted"]       .e-switch--option-track {
  border-color: var( --border-color-muted );
}

/* Border-color */

/* Hover-color */

/* XXX#4005 (source-code/cljs/elements/element/helpers.cljs) */
.e-button[data-disabled="false"]      .e-button--body:hover[data-hover-color="muted"],
.e-card[data-disabled="false"]        .e-card--body[data-hover-color="muted"]:hover,
.e-icon-button[data-disabled="false"] .e-icon-button--body[data-hover-color="muted"]:hover::before,
.e-toggle[data-disabled="false"]      .e-toggle--body[data-hover-color="muted"]:hover {
  background-color: var( --hover-color-muted );
}

/* Hover-color */

/* Line-color */

.e-button-separator--body[data-color="muted"],
.e-horizontal-line--body[data-color="muted"],
.e-line-diagram--section[data-color="muted"],
.e-vertical-line--body[data-color="muted"] {
  background-color: var( --border-color-muted );
}

/* Line-color */

/* Stroke-color */

.e-circle-diagram--section[data-color="muted"] {
  stroke: var( --border-color-muted );
}

/* Stroke-color */

/* Text-color */

.e-anchor--body[data-color="muted"],
.e-button--body[data-color="muted"],
.e-chip[data-color="muted"] .e-chip--body,
.e-icon--body[data-color="muted"],
.e-icon-button--body[data-color="muted"],
.e-label--body[data-color="muted"],
.e-text--body[data-color="muted"],
.e-text-field--button-adornment[data-color="muted"],
.e-text-field--static-adornment[data-color="muted"] {
  color: var( --color-muted );
}

/* Text-color */
/*** Muted ***/

/*** Highlight ***/
/* Background-color */

.e-button--body[data-background-color="highlight"],
.e-card--body[data-background-color="highlight"],
.e-color-marker--color[data-color="highlight"],
.e-chip[data-background-color="highlight"] .e-chip--body,
.e-icon-button--body[data-background-color="highlight"],
.e-toggle--body[data-background-color="highlight"] {
  background-color: var( --background-color-highlight );
}

/* Background-color */

/* Border-color */

.e-button--body[data-border-color="highlight"],
.e-icon-button--body[data-border-color="highlight"],
.e-card--body[data-border-color="highlight"],
.e-select--button-body[data-border-color="highlight"] {
  border-color: var( --border-color-highlight );
}

/* Border-color */

/* Hover-color */

/* XXX#4005 (source-code/cljs/elements/element/helpers.cljs) */
.e-button[data-disabled="false"]      .e-button--body:hover[data-hover-color="highlight"],
.e-card[data-disabled="false"]        .e-card--body[data-hover-color="highlight"]:hover,
.e-icon-button[data-disabled="false"] .e-icon-button--body[data-hover-color="highlight"]:hover::before,
.e-toggle[data-disabled="false"]      .e-toggle--body[data-hover-color="highlight"]:hover {
  background-color: var( --hover-color-highlight );
}

/* Hover-color */

/* Line-color */

.e-button-separator--body[data-color="highlight"],
.e-horizontal-line--body[data-color="highlight"],
.e-line-diagram--section[data-color="highlight"],
.e-vertical-line--body[data-color="highlight"] {
  background-color: var( --border-color-highlight );
}

/* Line-color */

/* Stroke-color */

.e-circle-diagram--section[data-color="highlight"] {
  stroke: var( --border-color-highlight );
}

/* Stroke-color */

/* Text-color */

.e-button--body[data-color="highlight"],
.e-chip[data-color="highlight"] .e-chip--body,
.e-icon--body[data-color="highlight"],
.e-icon-button--body[data-color="highlight"],
.e-label--body[data-color="highlight"],
.e-text--body[data-color="highlight"],
.e-text-field--button-adornment[data-color="highlight"],
.e-text-field--static-adornment[data-color="highlight"] {
  color: var( --color-highlight );
}

/* Text-color */
/*** Highlight ***/

/*** Invert ***/
/* Hover-color */

/* XXX#4005 (source-code/cljs/elements/element/helpers.cljs) */
.e-button[data-disabled="false"]      .e-button--body:hover[data-hover-color="invert"],
.e-card[data-disabled="false"]        .e-card--body[data-hover-color="invert"]:hover,
.e-icon-button[data-disabled="false"] .e-icon-button--body[data-hover-color="invert"]:hover::before,
.e-toggle[data-disabled="false"]      .e-toggle--body[data-hover-color="invert"]:hover {
  background-color: var( --hover-color-invert );
}

/* Hover-color */

/* Text-color */

.e-button--body[data-color="invert"],
.e-icon--body[data-color="invert"],
.e-icon-button--body[data-color="invert"],
.e-label--body[data-color="invert"],
.e-text--body[data-color="invert"],
.e-text-field--button-adornment[data-color="invert"],
.e-text-field--static-adornment[data-color="invert"] {
  color: var( --color-invert );
}

/* Text-color */
/*** Invert ***/

/*** Primary ***/
/* Background-color */

.e-button--body[data-background-color="primary"],
.e-card--body[data-background-color="primary"],
.e-color-marker--color[data-color="primary"],
.e-chip[data-background-color="primary"]        .e-chip--body,
.e-icon-button--body[data-background-color="primary"],
.e-toggle--body[data-background-color="primary"] {
  background-color: var( --background-color-primary );
}

/* Background-color */

/* Badge-color */

.e-element-badge[data-color="primary"] {
  background-color: var( --border-color-primary );
}

/* Badge-color */

/* Border-color */

.e-button--body[data-border-color="primary"],
.e-card--body[data-border-color="primary"],
.e-checkbox[data-border-color="primary"]     .e-checkbox--option-button::before,
.e-counter[data-border-color="primary"]      .e-counter--decrease-button,
.e-counter[data-border-color="primary"]      .e-counter--increase-button,
.e-icon-button--body[data-border-color="primary"],
.e-radio-button[data-border-color="primary"] .e-radio-button--option-button,
.e-switch[data-border-color="primary"]       .e-switch--option-track,
.e-text-field[data-border-color="primary"]   .e-text-field--input-container {
  border-color: var( --border-color-primary );
}

/* Border-color */

/* Hover-color */

/* XXX#4005 (source-code/cljs/elements/element/helpers.cljs) */
.e-button[data-disabled="false"]      .e-button--body:hover[data-hover-color="primary"],
.e-card[data-disabled="false"]        .e-card--body[data-hover-color="primary"]:hover,
.e-icon-button[data-disabled="false"] .e-icon-button--body[data-hover-color="primary"]:hover::before,
.e-toggle[data-disabled="false"]      .e-toggle--body[data-hover-color="primary"]:hover {
  background-color: var( --hover-color-primary );
}

/* Hover-color */

/* Line-color */

.e-horizontal-line--body[data-color="primary"],
.e-line-diagram--section[data-color="primary"],
.e-vertical-line--body[data-color="primary"] {
  background-color: var( --border-color-primary );
}

/* Line-color */

/* Stroke-color */

.e-circle-diagram--section[data-color="primary"] {
  stroke: var( --border-color-primary );
}

/* Stroke-color */

/* Text-color */

.e-anchor--body[data-color="primary"],
.e-button--body[data-color="primary"],
.e-chip[data-color="primary"] .e-chip--body,
.e-icon--body[data-color="primary"],
.e-icon-button--body[data-color="primary"],
.e-label--body[data-color="primary"],
.e-text--body[data-color="primary"],
.e-text-field--button-adornment[data-color="primary"],
.e-text-field--static-adornment[data-color="primary"] {
  color: var( --color-primary );
}

/* Text-color */
/*** Primary ***/

/*** Secondary ***/
/* Background-color */

.e-button--body[data-background-color="secondary"],
.e-card--body[data-background-color="secondary"],
.e-color-marker--color[data-color="secondary"],
.e-chip[data-background-color="secondary"]        .e-chip--body,
.e-icon-button--body[data-background-color="secondary"],
.e-toggle--body[data-background-color="secondary"] {
  background-color: var( --background-color-secondary );
}

/* Background-color */

/* Badge-color */

.e-element-badge[data-color="secondary"] {
  background-color: var( --border-color-secondary );
}

/* Badge-color */

/* Border-color */

.e-button--body[data-border-color="secondary"],
.e-card--body[data-border-color="secondary"],
.e-checkbox[data-border-color="secondary"]     .e-checkbox--option-button::before,
.e-counter[data-border-color="secondary"]      .e-counter--decrease-button,
.e-counter[data-border-color="secondary"]      .e-counter--increase-button,
.e-icon-button--body[data-border-color="secondary"],
.e-radio-button[data-border-color="secondary"] .e-radio-button--option-button,
.e-switch[data-border-color="secondary"]       .e-switch--option-track,
.e-text-field[data-border-color="secondary"]   .e-text-field--input-container {
  border-color: var( --border-color-secondary );
}

/* Border-color */

/* Hover-color */

/* XXX#4005 (source-code/cljs/elements/element/helpers.cljs) */
.e-button[data-disabled="false"]      .e-button--body:hover[data-hover-color="secondary"],
.e-card[data-disabled="false"]        .e-card--body[data-hover-color="secondary"]:hover,
.e-icon-button[data-disabled="false"] .e-icon-button--body[data-hover-color="secondary"]:hover::before,
.e-toggle[data-disabled="false"]      .e-toggle--body[data-hover-color="secondary"]:hover {
  background-color: var( --hover-color-secondary );
}

/* Hover-color */

/* Line-color */

.e-horizontal-line--body[data-color="secondary"],
.e-line-diagram--section[data-color="secondary"],
.e-vertical-line--body[data-color="secondary"] {
  background-color: var( --border-color-secondary );
}

/* Line-color */

/* Stroke-color */

.e-circle-diagram--section[data-color="secondary"] {
  stroke: var( --border-color-secondary );
}

/* Stroke-color */

/* Text-color */

.e-anchor--body[data-color="secondary"],
.e-button--body[data-color="secondary"],
.e-chip[data-color="secondary"] .e-chip--body,
.e-icon--body[data-color="secondary"],
.e-icon-button--body[data-color="secondary"],
.e-label--body[data-color="secondary"],
.e-text--body[data-color="secondary"],
.e-text-field--button-adornment[data-color="secondary"],
.e-text-field--static-adornment[data-color="secondary"] {
  color: var( --color-secondary );
}

/* Text-color */
/*** Secondary ***/

/*** Success ***/
/* Background-color */

.e-button--body[data-background-color="success"],
.e-card--body[data-background-color="success"],
.e-color-marker--color[data-color="success"],
.e-chip[data-background-color="success"] .e-chip--body,
.e-icon-button--body[data-background-color="success"],
.e-toggle--body[data-background-color="success"] {
  background-color: var( --background-color-success );
}

/* Background-color */

/* Badge-color */

.e-element-badge[data-color="success"] {
  background-color: var( --border-color-success );
}

/* Badge-color */

/* Border-color */

.e-button--body[data-border-color="success"],
.e-card--body[data-border-color="success"],
.e-checkbox[data-border-color="success"]     .e-checkbox--option-button::before,
.e-counter[data-border-color="success"]      .e-counter--decrease-button,
.e-counter[data-border-color="success"]      .e-counter--increase-button,
.e-icon-button--body[data-border-color="success"],
.e-radio-button[data-border-color="success"] .e-radio-button--option-button,
.e-switch[data-border-color="success"]       .e-switch--option-track,
.e-text-field[data-border-color="success"]   .e-text-field--input-container {
  border-color: var( --border-color-success );
}

/* Border-color */

/* Hover-color */

/* XXX#4005 (source-code/cljs/elements/element/helpers.cljs) */
.e-button[data-disabled="false"]      .e-button--body:hover[data-hover-color="success"],
.e-card[data-disabled="false"]        .e-card--body[data-hover-color="success"]:hover,
.e-icon-button[data-disabled="false"] .e-icon-button--body[data-hover-color="success"]:hover::before,
.e-toggle[data-disabled="false"]      .e-toggle--body[data-hover-color="success"]:hover {
  background-color: var( --hover-color-success );
}

/* Hover-color */

/* Line-color */

.e-line-diagram--section[data-color="success"],
.e-vertical-line--body[data-color="success"] {
  background-color: var( --border-color-success );
}

/* Line-color */

/* Stroke-color */

.e-circle-diagram--section[data-color="success"] {
  stroke: var( --border-color-success );
}

/* Stroke-color */

/* Text-color */

.e-anchor--body[data-color="success"],
.e-button--body[data-color="success"],
.e-chip[data-color="success"] .e-chip--body,
.e-icon--body[data-color="success"],
.e-icon-button--body[data-color="success"],
.e-label--body[data-color="success"],
.e-text--body[data-color="success"],
.e-text-field--button-adornment[data-color="success"],
.e-text-field--static-adornment[data-color="success"] {
  color: var( --color-success );
}

/* Text-color */
/*** Success ***/

/*** Warning ***/
/* Background-color */

.e-button--body[data-background-color="warning"],
.e-card--body[data-background-color="warning"],
.e-color-marker--color[data-color="warning"],
.e-chip[data-background-color="warning"] .e-chip--body,
.e-icon-button--body[data-background-color="warning"],
.e-toggle--body[data-background-color="warning"] {
  background-color: var( --background-color-warning );
}

/* Background-color */

/* Border-color */

.e-button--body[data-border-color="warning"],
.e-card--body[data-border-color="warning"],
.e-checkbox[data-border-color="warning"]     .e-checkbox--option-button::before,
.e-counter[data-border-color="warning"]      .e-counter--decrease-button,
.e-counter[data-border-color="warning"]      .e-counter--increase-button,
.e-icon-button--body[data-border-color="warning"],
.e-radio-button[data-border-color="warning"] .e-radio-button--option-button,
.e-select--button-body[data-border-color="warning"],
.e-switch[data-border-color="warning"]       .e-switch--option-track,
.e-text-field[data-border-color="warning"]   .e-text-field--input-container {
  border-color: var( --border-color-warning );
}

/* Border-color */

/* Badge-color */

.e-element-badge[data-color="warning"] {
  background-color: var( --border-color-warning );
}

/* Badge-color */

/* Hover-color */

/* XXX#4005 (source-code/cljs/elements/element/helpers.cljs) */
.e-button[data-disabled="false"]      .e-button--body:hover[data-hover-color="warning"],
.e-card[data-disabled="false"]        .e-card--body[data-hover-color="warning"]:hover,
.e-icon-button[data-disabled="false"] .e-icon-button--body[data-hover-color="warning"]:hover::before,
.e-toggle[data-disabled="false"]      .e-toggle--body[data-hover-color="warning"]:hover {
  background-color: var( --hover-color-warning );
}

/* Hover-color */

/* Line-color */

.e-line-diagram--section[data-color="warning"],
.e-vertical-line--body[data-color="warning"] {
  background-color: var( --border-color-warning );
}

/* Line-color */

/* Stroke-color */

.e-circle-diagram--section[data-color="warning"] {
  stroke: var( --border-color-warning );
}

/* Stroke-color */

/* Text-color */

.e-anchor--body[data-color="warning"],
.e-button--body[data-color="warning"],
.e-chip[data-color="warning"] .e-chip--body,
.e-icon--body[data-color="warning"],
.e-icon-button--body[data-color="warning"],
.e-label--body[data-color="warning"],
.e-text--body[data-color="warning"],
.e-text-field--button-adornment[data-color="warning"],
.e-text-field--static-adornment[data-color="warning"] {
  color: var( --color-warning );
}

/* Text-color */
/*** Warning ***/

/*** Default ***/
/* Line-color */

.e-horizontal-line--body[data-color="default"],
.e-line-diagram--section[data-color="default"],
.e-vertical-line--body[data-color="default"] {
  background-color: var( --border-color );
}

/* Line-color */
/*** Default ***/

/*** None ***/
/* Border-color */

/* Az icon-button elem {:border-color :none} beállítással használva,
 * az elem {color: ...} tulajdonságának értékét használná a {border-color: ...}
 * tulajdonság értékeként is, ha nem lenne beállítva a transparent érték! */
.e-icon-button--body[data-border-color="none"] {
  border-color: transparent;
}

/* Border-color */
/*** None ***/
/***** Color profiles *****/



/***** Font-size profiles *****/
/*** XXS ***/

.e-icon--body[data-size="xxs"] {
  font-size: var( --icon-size-xxs );

  /* BUG#0983 */
  height: 24px;
  width: 24px;
}

.e-anchor--body[data-font-size="xxs"][data-line-height="normal"],
.e-label--body[data-font-size="xxs"][data-line-height="normal"],
.e-text--body[data-font-size="xxs"][data-line-height="normal"] {
  font-size: var( --font-size-xxs );
  letter-spacing: var( --letter-spacing-xxs );
  line-height: var( --line-height-xxs );
}

.e-anchor--body[data-font-size="xxs"][data-line-height="block"],
.e-label--body[data-font-size="xxs"][data-line-height="block"],
.e-text--body[data-font-size="xxs"][data-line-height="block"] {
  font-size: var( --font-size-xxs );
  letter-spacing: var( --letter-spacing-xxs );
  line-height: 24px;
}

.e-button--body[data-font-size="xxs"] {
  font-size: var( --font-size-xxs );
  letter-spacing: var( --letter-spacing-xxs );

  /* XXX#6610
   * Az XXS és XS betűméretű gomboknál fontos, hogy a sormagasság 24px legyen,
   * különben túl nagy lenne a távolság a felette elhelyezett tartalmilag hozzá
   * kapcsolódó label elemtől! */
  line-height: 24px;

  /* XXX#6611
   * Ha a gomb nem tartalmaz label feliratot csak ikon elemet, akkor a height
   * tulajdonság állítja be az .e-button--body elem magasságát */
  height: 24px;
}

.e-button--body[data-font-size="xxs"][data-hover-color] {
  /* XXX#0404
   * A hover-color tulajdonsággal rendelkező button elem sormagassága minimum 36px
   * kell, hogy legyen, különben túl vékonynak néz ki! */
  line-height: 36px;

  /* XXX#6611 */
  height: 36px;
}

.e-label--body[data-font-size="xs"] .e-label--icon {
  font-size: var( --icon-size-xxs );
}

/*** XXS ***/

/*** XS ***/

.e-icon--body[data-size="xs"] {
  font-size: var( --icon-size-xs );

  /* BUG#0983 */
  height: 24px;
  width: 24px;
}

.e-anchor--body[data-font-size="xs"][data-line-height="normal"],
.e-label--body[data-font-size="xs"][data-line-height="normal"],
.e-text--body[data-font-size="xs"][data-line-height="normal"] {
  font-size: var( --font-size-xs );
  letter-spacing: var( --letter-spacing-xs );
  line-height: var( --line-height-xs );
}

.e-anchor--body[data-font-size="xs"][data-line-height="block"],
.e-label--body[data-font-size="xs"][data-line-height="block"],
.e-text--body[data-font-size="xs"][data-line-height="block"] {
  font-size: var( --font-size-xs );
  letter-spacing: var( --letter-spacing-xs );
  line-height: 24px;
}

.e-checkbox[data-font-size="xs"]       .e-checkbox--option-label,
.e-menu-bar--body[data-font-size="xs"] .e-menu-bar--menu-item--label,
.e-radio-button[data-font-size="xs"]   .e-radio-button--option-label,
.e-switch[data-font-size="xs"]         .e-switch--option-label,
.e-text-field[data-font-size="xs"]     .e-text-field--input {
  font-size: var( --font-size-xs );
  letter-spacing: var( --letter-spacing-xs );
}

.e-button--body[data-font-size="xs"] {
  font-size: var( --font-size-xs );
  letter-spacing: var( --letter-spacing-xs );
  /* XXX#6610 */
  line-height: 24px;

  /* XXX#6611 */
  height: 24px;
}

.e-button--body[data-font-size="xs"][data-hover-color] {
  /* XXX#0404 */
  line-height: 36px;

  /* XXX#6611 */
  height: 36px;
}

.e-label--body[data-font-size="xs"] .e-label--icon {
  font-size: var( --icon-size-xxs );
}

.e-text-field[data-font-size="xs"] .e-text-field--input,
.e-text-field[data-font-size="xs"] .e-text-field--placeholder,
.e-text-field[data-font-size="xs"] .e-text-field--button-adornment,
.e-text-field[data-font-size="xs"] .e-text-field--static-adornment {
  line-height: 24px;
}

/*** XS ***/

/*** S ***/

.e-icon--body[data-size="s"] {
  font-size: var( --icon-size-s );

  /* BUG#0983 */
  height: 24px;
  width: 24px;
}

.e-anchor--body[data-font-size="s"][data-line-height="normal"],
.e-label--body[data-font-size="s"][data-line-height="normal"],
.e-text--body[data-font-size="s"][data-line-height="normal"] {
  font-size: var( --font-size-s );
  letter-spacing: var( --letter-spacing-s );
  line-height: var( --line-height-s );
}

.e-anchor--body[data-font-size="s"][data-line-height="block"],
.e-label--body[data-font-size="s"][data-line-height="block"],
.e-text--body[data-font-size="s"][data-line-height="block"] {
  font-size: var( --font-size-s );
  letter-spacing: var( --letter-spacing-s );
  line-height: 24px;
}

.e-checkbox[data-font-size="s"]       .e-checkbox--option-label,
.e-menu-bar--body[data-font-size="s"] .e-menu-bar--menu-item--label,
.e-radio-button[data-font-size="s"]   .e-radio-button--option-label,
.e-switch[data-font-size="s"]         .e-switch--option-label,
.e-text-field[data-font-size="s"]     .e-text-field--input {
  font-size: var( --font-size-s );
  letter-spacing: var( --letter-spacing-s );
}

.e-button--body[data-font-size="s"] {
  font-size: var( --font-size-s );
  letter-spacing: var( --letter-spacing-s );
  line-height: 36px;

  /* XXX#6611 */
  height: 36px;
}

.e-label--body[data-font-size="s"] .e-label--icon {
  font-size: var( --icon-size-xs );
}

.e-text-field[data-font-size="s"] .e-text-field--input,
.e-text-field[data-font-size="s"] .e-text-field--placeholder,
.e-text-field[data-font-size="s"] .e-text-field--button-adornment,
.e-text-field[data-font-size="s"] .e-text-field--static-adornment {
  line-height: 24px;
}

/*** S ***/

/*** M ***/

.e-icon--body[data-size="m"] {
  font-size: var( --icon-size-m );

  /* BUG#0983 */
  height: 24px;
  width: 24px;
}

.e-anchor--body[data-font-size="m"][data-line-height="normal"],
.e-label--body[data-font-size="m"][data-line-height="normal"],
.e-text--body[data-font-size="m"][data-line-height="normal"] {
  font-size: var( --font-size-m );
  letter-spacing: var( --letter-spacing-m );
  line-height: var( --line-height-m );
}

.e-anchor--body[data-font-size="m"][data-line-height="block"],
.e-label--body[data-font-size="m"][data-line-height="block"],
.e-text--body[data-font-size="m"][data-line-height="block"] {
  font-size: var( --font-size-m );
  letter-spacing: var( --letter-spacing-m );
  line-height: 24px;
}

.e-button--body[data-font-size="m"] {
  font-size: var( --font-size-m );
  letter-spacing: var( --letter-spacing-m );
  line-height: 36px;

  /* XXX#6611 */
  height: 36px;
}

.e-label--body[data-font-size="m"] .e-label--icon {
  font-size: var( --icon-size-s );
}

/*** M ***/

/*** L ***/

.e-icon--body[data-size="l"] {
  font-size: var( --icon-size-l );

  /* BUG#0983 */
  height: 48px;
  width: 48px;
}

.e-anchor--body[data-font-size="l"][data-line-height="normal"],
.e-label--body[data-font-size="l"][data-line-height="normal"],
.e-text--body[data-font-size="l"][data-line-height="normal"] {
  font-size: var( --font-size-l );
  letter-spacing: var( --letter-spacing-l );
  line-height: var( --line-height-l );
}

.e-anchor--body[data-font-size="l"][data-line-height="block"],
.e-label--body[data-font-size="l"][data-line-height="block"],
.e-text--body[data-font-size="l"][data-line-height="block"] {
  font-size: var( --font-size-l );
  letter-spacing: var( --letter-spacing-l );
  line-height: 36px;
}

.e-button--body[data-font-size="l"] {
  font-size: var( --font-size-l );
  letter-spacing: var( --letter-spacing-l );
  line-height: 36px;

  /* XXX#6611 */
  height: 36px;
}

.e-label--body[data-font-size="l"] .e-label--icon {
  font-size: var( --icon-size-m );
}

/*** L ***/

/*** XL ***/

.e-icon--body[data-size="xl"] {
  font-size: var( --icon-size-xl );

  /* BUG#0983 */
  height: 48px;
  width: 48px;
}

.e-anchor--body[data-font-size="xl"][data-line-height="normal"],
.e-label--body[data-font-size="xl"][data-line-height="normal"],
.e-text--body[data-font-size="xl"][data-line-height="normal"] {
  font-size: var( --font-size-xl );
  letter-spacing: var( --letter-spacing-xl );
  line-height: var( --line-height-xl );
}

.e-anchor--body[data-font-size="xl"][data-line-height="block"],
.e-label--body[data-font-size="xl"][data-line-height="block"],
.e-text--body[data-font-size="xl"][data-line-height="block"] {
  font-size: var( --font-size-xl );
  letter-spacing: var( --letter-spacing-xl );
  line-height: 36px;
}

.e-button--body[data-font-size="xl"] {
  font-size: var( --font-size-xl );
  letter-spacing: var( --letter-spacing-xl );
  line-height: 36px;

  /* XXX#6611 */
  height: 36px;
}

.e-label--body[data-font-size="xl"] .e-label--icon {
  font-size: var( --icon-size-m );
}

/*** XL ***/

/*** XXL ***/

.e-icon--body[data-size="xxl"] {
  font-size: var( --icon-size-xxl );

  /* BUG#0983 */
  height: 48px;
  width: 48px;
}

.e-anchor--body[data-font-size="xxl"][data-line-height="normal"],
.e-label--body[data-font-size="xxl"][data-line-height="normal"],
.e-text--body[data-font-size="xxl"][data-line-height="normal"] {
  font-size: var( --font-size-xxl );
  letter-spacing: var( --letter-spacing-xxl );
  line-height: var( --line-height-xxl );
}

.e-anchor--body[data-font-size="xxl"][data-line-height="block"],
.e-label--body[data-font-size="xxl"][data-line-height="block"],
.e-text--body[data-font-size="xxl"][data-line-height="block"] {
  font-size: var( --font-size-xxl );
  letter-spacing: var( --letter-spacing-xxl );
  line-height: 48px;
}

.e-button--body[data-font-size="xxl"] {
  font-size: var( --font-size-xxl );
  letter-spacing: var( --letter-spacing-xxl );
  line-height: 36px;

  /* XXX#6611 */
  height: 36px;
}

.e-label--body[data-font-size="xxl"] .e-label--icon {
  font-size: var( --icon-size-m );
}

/*** XXL ***/
/***** Font-size profiles *****/



/***** Font weight profiles *****/
/*** Normal ***/

.e-label--body[data-font-weight="normal"],
.e-text--body[data-font-weight="normal"] {
  font-weight: 400;
}

/*** Normal ***/

/*** Bold ***/

.e-button--body[data-font-weight="bold"],
.e-label--body[data-font-weight="bold"],
.e-text--body[data-font-weight="bold"] {
  font-weight: 500;
}

/*** Bold ***/

/*** Extra bold ***/

.e-button--body[data-font-weight="extra-bold"],
.e-label--body[data-font-weight="extra-bold"],
.e-text--body[data-font-weight="extra-bold"] {
  font-weight: 600;
}

/*** Extra bold ***/
/***** Font weight profiles *****/



/***** Gap profiles *****/
/*** XXS ***/

.e-row--body[data-gap="xxs"] {
  grid-column-gap: 6px;
}

.e-column--body[data-gap="xxs"] {
  grid-row-gap: 6px;
}

/*** XXS ***/

/*** XS ***/

.e-row--body[data-gap="xs"] {
  grid-column-gap: 12px;
}

.e-column--body[data-gap="xs"] {
  grid-row-gap: 12px;
}

/*** XS ***/

/*** S ***/

.e-row--body[data-gap="s"] {
  grid-column-gap: 18px;
}

.e-column--body[data-gap="s"] {
  grid-row-gap: 18px;
}

/*** S ***/

/*** M ***/

.e-row--body[data-gap="m"] {
  grid-column-gap: 24px;
}

.e-column--body[data-gap="m"] {
  grid-row-gap: 24px;
}

/*** M ***/

/*** L ***/

.e-row--body[data-gap="l"] {
  grid-column-gap: 36px;
}

.e-column--body[data-gap="l"] {
  grid-row-gap: 36px;
}

/*** L ***/

/*** XL ***/

.e-row--body[data-gap="xl"] {
  grid-column-gap: 42px;
}

.e-column--body[data-gap="xl"] {
  grid-row-gap: 42px;
}

/*** XL ***/

/*** XXL ***/

.e-row--body[data-gap="xxl"] {
  grid-column-gap: 48px;
}

.e-column--body[data-gap="xxl"] {
  grid-row-gap: 48px;
}

/*** XXL ***/
/***** Gap profiles *****/



/***** Orientation profiles *****/
/*** Horizontal orientation ***/

.e-menu-bar--body[data-orientation="horizontal"] .e-menu-bar--menu-items {
  display: flex;
  flex-direction: row;
}

/*** Horizontal orientation ***/

/*** Vertical orientation ***/

.e-menu-bar--body[data-orientation="vertical"] .e-menu-bar--menu-items {
  display: flex;
  flex-direction: column;
}

/*** Vertical orientation ***/
/***** Orientation profiles *****/



/***** Position profiles *****/
/*** Horizontal position ***/

.e-element[data-horizontal-position="left"] {
  align-self: flex-start;
}

.e-element[data-horizontal-position="center"] {
  align-self: center;
}

.e-element[data-horizontal-position="right"] {
  align-self: flex-end;
}

/*** Horizontal position ***/

/*** Vertical position ***/
/*** Vertical position ***/
/***** Position profiles *****/



/***** Size profiles *****/
/*** XXS ***/

.e-element[data-min-width="xxs"] {
  min-width: var( --element-min-width-xxs );
}

.e-ghost[data-height="xxs"] .e-ghost--body,
.e-horizontal-separator[data-height="xxs"] {
  height: 6px;
}

.e-vertical-separator[data-width="xxs"] {
  width: 6px;
}

.e-thumbnail[data-height="xxs"] .e-thumbnail--body {
  height: 36px;
}

.e-thumbnail[data-width="xxs"] .e-thumbnail--body {
  width: 36px;
}

/*** XXS ***/

/*** XS ***/

.e-element[data-min-width="xs"] {
  min-width: var( --element-min-width-xs );
}

.e-ghost[data-height="xs"] .e-ghost--body,
.e-horizontal-separator[data-height="xs"] {
  height: 18px;
}

.e-vertical-separator[data-width="xs"] {
  width: 12px;
}

.e-thumbnail[data-height="xs"] .e-thumbnail--body {
  height: 48px;
}

.e-thumbnail[data-width="xs"] .e-thumbnail--body {
  width: 48px;
}

/*** XS ***/

/*** S ***/

.e-element[data-min-width="s"] {
  min-width: var( --element-min-width-s );
}

.e-ghost[data-height="s"] .e-ghost--body,
.e-horizontal-separator[data-height="s"] {
  height: 18px;
}

.e-vertical-separator[data-width="s"] {
  width: 18px;
}

.e-thumbnail[data-height="s"] .e-thumbnail--body {
  height: 60px;
}

.e-thumbnail[data-width="s"] .e-thumbnail--body {
  width: 60px;
}

/*** S ***/

/*** M ***/

.e-element[data-min-width="m"] {
  min-width: var( --element-min-width-m );
}

.e-ghost[data-height="m"] .e-ghost--body,
.e-horizontal-separator[data-height="m"],
.e-icon-button--body[data-height="m"],
/* XXX#9910
 * A menu-bar magasságát a menü elemeken szükséges alkalmazni,
 * így {:orientation :horizontal} és {:orientation :vertical}
 * beállítással használva egyaránt a menü elemek érzékelő területének
 * magasságát szabályozza */
.e-menu-bar--body[data-height="m"] .e-menu-bar--menu-item {
  height: 24px;
}

.e-vertical-separator[data-width="m"] {
  width: 24px;
}

.e-icon-button--body[data-width="m"] {
  width: 24px;
}

.e-color-stamp--body[data-size="m"] {
  grid-gap: 1px;
  height: 24px;
  width: 24px;
}

.e-color-marker[data-size="m"] .e-color-marker--body {
  border-radius: 3px;
  height: 24px;
  width: 6px;
}

.e-thumbnail[data-height="m"] .e-thumbnail--body {
  height: 72px;
}

.e-thumbnail[data-width="m"] .e-thumbnail--body {
  width: 72px;
}

/*** M ***/

/*** L ***/

.e-element[data-min-width="l"] {
  min-width: var( --element-min-width-l );
}

.e-ghost[data-height="l"] .e-ghost--body,
.e-horizontal-separator[data-height="l"],
.e-icon-button--body[data-height="l"],
/* XXX#9910 */
.e-menu-bar--body[data-height="l"] .e-menu-bar--menu-item {
  height: 36px;
}

.e-vertical-separator[data-width="l"] {
  width: 36px;
}

.e-icon-button--body[data-width="l"] {
  width: 36px;
}

.e-color-stamp--body[data-size="l"] {
  grid-gap: 2px;
  height: 36px;
  width: 36px;
}

.e-color-marker[data-size="l"] .e-color-marker--body {
  border-radius: 3px;
  height: 36px;
  width: 6px;
}

.e-thumbnail[data-height="l"] .e-thumbnail--body {
  height: 84px;
}

.e-thumbnail[data-width="l"] .e-thumbnail--body {
  width: 84px;
}

/*** L ***/

/*** XL ***/

.e-element[data-min-width="xl"] {
  min-width: var( --element-min-width-xl );
}

.e-ghost[data-height="xl"] .e-ghost--body,
.e-horizontal-separator[data-height="xl"],
.e-icon-button--body[data-height="xl"],
/* XXX#9910 */
.e-menu-bar--body[data-height="xl"] .e-menu-bar--menu-item {
  height: 42px;
}

.e-icon-button--body[data-width="xl"] {
  width: 42px;
}

.e-vertical-separator[data-width="xl"] {
  width: 42px;
}

.e-color-stamp--body[data-size="xl"] {
  grid-gap: 2px;
  height: 42px;
  width: 42px;
}

.e-color-marker[data-size="xl"] .e-color-marker--body {
  border-radius: 3px;
  height: 42px;
  width: 6px;
}

.e-thumbnail[data-height="xl"] .e-thumbnail--body {
  height: 96px;
}

.e-thumbnail[data-width="xl"] .e-thumbnail--body {
  width: 96px;
}

/*** XL ***/

/*** XXL ***/

.e-element[data-min-width="xxl"] {
  min-width: var( --element-min-width-xxl );
}

.e-ghost[data-height="xxl"] .e-ghost--body,
.e-horizontal-separator[data-height="xxl"],
.e-icon-button--body[data-height="xxl"],
/* XXX#9910 */
.e-menu-bar--body[data-height="xxl"] .e-menu-bar--menu-item {
  height: 48px;
}

.e-vertical-separator[data-width="xxl"] {
  width: 48px;
}

.e-icon-button--body[data-width="xxl"] {
  width: 100%;
  /* BUG#0990
   * A min-width tulajdonság azért szükséges, hogy az icon-button elemet
   * a környező tartalom ne kényszerítse méretcsökkenésre */
  min-width: 48px;
}

.e-color-stamp--body[data-size="xxl"] {
  grid-gap: 2px;
  height: 48px;
  width: 48px;
}

.e-color-marker[data-size="xxl"] .e-color-marker--body {
  border-radius: 3px;
  height: 48px;
  width: 6px;
}

.e-thumbnail[data-height="xxl"] .e-thumbnail--body {
  height: 108px;
}

.e-thumbnail[data-width="xxl"] .e-thumbnail--body {
  width: 108px;
}

/*** XXL ***/

/*** 3XL ***/

.e-ghost[data-height="3xl"] .e-ghost--body,
.e-horizontal-separator[data-height="3xl"],
.e-icon-button--body[data-height="3xl"] {
  height: 60px;
}

.e-vertical-separator[data-width="3xl"] {
  width: 60px;
}

.e-icon-button--body[data-width="3xl"] {
  width: 100%;
  /* BUG#0990 */
  min-width: 60px;
}

.e-thumbnail[data-height="3xl"] .e-thumbnail--body {
  height: 120px;
}

.e-thumbnail[data-width="3xl"] .e-thumbnail--body {
  width: 120px;
}

/*** 3XL ***/

/*** 4XL ***/

.e-ghost[data-height="4xl"] .e-ghost--body,
.e-horizontal-separator[data-height="4xl"] {
  height: 72px;
}

.e-vertical-separator[data-width="4xl"] {
  width: 72px;
}

.e-thumbnail[data-height="4xl"] .e-thumbnail--body {
  height: 132px;
}

.e-thumbnail[data-width="4xl"] .e-thumbnail--body {
  width: 132px;
}

/*** 4XL ***/

/*** 5XL ***/

.e-ghost[data-height="5xl"] .e-ghost--body,
.e-horizontal-separator[data-height="5xl"] {
  height: 84px;
}

.e-vertical-separator[data-width="5xl"] {
  width: 84px;
}

.e-thumbnail[data-height="5xl"] .e-thumbnail--body {
  height: 144px;
}

.e-thumbnail[data-width="5xl"] .e-thumbnail--body {
  width: 144px;
}

/*** 5XL ***/
/***** Size profiles *****/



/***** Border-radius profiles *****/
/*** XXS ***/

.e-button--body[data-border-radius="xxs"] {
  border-radius: var( --border-radius-xxs );
  padding: 0 var( --border-radius-xxs );
}

.e-card--body[data-border-radius="xxs"],
.e-ghost[data-border-radius="xxs"] .e-ghost--body,
.e-icon-button--body[data-border-radius="xxs"]::before,
.e-select[data-border-radius="xxs"] .e-select--button-body,
.e-text-field[data-border-radius="xxs"] .e-text-field--input-container,
.e-thumbnail[data-border-radius="xxs"] .e-thumbnail--body,
.e-toggle--body[data-border-radius="xxs"] {
  border-radius: var( --border-radius-xxs );
}

/*** XXS ***/

/*** XS ***/

.e-button--body[data-border-radius="xs"] {
  border-radius: var( --border-radius-xs );
  padding: 0 var( --border-radius-xs );
}

.e-card--body[data-border-radius="xs"],
.e-ghost[data-border-radius="xs"] .e-ghost--body,
.e-icon-button--body[data-border-radius="xs"]::before,
.e-select[data-border-radius="xs"] .e-select--button-body,
.e-text-field[data-border-radius="xs"] .e-text-field--input-container,
.e-thumbnail[data-border-radius="xs"] .e-thumbnail--body,
.e-toggle--body[data-border-radius="xs"] {
  border-radius: var( --border-radius-xs );
}

/*** XS ***/

/*** S ***/

.e-button--body[data-border-radius="s"] {
  border-radius: var( --border-radius-s );
  padding: 0 var( --border-radius-s );
}

.e-card--body[data-border-radius="s"],
.e-ghost[data-border-radius="s"] .e-ghost--body,
.e-icon-button--body[data-border-radius="s"]::before,
.e-select[data-border-radius="s"] .e-select--button-body,
.e-text-field[data-border-radius="s"] .e-text-field--input-container,
.e-thumbnail[data-border-radius="s"] .e-thumbnail--body,
.e-toggle--body[data-border-radius="s"] {
  border-radius: var( --border-radius-s );
}

/*** S ***/

/*** M ***/

.e-button--body[data-border-radius="m"] {
  border-radius: var( --border-radius-m );
  padding: 0 var( --border-radius-m );
}

.e-card--body[data-border-radius="m"],
.e-ghost[data-border-radius="m"] .e-ghost--body,
.e-icon-button--body[data-border-radius="m"]::before,
.e-select[data-border-radius="m"] .e-select--button-body,
.e-text-field[data-border-radius="m"] .e-text-field--input-container,
.e-thumbnail[data-border-radius="m"] .e-thumbnail--body,
.e-toggle--body[data-border-radius="m"] {
  border-radius: var( --border-radius-m );
}

/*** M ***/

/*** L ***/

.e-button--body[data-border-radius="l"] {
  border-radius: var( --border-radius-l );
  padding: 0 var( --border-radius-l );
}

.e-card--body[data-border-radius="l"],
.e-ghost[data-border-radius="l"] .e-ghost--body,
.e-icon-button--body[data-border-radius="l"]::before,
.e-select[data-border-radius="l"] .e-select--button-body,
.e-text-field[data-border-radius="l"] .e-text-field--input-container,
.e-thumbnail[data-border-radius="l"] .e-thumbnail--body,
.e-toggle--body[data-border-radius="l"] {
  border-radius: var( --border-radius-l );
}

/*** L ***/

/*** XL ***/

.e-button--body[data-border-radius="xl"] {
  border-radius: var( --border-radius-xl );
  padding: 0 var( --border-radius-xl );
}

.e-card--body[data-border-radius="xxl"],
.e-ghost[data-border-radius="xl"] .e-ghost--body,
.e-icon-button--body[data-border-radius="xl"]::before,
.e-thumbnail[data-border-radius="xl"] .e-thumbnail--body,
.e-toggle--body[data-border-radius="xl"] {
  border-radius: var( --border-radius-xl );
}

/*** XL ***/

/*** XXL ***/

.e-button--body[data-border-radius="xxl"] {
  border-radius: var( --border-radius-xxl );
  padding: 0 var( --border-radius-xxl );
}

.e-card--body[data-border-radius="xxl"],
.e-ghost[data-border-radius="xxl"] .e-ghost--body,
.e-icon-button--body[data-border-radius="xxl"]::before,
.e-thumbnail[data-border-radius="xxl"] .e-thumbnail--body,
.e-toggle--body[data-border-radius="xxl"] {
  border-radius: var( --border-radius-xxl );
}

/*** XXL ***/
/***** Border-radius profiles *****/



/***** Stretch profiles *****/

.e-element[data-stretch-orientation="both"],
.e-element[data-stretch-orientation="horizontal"] {
  width: 100%;
}

.e-element[data-stretch-orientation="both"],
.e-element[data-stretch-orientation="vertical"] {
  height: 100%;
}

/***** Stretch profiles *****/



/***** Element badge *****/

.e-element-badge {
  border-radius: 50%;
  position: absolute;

  /* A badge mérete bange-content megjelenítésekor: 18x18px */
  min-height: 8px;
  min-width: 8px;
}

.e-element-badge--content {
  /* TEMP */
  background-color: #375dd6;
  color: white;

  border-radius: 50%;
  font-size: var( --font-size-xxs );
  font-weight: 600;
  line-height: 18px;
  height: 18px;
  width: 18px;
}

/***** Element badge *****/



/***** Element indent *****/

/* Az elemek {:indent ...} tulajdonságát margin helyett padding tulajdonsággal
 * szükséges megvalósítani, mert a böngésző a margin tulajdonságok értékét
 * bizonyos esetekben összevonja */
.e-element[data-indent-all="xxs"]        { padding:         6px }
.e-element[data-indent-all="xs"]         { padding:        12px }
.e-element[data-indent-all="s"]          { padding:        18px }
.e-element[data-indent-all="m"]          { padding:        24px }
.e-element[data-indent-all="l"]          { padding:        36px }
.e-element[data-indent-all="xl"]         { padding:        42px }
.e-element[data-indent-all="xxl"]        { padding:        48px }
.e-element[data-indent-horizontal="xxs"] { padding-bottom:  6px;
                                           padding-top:     6px }
.e-element[data-indent-horizontal="xs"]  { padding-bottom: 12px;
                                           padding-top:    12px }
.e-element[data-indent-horizontal="s"]   { padding-bottom: 18px;
                                           padding-top:    18px }
.e-element[data-indent-horizontal="m"]   { padding-bottom: 24px;
                                           padding-top:    24px }
.e-element[data-indent-horizontal="l"]   { padding-bottom: 36px;
                                           padding-top:    36px }
.e-element[data-indent-horizontal="xl"]  { padding-bottom: 42px;
                                           padding-top:    42px }
.e-element[data-indent-horizontal="xxl"] { padding-bottom: 48px;
                                           padding-top:    48px }
.e-element[data-indent-vertical="xxs"]   { padding-left:    6px;
                                           padding-right:   6px }
.e-element[data-indent-vertical="xs"]    { padding-left:   12px;
                                           padding-right:  12px }
.e-element[data-indent-vertical="s"]     { padding-left:   18px;
                                           padding-right:  18px }
.e-element[data-indent-vertical="m"]     { padding-left:   24px;
                                           padding-right:  24px }
.e-element[data-indent-vertical="l"]     { padding-left:   36px;
                                           padding-right:  36px }
.e-element[data-indent-vertical="xl"]    { padding-left:   42px;
                                           padding-right:  42px }
.e-element[data-indent-vertical="xxl"]   { padding-left:   48px;
                                           padding-right:  48px }
.e-element[data-indent-bottom="xxs"]     { padding-bottom:  6px }
.e-element[data-indent-bottom="xs"]      { padding-bottom: 12px }
.e-element[data-indent-bottom="s"]       { padding-bottom: 18px }
.e-element[data-indent-bottom="m"]       { padding-bottom: 24px }
.e-element[data-indent-bottom="l"]       { padding-bottom: 36px }
.e-element[data-indent-bottom="xl"]      { padding-bottom: 42px }
.e-element[data-indent-bottom="xxl"]     { padding-bottom: 48px }
.e-element[data-indent-left="xxs"]       { padding-left:    6px }
.e-element[data-indent-left="xs"]        { padding-left:   12px }
.e-element[data-indent-left="s"]         { padding-left:   18px }
.e-element[data-indent-left="m"]         { padding-left:   24px }
.e-element[data-indent-left="l"]         { padding-left:   36px }
.e-element[data-indent-left="xl"]        { padding-left:   42px }
.e-element[data-indent-left="xxl"]       { padding-left:   48px }
.e-element[data-indent-right="xxs"]      { padding-right:   6px }
.e-element[data-indent-right="xs"]       { padding-right:  12px }
.e-element[data-indent-right="s"]        { padding-right:  18px }
.e-element[data-indent-right="m"]        { padding-right:  24px }
.e-element[data-indent-right="l"]        { padding-right:  36px }
.e-element[data-indent-right="xl"]       { padding-right:  42px }
.e-element[data-indent-right="xxl"]      { padding-right:  48px }
.e-element[data-indent-top="xxs"]        { padding-top:     6px }
.e-element[data-indent-top="xs"]         { padding-top:    12px }
.e-element[data-indent-top="s"]          { padding-top:    18px }
.e-element[data-indent-top="m"]          { padding-top:    24px }
.e-element[data-indent-top="l"]          { padding-top:    36px }
.e-element[data-indent-top="xl"]         { padding-top:    42px }
.e-element[data-indent-top="xxl"]        { padding-top:    48px }

/***** Element indent *****/



/***** Anchor *****/
/*** Anchor body ***/

.e-anchor--body {
  cursor: pointer;
  display: block;
  font-weight: 500;
  white-space: nowrap;
  word-wrap: normal;
}

/*** Anchor body ***/
/***** Anchor *****/



/***** Breadcrumbs *****/
/*** Breadcrumbs body ***/

.e-breadcrumbs--body {
  display: flex;
  grid-column-gap: 9px;
}

/*** Breadcrumbs body ***/

/*** Breadcrumbs crumb ***/

.e-breadcrumbs--crumb {
  color:          var( --color-muted );
  font-size:      var( --font-size-xs );
  letter-spacing: var( --letter-spacing-xs );
  line-height:    24px;
  max-width:      160px;
  overflow-x:     hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.e-breadcrumbs--separator {
  align-items: center;
  display: flex;
  height: 24px;
}

.e-breadcrumbs--separator::after {
  background-color: var( --border-color-muted );
  border-radius:    3px;
  content:          '';
  height:           6px;
  opacity:          .6;
  width:            6px;
}

.e-breadcrumbs--crumb[data-clickable] {
  font-weight: 600;
}

/*** Breadcrumbs crumb ***/
/***** Breadcrumbs *****/



/***** Button *****/
/*** Button body ***/

.e-button--body {
  align-items: center;
  cursor: pointer;
  display: flex;
  grid-column-gap: 6px;

  /* */
  width: 100%;
}

.e-button--body[data-border-color] {
  border-style: solid;
  border-width: 1px;
}

/*** Button body ***/

/*** Button icon ***/

.e-button--icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: var( --icon-size-xs );
  justify-content: center;
  width: var( --icon-size-default );
}

.e-button--icon-placeholder {
  /* XXX#4519
   * A gombon megjelenített ikon asszimetrikussá tenné a gomb szélességét, ezért szükséges
   * az ikon placeholder alkalmazása. */
 width: 12px;
}

/*** Button icon ***/

/*** Button label ***/

.e-button--label {
  white-space: nowrap;
  word-wrap: normal;
}

/*** Button label ***/
/***** Button *****/



/***** Button-separator *****/

.e-button-separator {
  align-items: center;
  display: flex;
}

.e-button-separator--body {
  height: 18px;
  width: 1px;
}

/***** Button-separator *****/



/***** Card *****/
/*** Card wrapper ***/

.e-card {
  /* A stretch-orientation tulajdonság használatával egyes esetekben
   * az egymás melletti card elemek magassága megegyzik.
   * (100% - 2x horizontal-margin) */
 -height: calc(100% - 24px);
}

/*** Card wrapper ***/

/*** Button badge ***/

.e-card .e-element-badge {
  right: 6px;
  top:   6px;
}

/*** Button badge ***/

/*** Card body ***/

.e-card--body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.e-card--body[data-border-color] {
  border-style: solid;
  border-width: 1px;
}

/*** Card body ***/
/***** Card *****/



/***** Card-group *****/
/*** Card-group wrapper ***/

.e-card-group {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 12px;
}

/*** Card-group wrapper ***/
/***** Card-group *****/



/***** Checkbox *****/
/*** Checkbox options ***/

.e-checkbox[data-options-orientation="horizontal"] .e-checkbox--body {
  display: flex;
  grid-column-gap: 24px;
}

/*** Checkbox options ***/

/*** Checkbox option ***/

.e-checkbox--option {
  display:        flex;
  padding-bottom: 6px;
  padding-top:    6px;
}

.e-checkbox--option-button {
  height: 24px;
  margin-right: 6px;
  width: 24px;
}

.e-checkbox--option-button::before {
  background-color: var( --fill-color );
  border-radius: var( --border-radius-xs );
  border-style: solid;
  border-width: 2px;
  content: '';
  height: 20px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 20px;
}

.e-checkbox--option-label {
  /* XXX#5050 */
  font-weight: 500;
  line-height: 24px;
  text-align: left;
}

.e-checkbox--option-helper {
  /* XXX#5050 */
  color:       var( --color-muted );
  font-size:   var( --font-size-xs );
  line-height: var( --line-height-xs );
  text-align:  left;
}

/*** Checkbox option ***/

/*** Checkbox marker ***/

.e-checkbox--option-button::after {
  content: '';
  font-size: 16px;
  height: 16px;
  left: 4px;
  line-height: 16px;
  position: absolute;
  top: 4px;
  width: 16px;
}

.e-checkbox--option[data-checked="true"] .e-checkbox--option-button::after {
  content: 'done';
}

/*** Checkbox marker ***/
/***** Checkbox *****/



/***** Checkbox-group *****/
/***** Checkbox-group *****/



/***** Chip *****/
/*** Chip body ***/

.e-chip--body {
  border-radius: 12px;
  display: flex;
  height: 24px;
  padding-left: 12px;
}

/*** Chip body ***/

/*** Chip icon ***/

.e-chip--icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: var( --icon-size-xxs );
  height: 24px;
  justify-content: center;
  padding-right: 6px;
  width: 24px;
}

/*** Chip icon ***/

/*** Chip label ***/

.e-chip--label {
  font-size: var( --font-size-xs );
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

/*** Chip label ***/

/*** Chip primary button ***/

.e-chip--primary-button {
  background-color: rgba(255, 255, 255, .65);
  border-radius: 10px;
  color: var( --color );
  height: 20px;
  margin: 2px 2px 0 12px;
  width: 20px;
}

.e-chip--primary-button-icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  justify-content: center;
  line-height: 20px;
}

.e-chip--primary-button--placeholder {
  width: 12px;
}

/*** Chip primary button ***/
/***** Chip *****/



/***** Chip-group *****/
/*** Chip-group wrapper ***/

.e-chip-group {}

/*** Chip-group wrapper ***/

/*** Chip-group chips ***/

.e-chip-group--chips {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 12px;
 -padding: 6px 0;
}

/*** Chip-group chips ***/

/*** Chip-group no-chips label ***/

.e-chip-group--chips-placeholder {
  color: var( --color-highlight );
  font-size: var( --font-size-s );
  letter-spacing: var( --letter-spacing-s );
  /* A .e-chip-group--chips-placeholder elem magassága megegyzik az .e-chip-group--chips
   * elem magasságával */
 -line-height: 36px;
  line-height: 24px;
}

/*** Chip-group no-chips label ***/
/***** Chip-group *****/



/***** Circle diagram *****/
/*** Circle diagram wrapper ***/

.e-circle-diagram {
  align-items:     center;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

/*** Circle diagram wrapper ***/

/*** Circle diagram sections ***/
/*** Circle diagram sections ***/

/*** Circle diagram section ***/

.e-circle-diagram--section {
  /* A transition tulajdonság használatával a szekciók darabosan
     animálva változtatták a méretüket!
 -transition: stroke-dasharray .5s ease-out; */

  fill: transparent;
  transform-origin: center;
}

/*** Circle diagram section ***/
/***** Circle diagram *****/



/***** Color-marker *****/

.e-color-marker {}

.e-color-marker--body {
  display: flex;
  flex-direction: column;
  grid-row-gap: 2px;
  overflow: hidden;
}

.e-color-marker--color {
  flex-grow: 1;
}

/***** Color-marker *****/



/***** Color-selector *****/
/*** Color-selector options ***/

.e-color-selector--body {
  display: flex;
  grid-column-gap: 12px;
  padding: 12px;
}

/*** Color-selector options ***/

/*** Color-selector option ***/

.e-color-selector--option[data-collected="true"]::after {
  align-items: center;
  background-color: var( --fill-color );
  border-radius: 12px;
  color: var( --color );
  content: 'check';
  display: flex;
  font-size: var( --icon-size-xxs );
  font-weight: 600;
  height: 20px;
  justify-content: center;
  left: 14px;
  line-height: 20px;
  position: absolute;
  top: 14px;
  width: 20px;
}

.e-color-selector--option--color {
  border-radius: var( --border-radius-m );
  height: 48px;
  width: 48px;
}

/*** Color-selector option ***/
/***** Color-selector *****/



/***** Color-stamp *****/

.e-color-stamp--body {
  background-color: var( --fill-color );
  border-radius: var( --border-radius-s );
  display: flex;
  /* flex-shrink: ? */
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.e-color-stamp--color {
  flex-grow: 1;
  height: 100%;
}

.e-color-stamp--colors-placeholder {
  background-color: var( --background-color-highlight );
  height: 100%;
  width: 100%;
}

/***** Color-stamp *****/



/***** Column *****/
/*** Column wrapper ***/

.e-column--body {
  display: flex;
  flex-direction: column;
  /* BUG
   * Az .e-column--body nem lehet {height: 100%} magas, mert akkor mindig akkora, mint a szülő elem
   * ha azt akarod, hogy kitöltse a rendelkezésre álló helyet, akkor flex-grow tulajdonságot kell
   * beállítani. A {height: 100%} nem jó, amikor nem egyedül van a szülő elemben!!! */
  /* BUG
   * Vissza kellett állítani a {height: 100%} beállítás használatát, mert enélkül az .e-column--body
   * elem nem vette fel a .e-column elem magasságát, ezért nem működött a benne megjelenített tartalom
   * középre igazítása. Tényleg meg lehet oldali flex-grow tulajdonság használatával, de az előző
   * leírás szerint a {height: 100%} beállítás használatával akkor van probléma, ha:
   * "A {height: 100%} nem jó, amikor nem egyedül van a szülő elemben!!!"
   * De az .e-column--body mindig egyedül van a szülő elemben (.e-column)! (Vagy melyik elem van egyedül, miben?)
   */
  height: 100%;
}

.e-column--body[data-wrap-items="true"] {
  flex-wrap: wrap;
}

/*** Column wrapper ***/
/***** Column *****/



/***** Combo-box *****/
/*** Combo-box surface ***/

.e-combo-box--surface {
  font-size: var( --font-size-s );
  line-height: var( --line-height-s );
  letter-spacing: var( --letter-spacing-s );
}

/*** Combo-box surface ***/

/*** Combo-box options ***/

.e-combo-box--options {
  display: flex;
  flex-direction: column;
  max-height: 340px;
}

/*** Combo-box options ***/

/*** Combo-box option ***/

.e-combo-box--field-content-option,
.e-combo-box--option {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  padding: 8px 8px;
  text-align: left;
  width: 100%;
}

.e-combo-box--option[data-highlighted="true"] {
  background-color: var( --background-color-highlight );
}

.e-combo-box--option:hover {
  background-color: var( --hover-color-highlight );
}

.e-combo-box--field-content-option {
  color: var( --color-muted )}

/*** Combo-box option ***/
/***** Combo-box *****/



/***** Counter *****/
/*** Counter body ***/

.e-counter--body {
  align-items: center;
  display: flex;
  padding-bottom: 6px;
  padding-top: 6px;
}

/*** Counter body ***/

/*** Counter value ***/

.e-counter--value {
  font-weight: 500;
  line-height: 24px;
  min-width: 64px;
  text-align: center;
}

/*** Counter value ***/

/*** Counter button ***/

.e-counter--decrease-button,
.e-counter--increase-button,
.e-counter--reset-button {
  background-color: var( --fill-color );
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  height: 20px;
  width: 20px;
}

.e-counter--decrease-button::before,
.e-counter--increase-button::before,
.e-counter--increase-button::after,
.e-counter--reset-button::before,
.e-counter--reset-button::after {
  background-color: var( --color );
  border-radius: 1px;
  content: '';
  position: absolute;
}

.e-counter--decrease-button::before,
.e-counter--increase-button::before,
.e-counter--reset-button::before {
  height: 2px;
  left: 4px;
  top: 7px;
  width: 8px;
}

.e-counter--increase-button::after,
.e-counter--reset-button::after {
  height: 8px;
  left: 7px;
  top: 4px;
  width: 2px;
}

.e-counter--reset-button {
  border-color: var( --color );
  margin-left: 12px;
}

.e-counter--reset-button::before,
.e-counter--reset-button::after {
  transform: rotateZ( -45deg );
}

.e-counter--decrease-button[data-disabled="true"],
.e-counter--increase-button[data-disabled="true"],
.e-counter--reset-button[data-disabled="true"] {
  cursor: default;
  opacity: .5;
}

/*** Counter button ***/
/***** Counter *****/



/***** Digit field *****/
/***** Digit field wrapper *****/

.e-digit-field {
  height: 48px;
}

/***** Digit field wrapper *****/

/***** Digit field input *****/

.e-digit-field--input {
  color: var( --fill-color );
  height: 100%;
  width: 100%;
}

/***** Digit field input *****/

/***** Digit field cover *****/

.e-digit-field--cover {
  display: flex;
  grid-column-gap: 12px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.e-digit-field--cover--digit {
  align-items: center;
  border-color: var( --color-highlight );
  border-radius: var( --border-radius-s );
  border-style: solid;
  border-width: 1px;
  cursor: text;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  justify-content: center;
  height: 100%;
  width: 36px;
}

/***** Digit field cover *****/
/***** Digit field *****/



/***** Expandable *****/
/*** Expandable header ***/

.e-expandable--header {
  align-items: center;
  display: flex;
  justify-content: left;
}

/*** Expandable header ***/

/*** Expandable icon ***/

.e-expandable--icon {
  font-size: var( --icon-size-m );
  height: 24px;
  line-height: 24px;
  margin-right: 6px;
  width: 24px;
}

/*** Expandable icon ***/

/*** Expandable label ***/

.e-expandable--label {
  font-size: var( --font-size-s );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-s );
  line-height: var( --line-height-s );
  padding-right: 6px;
}

/*** Expandable header ***/

/*** Expandable expand icon ***/

.e-expandable--expand-icon {
  align-items: center;
  display: flex;
  font-size: var( --icon-size-m );
  flex-direction: column;
  justify-content: center;
  height: 24px;
  width: 24px;
}

/*** Expandable expand icon ***/
/***** Expandable *****/



/***** File drop area *****/
/*** File drop area body ***/

.e-file-drop-area--body {
  align-items: center;
  background-color: var( --background-color-highlight );
  border-radius: var( --border-radius-xxl );
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 180px;
  justify-content: center;
  padding: 0 24px;
  width: 280px;
}

.e-file-drop-area--label {
  color: var( --color-muted );
  font-size: var( --font-size-s );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-s );
  line-height: var( --line-height-s );
}

.e-file-drop-area--icon {
  font-size: var( --icon-size-xxl );
  height: 36px;
  line-height: 36px;
}

/*** File drop area body ***/
/***** File drop area *****/



/***** Ghost *****/

.e-ghost {
  /* XXX#5577
   * A {:size ...} tulajdonság nélkül használt ghost elem magassága beállítható
   * a {:style {:height "..."}} beállítás használatával, ilyenkor az .e-ghost--body
   * elem magassága alkalmazkodik az .e-ghost elem magasságához */
  display: flex;
  flex-direction: column;
}

.e-ghost--body {
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-name: opacity-1-05-1;
  background-color: var( --ghost-color );
  /* XXX#5577 */
  flex-grow: 1;
}

/***** Ghost *****/



/***** Horizontal line *****/

.e-horizontal-line,
.e-horizontal-line--body {
  width: 100%;
}

/***** Horizontal line *****/



/***** Icon *****/

.e-icon--body {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: var( --icon-size-default );
  justify-content: center;
}

/*** Icon layout ***/

.e-icon--body[data-layout="touch-target"] {
  height: 48px;
  width: 48px;
}

/*** Icon layout ***/
/***** Icon *****/



/***** Label *****/
/*** Label wrapper ***/

.e-label {
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* TEMP
   * 2022.11.26
   * A bubble elemen megjelenített hosszu feliratok kilogtak a bubble elemből.
   * Ha nem okoz máshol gondot, akkor a max-width beállítása maradhat véglegesen is majd! */
  max-width: 100%;
}

/*** Label wrapper ***/

/*** Label body ***/

.e-label--body {
  align-items: center;
  display: flex;
}

/*** Label body ***/

/*** Copyable label ***/

.e-label--copyable {
  cursor: pointer;
  display: flex;
  max-width: 100%;
}

.e-label--copyable::after {
  background-color: var( --fill-color );
  border-color: var( --border-color-highlight );
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  color: var( --color-primary );
  font-size: var( --font-size-xs );
  line-height: 18px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(50% - 16px);
  transform: translateX(calc(100% + 6px));
  z-index: 9999;
}

.e-label--copyable:hover::after {
  content: attr(data-copy-label);
}

/*** Copyable label ***/

/*** Label content ***/

.e-label--content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e-label--body[data-overflow-direction="reversed"] .e-label--content {
  direction: rtl;
}

/*** Label content ***/

/*** Label placeholder ***/

/* Az elemekben megjelenített, a tartalom hiányát jelző feliratok (placeholder-ek),
 * mindegyike highlight színnel van kiírva, ezért a label elem tartalmának hiányát
 * jelző placeholder felirat is highlight színt kap! */
.e-label--placeholder {
  color: var( --color-highlight );
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*** Label placeholder ***/

/*** Label asterisk ***/

.e-label--asterisk {
  color: var( --color-warning );
  font-weight: 600;
  padding-left: 2px;
}

/*** Label asterisk ***/

/*** Label marker ***/

.e-label--marker {
  color: var( --color-primary );
  font-weight: 600;
  padding-left: 2px;
}

/*** Label marker ***/

/*** Label icon ***/

.e-label--icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  line-height: 100%;
  margin-right: 6px;
  justify-content: center;
  width: 24px;
}

.e-label--icon-placeholder {
  /* XXX#4519 */
  width: 12px;
}

/*** Label icon ***/

/*** Label helper, info-text ***/

.e-label--helper,
.e-label--info-text {
  color:          var( --color-muted );
  font-size:      var( --font-size-xs );
  letter-spacing: var( --letter-spacing-xs );
  line-height:    24px;
}

/*** Label helper, info-text ***/

/*** Label info-text button ***/

.e-label--info-text-button {
  color:       var( --color-muted );
  font-size:   var( --icon-size-xxs );
  line-height: 24px;
  height:      24px;
  width:       24px;
}

/*** Label info-text button ***/
/***** Label *****/



/***** Line diagram *****/
/*** Line diagram wrapper ***/

.e-line-diagram {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*** Line diagram wrapper ***/

/*** Line diagram sections ***/

.e-line-diagram--sections {
  display: flex;
}

/*** Line diagram sections ***/

/*** Line diagram section ***/

.e-line-diagram--section {
  transition: width .5s ease-out;
  height: 100%;
}

/*** Line diagram section ***/
/***** Line diagram *****/



/***** Icon-button *****/
/*** Icon-button wrapper ***/

.e-icon-button--body[data-border-color] {
  border-style: solid;
  border-width: 1px;
}

/*** Icon-button wrapper ***/

/*** Icon-button progress *****/

.e-icon-button--progress-svg {
  height: 24px;
  width: 24px;

  /* BUG#8801
   * Az .e-icon-button--body::before pszeudóelem abszolút pozícionálású,
   * ezért szükséges, hogy az .e-icon-button--progress-svg is az legyen,
   * különben a pszeudóelem eltakarná az svg elemet! */
  position: absolute;
}

.e-icon-button--progress-circle {
  fill: transparent;
}

/*** Icon-button progress *****/

/*** Icon-button badge ***/

.e-icon-button .e-element-badge {
  right: 6px;
  top:   6px;
}

/*** Icon-button badge ***/

/*** Icon-button body ***/

.e-icon-button--body {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.e-icon-button[data-variant="placeholder"] .e-icon-button--body {
  cursor: default;
}

/*** Icon-button body ***/

/*** Icon-button hover ***/

.e-icon-button--body::before {
  content: '';
  left: 6px;
  position: absolute;
  top: 6px;

  /* Azért calc(100% - 12px) magas és széles a hover-background az ikon-button
   * elemen, mert így az érzékelési terület szélétől 6px távolságra van, ami
   * megegyezik a legkisebb indent méretével (XXS indent: 6px) */
  width: calc(100% - 12px);

  /* XXX#6610
   * Az ikon-gomb magassága a data-height attributtummal változik ezért szükséges
   * a calc függvénnyel számítani a pszeudo-elem magasságát! */
  height: calc(100% - 12px);
}

.e-icon-button--body[data-labeled="true"]::before {
  /* TEMP
   * Teszt: hover-color & label együtt */
  top: 12px;
  height: calc(100% - 24px);
}

/*** Icon-button hover ***/

/*** Icon-button icon ***/

.e-icon-button--icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: var( --icon-size-s );
  justify-content: center;
  width: var( --icon-size-default );

  /* BUG#0983
   * height, overflow, width:
   * Az ikonokat megjelenítő font-készlet letöltődése előtt felvillan az ikon neve (FOIT/FOUT).
   * A height, overflow, és width tulajdonságok beállítása nélkül az ikon méretének
   * pillanatnyi megváltozását okozná. */
  height: var( --icon-size-default );
  overflow: hidden;

  /* BUG#0984
   * Az .e-icon-button--body::before {background-color: ...} tulajdonsággal
   * rendelkező pszeudo-elem eltakarná az ikont, ha az nem abszolút pozícionálással
   * jellene meg, mert a pszeudo-elem a {position: absolute} beállítása miatt
   * az ikon felett jelenne meg! */
  left: calc(50% - 12px);
  position: absolute;

  /* XXX#6610
   * Mi az kalkulált top érték, ami különböző data-height értékek mellett is működik?
   *  */
 -top: calc()}

/*** Icon-button icon ***/

/*** Icon-button label ***/

.e-icon-button--label {
  font-size: 9px;
  font-weight: 600;
  height: 12px;
  letter-spacing: var( --letter-spacing-xxs );
  line-height: 12px;
  opacity: .75;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;

  /* BUG#0984 */
  bottom: 0;
  left: 0;
  position: absolute;
}

/*** Icon-button label ***/
/***** Icon-button *****/



/***** Menu bar *****/
/*** Menu wrapper ***/
/*** Menu wrapper ***/

/*** Menu items ***/
/*** Menu items ***/

/*** Menu item ***/

/* Az .e-menu-bar--menu-item elemben alkalmazott esztétikai távolságok (margin, padding),
 * meg kell feleljenek a felsorolt felhasználási módoknak:
 *   1. A menü-elemek kizárólag ikonokat jelenítenek meg
 *   2. A menü-elemek kizárólag feliratokat jelenítenek meg
 *   3. A menü-elemek ikonokat és feliratokat jelenítenek meg */
/* TODO
 * Az 1.-es és 3.-as (ikon-gomb és ikon-gomb felirattal) legyen egy külön elemtípus! */
.e-menu-bar--menu-item {
  align-items: center;
  color: var( --color-highlight );
  /* Ha az .e-menu-bar--menu-item elem egyszerre feliratot és ikont is megjelenít,
   * akkor a felirat és az ikon közötti esztétikai távolságot a column-gap
   * tulajdonság határozza meg */
  column-gap: 6px;
  display: flex;
  /* Ha az .e-menu-bar--menu-item elem feliratot NEM jelenít meg csak ikont,
   * akkor az ikon-gombként jelenik meg (12px + 24px + 12px = 48px szélesség) */
  padding: 0 12px;
}

.e-menu-bar--menu-item[data-active="true"]::after {
  background-color: var( --border-color-primary );
 -border-radius: 1.5px;
  bottom: 0;

  /* Az indicator megjelenítése ki van kapcsolva ... */
  content: '';
  content: none;

  height: 1px;
  left: 30%;
  position: absolute;
  width: 40%;
}

.e-menu-bar--menu-item[data-active="true"] {
  color: var( --color );
}

.e-menu-bar--menu-item--icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: var( --icon-size-xs );
  height: var( --icon-size-default );
  justify-content: center;
  width: var( --icon-size-default );
}

.e-menu-bar--menu-item--label {
  font-weight: 600;
  line-height: var( --line-height-s );
  white-space: nowrap;
}

/*** Menu item ***/

/*** Menu item badge ***/

.e-menu-bar--menu-item .e-element-badge {
  min-height: 6px;
  right: 6px;
  top: 12px;
  min-width: 6px;
}

/*** Menu item badge ***/
/***** Menu bar *****/



/***** Multi field *****/

.e-multi-field {
  /* Távolság nélkül túlságosan közel lennének egymáshoz a multi-field komponens
   * text-field alkomponensei */
  display: flex;
  flex-direction: column;
  grid-row-gap: 8px;
}

/***** Multi field *****/



/***** Radio button *****/
/*** Radio button clear button ***/

.e-radio-button--clear-button {
  background-color: var( --fill-color );
  border-color: var( --color );
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  margin-bottom: 6px;
  margin-right: 12px;
  margin-top: 6px;
  height: 20px;
  width: 20px;
}

.e-radio-button--clear-button::before,
.e-radio-button--clear-button::after {
  background-color: var( --color );
  border-radius: 1px;
  content: '';
  position: absolute;
  transform: rotateZ( -45deg );
}

.e-radio-button--clear-button::before {
  height: 2px;
  left: 4px;
  top: 7px;
  width: 8px;
}

.e-radio-button--clear-button::after {
  height: 8px;
  left: 7px;
  top: 4px;
  width: 2px;
}

.e-radio-button--clear-button[data-disabled="true"] {
  cursor: default;
  opacity: .5;
}

/*** Radio button clear button ***/

/*** Radio button options ***/

.e-radio-button[data-options-orientation="horizontal"] .e-radio-button--body {
  display: flex;
  grid-column-gap: 24px;
}

/*** Radio button options ***/

/*** Radio button option ***/

.e-radio-button--option {
  display:        flex;
  padding-bottom: 6px;
  padding-top:    6px;
}

.e-radio-button--option-label {
  /* XXX#5050
   * A {text-align: left} beállítás biztosítja, hogy a label és a helper
   * feliratok közül bármelyik lehet hosszabb a másiknál, mind a kettő
   * balraigazítottan jelenjen meg */
  font-weight: 500;
  line-height: 24px;
  text-align:  left;
}

.e-radio-button--option-helper {
  /* XXX#5050 */
  color:       var( --color-muted );
  font-size:   var( --font-size-xs );
  line-height: var( --line-height-xs );
  text-align:  left;
}

/*** Radio button option ***/

/*** Radio button option button ***/

.e-radio-button--option-button {
  background-color: var( --fill-color );
  border-radius:    50%;
  border-style:     solid;
  border-width:     2px;
  height:           20px;
  margin-bottom:    2px;
  margin-right:     6px;
  margin-top:       2px;
  width:            20px;
}

/*** Radio button option button ***/

/*** Radio button option marker ***/

.e-radio-button--option[data-selected="true"]
.e-radio-button--option-button::before {
  animation-name: opacity-0-1;
  animation-duration: .1s;
  background-color: var( --color );
  border-radius: 50%;
  content: '';
  height: 8px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 8px;
}

/*** Radio button option marker ***/
/***** Radio button *****/



/***** Row *****/
/*** Row body ***/

.e-row--body {
  display: flex;
  /* Az e-row--body elem ugyanolyan magas kell legyen, mint az e-row elem, hogy minden esetben
   * megfelelően működjön a vertikális igazítás!
   *
   * Ha az e-row komponens {:style {...}} tulajdonságával beállítod az e-row elem magasságát,
   * és {:vertical-align :center} vagy {:vertical-align :bottom} beállítást használsz, miközben
   * a tartalom magassága kevesebb, mint az e-row elem beállított magassága, akkor a {height: 100%}
   * tulajdonság nélkül az .e-row--body elem magassága a tartalom magasságával lenne egyenlő
   * és nem működne a tartalom középre igazítása! */
  height: 100%;
  width: 100%;
}

.e-row--body[data-wrap-items="true"] {
  flex-wrap: wrap;
}

/*** Row body ***/
/***** Row *****/



/***** Polarity *****/

.e-horizontal-polarity {
  /* WARNING! DEPRECATED! DO NOT USE! */
 -height: 100%;
  /* WARNING! DEPRECATED! DO NOT USE! */
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.e-horizontal-polarity--start-content,
.e-horizontal-polarity--middle-content,
.e-horizontal-polarity--end-content {
  display: flex;
}

.e-horizontal-polarity--start-content {
 -position: absolute;
}
.e-horizontal-polarity--end-content {
 -position: absolute;
}
.e-horizontal-polarity--middle-content {
 -justify-content: center;
 -position: absolute;
 -width: 100%;
}

.e-vertical-polarity {
  /* WARNING! DEPRECATED! DO NOT USE! */
 -width: 100%;
  /* WARNING! DEPRECATED! DO NOT USE! */
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.e-vertical-polarity--start-content,
.e-vertical-polarity--middle-content,
.e-vertical-polarity--end-content {
  display: flex;
  flex-direction: column;
}

/***** Polarity *****/



/***** Select *****/
/*** Select button ***/

.e-select--button-body {
  background: var( --fill-color );
  border-style: solid;
  border-width: 1px;
  display: flex;
  height: 36px;
  justify-content: space-between;
  padding: 0 12px;
  width: 100%;
}

.e-select--button-label {
  display: flex;
  flex-direction: column;
  font-size: var( --font-size-s );
  font-weight: 500;
  height: 100%;
  justify-content: center;
  letter-spacing: var( --letter-spacing-s );
  line-height: 100%;
}

.e-select--button-icon {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding-left: 6px;
}

/*** Select button ***/

/*** Select warning ***/

.e-select--warning {
  color: var( --color-warning );
  font-size: var( --font-size-xs );
  letter-spacing: var( --letter-spacing-s );
  line-height: 24px;
  text-align: right;
}

/*** Select warning ***/

/*** Select options ***/

.e-select--option-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}

.e-select--options-placeholder {
  align-self: center;
  color: var( --color-highlight );
  font-size: var( --font-size-s );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-s );
  line-height: 24px;
}

/*** Select options ***/

/*** Select option ***/

.e-select--option {
  border-radius: var( --border-radius-xs );
  display: flex;
  padding: 0 24px;
  width: 100%;
}

.e-select--option:hover,
.e-select--option[data-selected="true"]:hover {
  background-color: var( --hover-color-highlight );
}

/*** Select option ***/

/*** Select option label ***/

.e-select--option {
  font-size: var( --font-size-s );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-s );
  line-height: 36px;
}

.e-select--option[data-selected="true"] {
  background-color: var( --background-color-highlight );
  font-weight: 600;
}

.e-select--option[data-selected="true"]::before {
  background-color: var( --color-primary );
  border-radius: 50%;
  content: '';
  height: 4px;
  left: 10px;
  position: absolute;
  top: 16px;
  width: 4px;
}

/*** Select option label ***/

/*** Select option icon ***/

.e-select--option-icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: var( --icon-size-s );
  height: 36px;
  margin-right: 8px;
  justify-content: center;
  width: 24px;
}

/*** Select option icon ***/

/*** Select options header ***/

.e-select--options--header {}

.e-select--options--label {
  display: flex;
  font-size: var( --font-size-s );
  font-weight: 500;
  justify-content: center;
  letter-spacing: var( --letter-spacing-s );
  line-height: 48px;
}

.e-select--options--label[data-placeholder="true"] {
  height: 12px;
}

/*** Select options header ***/
/***** Select *****/



/***** Separator *****/

.e-horizontal-separator,
.e-vertical-separator {
  flex-shrink: 0;
  width: 100%;
}

/***** Separator *****/



/***** Slider *****/
/*** Slider body ***/

.e-slider--body {
  height: 20px;
}

/*** Slider body ***/

/*** Slider track ***/

.e-slider--track {
  background-color: var( --background-color-highlight );
  border-radius: 2px;
  height: 4px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 100%;
}

/*** Slider track ***/

/*** Slider line ***/

.e-slider--line {
  cursor: grab;
  height: 10px;
  opacity: .3;
  position: absolute;
  top: 5px;
}

.e-slider--line::after {
  background-color: var( --border-color-primary );
  border-radius: 2px;
  content: '';
  height: 4px;
  position: absolute;
  top: 3px;
  width: 100%;
}

/*** Slider line ***/

/*** Slider thumb ***/

.e-slider--thumb {
  background-color: var( --border-color-primary );
  border-radius: 6px;
  cursor: grab;
  height: 20px;
  position: absolute;
  top: 0;
  width: 12px;
}

/*** Slider thumb ***/
/***** Slider *****/



/***** Slideshow *****/
/*** Slideshow steps wrapper ***/

.e-slideshow--steps {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/*** Slideshow steps wrapper ***/

/*** Slideshow steps ***/

.e-slideshow--prev-step,
.e-slideshow--current-step,
.e-slideshow--temp-step,
.e-slideshow--next-step {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

.e-slideshow--prev-step,
.e-slideshow--next-step,
.e-slideshow--temp-step {
  left: 0;
  position: absolute;
  top: 0;
}

.e-slideshow--prev-step,
.e-slideshow--current-step,
.e-slideshow--next-step {
  transition: transform .25s ease-in-out;
}

.e-slideshow[data-animation="slide-in-bwd"]
.e-slideshow--prev-step,
.e-slideshow--current-step,
.e-slideshow[data-animation="slide-in-fwd"]
.e-slideshow--next-step {
  transform: translateX( 0 );
}

.e-slideshow--prev-step,
.e-slideshow[data-animation="slide-in-fwd"]
.e-slideshow--current-step {
  transform: translateX( -100% );
}

.e-slideshow--next-step,
.e-slideshow[data-animation="slide-in-bwd"]
.e-slideshow--current-step {
  transform: translateX( 100% );
}

.e-slideshow[data-animation="slide-in-bwd"]
.e-slideshow--temp-step,
.e-slideshow[data-animation="slide-in-fwd"]
.e-slideshow--temp-step {
  opacity: 0;
}

/*** Slideshow steps ***/

/*** Slideshow controls ***/

.e-slideshow--controls {
  animation-fill-mode: both;
  animation-name: opacity-1-0;
  animation-duration: .3s;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.e-slideshow--controls:hover {
  animation-name: none;
}

.e-slideshow--controls--go-bwd,
.e-slideshow--controls--go-fwd {
  height: 80px;
  position: absolute;
  top: calc( 50% - 40px );
  width: 80px;
}

.e-slideshow--controls--go-bwd {
  left: 0;
}

.e-slideshow--controls--go-fwd {
  right: 0;
}

.e-slideshow--controls--go-bwd::before,
.e-slideshow--controls--go-fwd::before {
  color: var( --white );
  font-size: 64px;
  height: 64px;
  left: 8px;
  line-height: 64px;
  position: absolute;
  top: 8px;
  width: 64px;
}

.e-slideshow--controls--go-bwd::before {
  content: 'chevron_left';
}

.e-slideshow--controls--go-fwd::before {
  content: 'chevron_right';
}

/*** Slideshow controls ***/
/***** Slideshow *****/



/***** Switch *****/
/*** Switch options ***/

.e-switch[data-options-orientation="horizontal"] .e-switch--body {
  display: flex;
  grid-column-gap: 24px;
}

/*** Switch options ***/

/*** Switch option ***/

.e-switch--option {
  display:        flex;
  padding-bottom: 6px;
  padding-top:    6px;
}

.e-switch--option-track {
  background-color: var( --fill-color );
  border-radius: 10px;
  border-style:  solid;
  border-width:  2px;
  margin-bottom: 2px;
  margin-right:  6px;
  margin-top:    2px;
  height:        20px;
  width:         40px;
}

.e-switch--option-label {
  /* XXX#5050 */
  font-weight: 500;
  line-height: 24px;
  text-align:  left;
}

.e-switch--option-helper {
  /* XXX#5050 */
  color:       var( --color-muted );
  font-size:   var( --font-size-xs );
  line-height: var( --line-height-xs );
  text-align:  left;
}

/*** Switch option ***/

/*** Switch thumb ***/

.e-switch--option-track::before {
  background-color: var( --color );
  border-radius: 50%;
  content: '';
  height: 12px;
  left: 2px;
  position: absolute;
  transition: transform .1s ease-out;
  top: 2px;
  width: 12px;
}

.e-switch--option[data-switched="true"] .e-switch--option-track::before {
  transform: translateX( 20px );
}

/*** Switch thumb ***/
/***** Switch *****/



/***** Text *****/
/*** Text wrapper ***/

.e-text {}

/*** Text wrapper ***/

/*** Text body ***/

.e-text--body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* A word-break tulajdonság megtöri a szavakat! Ne használd! */
  -word-break: break-all;
}

.e-text--body[data-cropped="true"] {
  justify-content: flex-start;
  overflow-y: hidden;
}

.e-text--body[data-cropped="true"]::after {
  background-image: linear-gradient(0deg, white, transparent);
  bottom: 0;
 -content: '';
  height: 10px;
  left: 0;
  position: absolute;
  width: 100%;
}

/*** Text body ***/

/*** Copyable text ***/

.e-text--copyable {
  cursor: pointer;
  display: flex;
  max-width: 100%;
}

.e-text--copyable::after {
  background-color: var( --fill-color );
  border-color: var( --border-color-highlight );
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  color: var( --color-primary );
  font-size: var( --font-size-xs );
  line-height: 18px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(50% - 16px);
  transform: translateX(calc(100% + 6px));
  z-index: 9999;
}

.e-text--copyable:hover::after {
  content: attr(data-copy-label);
}

/*** Copyable text ***/

/*** Text placeholder ***/

.e-text--placeholder {
  color: var( --color-highlight );
}

/*** Text placeholder ***/
/***** Text *****/



/***** Text field *****/

/*** Field input-container ***/

/* Az .e-text-field--input-container elem tartalmazza az input elemet és a hozzá tartózó segéd elemeket
 * pl.: adornment ikonok, feliratok és gombok, placeholder elem ... */
.e-text-field--input-container {
  background-color: var( --fill-color );
  border-color: var( --border-color-highlight );
  border-style: solid;
  border-width: 1px;
  /* A {padding: 1px} beállítás használatával a text-field elem más elemekhez hasonlóan 36px
   * magasságú lesz */
  padding: 1px;
  display: flex;
  justify-content: space-between;
}

/*** Field input-container ***/

/*** Field input ***/

.e-text-field--input-structure {
  flex-grow: 1;
}

.e-text-field--input-emphasize {
  height: 100%;
  width: 100%;
}

.e-text-field--input {
  color: var( --color );
  padding: 4px 0;
  width: 100%;
}

.e-text-field--input[type="date"] {
  cursor: text;
}

textarea.e-text-field--input {
  overflow: hidden;
  resize: none;
}

.e-text-field[data-disabled="true"] .e-text-field--input {
  /* BUG#8800 (source-code/cljs/elements/text_field/helpers.cljs) */
  caret-color: transparent
}

/*** Field input ***/

/*** Field adornments ***/

.e-text-field--adornments {
  display: flex;
  padding: 0 4px;
}

.e-text-field--adornments-placeholder {
  cursor: text;
  width: 8px;
}

.e-text-field--button-adornment[data-disabled="true"] {
  cursor: default;
  opacity: .5;
}

.e-text-field--button-adornment,
.e-text-field--static-adornment {
  text-align: center;
  min-width: 24px;
  /* (24px - 18px) / 2 = 3px */
  padding: 4px 3px;
}

.e-text-field--button-adornment:not([data-icon-family]),
.e-text-field--static-adornment:not([data-icon-family]) {
  font-size: var( --font-size-xs );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-xxs );
}

.e-text-field--button-adornment[data-icon-family],
.e-text-field--static-adornment[data-icon-family] {
  font-size: 18px;
}

/*** Field adornments ***/

/*** Field warning ***/

.e-text-field--warning {
  color: var( --color-warning );
  font-size: var( --font-size-xs );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-s );
  line-height: 24px;
  text-align: right;
}

/*** Field warning ***/

/*** Field placeholder ***/

.e-text-field--placeholder {
  color: var( --color-muted);
  font-size: var( --font-size-xs );
  left: 0;
  letter-spacing: var( --letter-spacing-xs );
  padding: 4px 0;
  position: absolute;
  top: 0;

  /* Kis méretű kijelzőkön a hosszabb placeholder szövegek több sorba törnének ... */
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/*** Field placeholder ***/

/*** Field surface ***/

.e-text-field--surface {
  background-color: var( --background-color );
  border-radius: var( --border-radius-s );
  box-shadow: var( --box-shadow-black-xx-light );
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 36px;
  width: 100%;
  /* XXX#0567
   * Az #x-app-bubbles elem alatt szükséges megjeleníteni! */
  z-index: 996;
}

/*** Field surface ***/
/***** Text field *****/



/***** Thumbnail *****/

.e-thumbnail--body {
  overflow: hidden;
}

.e-thumbnail--image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

.e-thumbnail--icon {
  align-items: center;
  background-color: var( --background-color-highlight );
  color: var( --color-highlight );
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/***** Thumbnail *****/



/***** Toggle *****/
/*** Toggle body ***/

.e-toggle--body {
  cursor: pointer;
  display: block;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  word-wrap: normal;

  /* Overwriting user-agent rule */
  text-align: left;
}

/*** Toggle body ***/
/***** Toggle *****/



/***** Vertical line *****/

.e-vertical-line,
.e-vertical-line--body {
  height: 100%;
}

.e-vertical-line--body {
  height: 24px;
}

/***** Vertical line *****/