/*!
 * Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
 :root,
 :host {
   --fa-style-family-classic: 'Font Awesome 6 Free';
   --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
 }
 
 @font-face {
   font-family: 'Font Awesome 6 Free';
   font-style: normal;
   font-weight: 900;
   font-display: block;
   src: url("./fonts/webfonts/fa-solid-900.woff2") format("woff2"), url("./fonts/webfonts/fa-solid-900.ttf") format("truetype");
 }
 
 .fas,
 .fa-solid {
   font-weight: 900;
 }
 
 /* maven-pro-regular - latin-ext_latin */
 @font-face {
   font-family: 'Maven Pro';
   font-style: normal;
   font-weight: 200;
   src: url('./fonts/maven-pro-v32-latin-ext_latin-regular.eot');
   /* IE9 Compat Modes */
   src: local(''),
     url('./fonts/maven-pro-v32-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
     url('./fonts/maven-pro-v32-latin-ext_latin-regular.woff2') format('woff2'),
     /* Super Modern Browsers */
     url('./fonts/maven-pro-v32-latin-ext_latin-regular.woff') format('woff'),
     /* Modern Browsers */
     url('./fonts/maven-pro-v32-latin-ext_latin-regular.ttf') format('truetype'),
     /* Safari, Android, iOS */
     url('./fonts/maven-pro-v32-latin-ext_latin-regular.svg#MavenPro') format('svg');
   /* Legacy iOS */
 }

body {
    font-family: Maven Pro, Verdana, Geneva, Tahoma, sans-serif;
}

.background {
    background-image: url(./images/siddharth-verma-MpbhFhl0zi4-unsplash\ \(1\).jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: hidden;
}

#settings {
    /* background: rgba(255, 255, 255, 0.8);*/
    padding: 2%;
    width:fit-content;
    max-width: 95vw;
    height: max-content;
    display: block;
    /* position:absolute;
    top:10vh;
    left:5vh; */
    line-height: 2em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.item-content {
    height: 100%;
    border: 4px solid rgba(2, 9, 24, 0.8);
    border-radius: 4px;
    color: rgb(88, 106, 143);
    /* line-height: 140px; */
    /* padding-left: 32px; */
    /* font-size: 24px; */
    font-weight: 200;
    background-color:rgba(2, 9, 24, 0.89);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
  
    text-align:center;
    margin: auto;
  
    -webkit-transition: background-color 0.5s ease-out;
      -moz-transition: background-color 0.5s ease-out;
      -o-transition: background-color 0.5s ease-out;
      transition: background-color 0.5s ease-out;
  }

#codeselector {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

select {
  border: 1px dotted;
}

.selector {
    width: 40px;
    border-radius: 4px;
    font: inherit;
    text-align: center;
    line-height: 1.5em;
    padding: 0.2em 0.1em 0.2em 0.1em;
  
    /* reset */
  
    margin: 0;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.mandatory {
    background-color: rgb(88, 106, 143, 0.8);
    border: 1px solid rgba(2, 9, 24, 0.8);
    color: rgba(2, 9, 24, 0.8);
}

.optional {
    background-color: rgba(2, 9, 24, 0.8);
    border: 1px dotted, rgb(88, 106, 143, 0.8) !important;
    color: rgb(88, 106, 143, 0.8);
}

  #example {
    width:  5px;
    height: 5px;
    position:absolute;
    top:48%;
    right:15vw;
    border-radius: 10px;
    opacity: 0;
    filter: blur(2px);
    display:none;
    visibility: hidden;
  }

  #show {
    display:inline-block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    text-align:center;
    background: black;
    margin: 30px 0;
    /* disable auto text-selection on mobiles */
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #show-light {
    display:block;
    min-width: 60px;
    width: 60px !important;
    min-height: 60px;
    height: 60px;
    border-radius: 30px;
    filter: blur(2px);

    /* disable auto text-selection on mobiles */
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .white    { background-color: white; }
  .red      { background-color: red; }
  .green    { background-color: green; }
  .yellow   { background-color: yellow; }
  .black    { background-color: black; }

#code, #description {
  color: rgb(88, 106, 143);
}

#impressum {
    /* background: rgb(22, 40, 78);*/
    color: rgb(88, 106, 143);
    width: 100%;
    font-size: 0.7em;
    line-height: 1.1em;
    padding: 10px;
}

#info {
    color: rgb(88, 106, 143); 
    font-size: 0.7em;
    line-height: 1em;
    padding: 10px;  
    margin-top:10px;
    text-align:left;
    width:fit-content;
    max-width: 95vw;
    height: max-content;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%, 0%);
}

#impressum a, #info a {
    color: rgb(88, 106, 143);
}

.icons {
    font-size: 2.5em;
    line-height: 2.5em;
    padding: 0 0.5em;
}

.visible {
  visibility: hidden;
}