/* google fonts */
/*
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Slab', serif;
*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300|Roboto+Slab:700&display=swap');



/* base styles */
* {
	box-sizing: border-box;
}
body {
  min-height: 100vh;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #fff;
  background: #000;
}




main {
  min-height: 100vh;
  padding: 1rem;
  color: #fff;
  background: #000;
  
  font-size: 2.0em;
  line-height: 1.5em;
  text-align: center;
  
  /* using flexbox for vertical centering */
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  transition: 
		all 0.150s ease-out 0.05s;
}
main.bg-red {
  background: #CC0000;
}
main.bg-orange {
  background: #EF6800;
}
main.bg-yellow {
  color: #3A384C;
  background: #FFD400;
}
main.bg-yellow .nl-select-render {
  border-color: rgba(58,56,76,0.32);
}
main.bg-green {
  background: #3FB400;
}
main.bg-blue {
  background: #006DB4;
}
main.bg-violet {
  background: #72129C;
}
main.bg-white {
  color: #3A384C;
  background: #fff;
}
main.bg-white .nl-select-render {
  border-color: rgba(58,56,76,0.32);
}
main.bg-black {
  background: #000;
}
main.bg-brown {
  background: #753E1B;
}


.nl-wrapper {
  max-width: 40.000rem;
}
.nl-wrapper > * {
  font-size: 0;
}
.nl-wrapper span {
  opacity: 0.64;
  
  font-size: 2.0rem;
}

.nl-wrapper .nl-select {
  opacity: 1.00;
  
  position: relative;
  overflow: hidden;
}

.nl-select select {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  
  width: 100%;
  
  opacity: 0.001;
}

.nl-select-render {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  
  white-space: nowrap;
  
  border-bottom: 2px solid rgba(255,255,255,0.32);
}

/* select arrow */
.nl-select-render:after {
  display: inline-block;
  /*font-family: 'Entypo';
  content: "\e760";*/
  font-family: 'Material Symbols Outlined';
  content: "\e5cf";
  
  font-size: 0.500em;
  
  position: relative;
  top: -0.375rem;
  
  padding-left: 0.500rem;
  padding-right: 0.250rem;
  
}