/***** User select *****/

#surface-a--header-title {
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/***** User select *****/



/* Surface A */

#surface-a {
  display: flex;
  flex-direction: column-reverse;
  min-height: 100vh;
  width: 100%;
}

/* Surface A */

/* Background */

#surface-a--background {
  background-color: #fdfdfd;
  background-color: #fafafa;
  background-color: var( --app-background-color );
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.surface-a--background-pattern {
  fill: var( --app-background-pattern-color );
}

/* Background */

/* Header */

#surface-a--header {
  display: flex;
  justify-content: center;
  left: 0;
  position: sticky;
  top: 0;
  width: 100%;
}

#surface-a--header-shadow {
  animation-fill-mode: both;
  animation-duration: .25s;
  background-color: var( --fill-color );
  border-radius: 0 0 var( --border-radius-m ) var( --border-radius-m );
 -box-shadow: 0 0 12px 0 #e0e1e2;
  border-color: var( --border-color-highlight );
  border-style: none solid solid solid;
  border-width: 1px;
  height: 100%;
  opacity: .98;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#surface-a--header-shadow.r-mounting {
  animation-name: opacity-0-098;
}

#surface-a--header-shadow.r-unmounting {
  animation-name: opacity-098-0;
}

#surface-a--header-content {
  border-radius: 0 0 var( --border-radius-m ) var( --border-radius-m );
  display: flex;
  justify-content: space-between;
  max-width: var( --content-width-l );
  width: 100%;
}

[data-viewport-profile="xs"] #surface-a--header-content,
[data-viewport-profile="xs"] #surface-a--header-shadow,
[data-viewport-profile="s"]  #surface-a--header-content,
[data-viewport-profile="s"]  #surface-a--header-shadow {
  border-radius: 0;
}

.surface-a--header-block {
  align-items: center;
  display: flex;
}

#surface-a--header-title {
  animation-fill-mode: both;
  animation-duration: .15s;
  font-size: var( --font-size-s );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-s );
  line-height: 36px;
}

#surface-a--header-title.r-mounting {
  animation-name: opacity-0-1;
}

#surface-a--header-title.r-unmounting {
  animation-name: opacity-1-0;
}

#surface-a--title-sensor {}

/* Header */

/* Body */

#surface-a--body {
  display: flex;
  flex-grow: 1;
  justify-content: center;
 -padding-top: 96px;
 -padding-top: 72px;
  padding-top: 24px;
  width: 100%;
}

@media only screen and (max-width: 719px) {
#surface-a--body { -padding-top: 0;
}}

#surface-a--body-content {
 -background: white;
 -border-radius: 12px;
 -border: 1px solid #f0f0f0;
  max-width: var( --content-width-l );

  /* x4.7.2 #1
   * A surface-a felületen megjelenő tartalom padding-left és padding-right
   * tulajdonságai kikapcsolásra kerültek, hogy a felület széléhez igazított
   * ikon-gombok a fejléc ikon-gombjai alatt jelenjenek meg */
 -padding-left: 12px;
 -padding-right: 12px;
  width: 100%;
}

/* Body */

/* Footer */

#surface-a--footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 12px;
  padding-bottom: 24px;
  padding-top: 48px;
}

#surface-a--footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: var( --content-width-l );
  width: 100%;
}

/* Footer */