body {
  --c-black: #20212c;
  --c-purple: rgb(30,20,60);
  --c-light-purple: rgb(230,120,150);
  --c-blue: rgb(60,90,160);
}

@keyframes pulse {
  from {
    transform: scale(0.92);
  } to {
    transform: scale(0.99);
  }
}


.dev-note{
    background: yellow;
    padding: 3px;
    border: 2.5px dashed #F0D500;
}
.dev-note:before {
    content:"Entwicklerhinweis:";
    padding-right: 5px;
    font-style: italic;
    text-decoration: underline;
    font-weight: bold;
}

html , body {
  height: 100%;
}

h2 {
  margin-bottom: 2rem;
  font-size: 1.4rem;
  color: var(--c-blue);
  text-shadow: 1px 1px 3px rgba(10,15,40, 0.08);
}

#conferenceDate {
  text-align: right;
  font-size: 1.4rem;
  font-weight: 700;

  span {
     white-space: nowrap; 
  }
}

.content-wrapper {
  background: var(--c-purple);
  padding-block: 2rem;
  margin-bottom: 2rem;
  position: relative;
  
  ul {
    margin: 0;
    margin-block: 8px;
    padding-left: 1.5em;
  }
  
  li {
    position: relative;
    list-style: none;
    line-height: 1.2;
    text-wrap: balance;

    &:not(:last-child) {
      margin-bottom: 1rem;
    }
  }
  
  ul li::before {
    content: '';
    position: absolute;
    left: -1em;
    top: 0.48em;
    width: 0.4em;
    height: 0.4em;
    background: var(--c-light-purple);
    transform: rotate(45deg);
  }
}

#languageMenu-button {
  background: white;
  box-shadow: 0px 4px 14px white;
}


/* START: Email Invitation Style */
html,
body,
.ui-widget,
input{
  /*
  'Barlow Condensed' = For latin letters like German, English, etc... (Original Font from Invitation)
  'PT Sans Narrow' = For krilic letters like Russia, etc... 
  */
  font-family: 'Barlow Condensed', 'PT Sans Narrow', sans-serif; 
  font-size: 20px;
  font-weight: 350;
}
/* END: Email Invitation Style */ 

  body {
    /* background-image: linear-gradient(#f4efdf, #e5d9c3); */
    /* color: #243c7c; */
    background: white;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: 10px;
    overflow-x: hidden;
  }

form .row{
    margin-top: 1rem;
}
label{
    font-weight: bold;
}

option.avatar {
    background-repeat: no-repeat !important;
    padding-left: 30px;
  }
  .avatar .ui-icon-custom {
    background-position: left top;
  }
  .ui-icon-custom {
      width: 24px;
      height: 24px;
  }

  .ui-icon-custom{
    display: inline-block;
    vertical-align: middle;
    margin-top: -.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
  }

  .ui-menu .ui-icon-custom {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .4em;
    margin: auto 0;
}

.imageWrapper {
  position: relative;

  margin-block: 45px 30px;

  #fg-image {
    border-radius: 2px;
  }

  #bg-image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    filter: blur(30px) brightness(1.2);
    scale: 0.99;

    animation: pulse 2s infinite alternate;

    transition: transform 1.5s ease-out;

    @starting-style {
      transform: scale(0.85);
    }
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: -1;
    transform: translateY(100%);
    background: white;
  }
}

/* Show correct banner (different banners posible for various languages) */ 
#app [class*="lang-only-"]{
  display: none;
}
#app.lang-de [class*="lang-only-de"],
#app.lang-en [class*="lang-only-en"],
#app.lang-es [class*="lang-only-es"],
#app.lang-fr [class*="lang-only-fr"],
#app.lang-nl [class*="lang-only-nl"],
#app.lang-ru [class*="lang-only-ru"],
#app.lang-ro [class*="lang-only-ro"]{
  display: block;
}