* {
box-sizing: border-box;
}
body{
font-family:"Manrope",tahoma,arial,sans-serif;
font-size:15px;
color:#111; 
background:#f6f6f6;
margin:0;
padding:0;
line-height:1.45em;
text-align:left;	
}
html, body {
    height: 100%;
}
#app-generator{
overflow: hidden;
}
h1,h2,h3,h4,h5{
color: #232323;
}
a{
text-decoration:none;
color: #24b9d7;
font-weight:600;
}
a:hover{
color: #0088a4;
}
#header{
box-shadow: 0 2px 5px 0 rgba(0,0,0,.11);
color: #7a7a7a;
background:#fff;
z-index:100;
position:relative;
overflow:hidden;
}
.header-nav{
height:50px;
/*border-bottom:1px solid #f2f2f2;*/
padding: 5px;
}

.header-top{
height:88px;
border-bottom:1px solid #f6f6f6;
padding: 1.25rem 0;
}
.container{
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}


.page-login{
padding: 1rem;
background: #fff;
max-width:400px;
margin:50px auto;
text-align:center;
min-height:150px;
}
.page-register{
padding: 1rem;
background: #fff;
max-width:800px;
margin:50px auto;
min-height:150px;
}
.page-text-header{
padding: 1rem 2rem;
max-width:900px;
margin:50px auto;
min-height:150px;
}
.page-text{
padding: 1rem 2rem;
background: #fff;
max-width:900px;
margin:50px auto;
min-height:150px;
font-size: 105%;
}
.page-text h3{
font-size:130%;
}
.page-token-code{
padding: 1rem;
background: #fff;
max-width:500px;
margin:50px auto;
text-align:center;
min-height:150px;
}
.page-token-code form input{
float:none!important;
}
.nav-bar{
height:40px;

font-weight:600;
text-transform:uppercase;
}
.nav-bar:after {
content: '';
display: table;
clear: both;
}
.logo-home{
float:left;
display:block;
line-height:40px;
padding:0 10px 0 0;
}
.tokens-info{
float:left;
line-height:40px;
padding: 0 10px 0 0;
color:#111;
margin-right:10px;
font-weight: 700;
user-select: none;
}
a.tokens-button{
float:left;
display:block;
line-height:40px;
background:#24b9d7;
color:#fff;
padding: 0 12px;
margin-right:10px;
}
a.tokens-button:hover{
background-color: #1d93ab;
}
.icon-token{
display:inline-block;
background:url('/images/icon-token.png') 0 0 no-repeat;
width: 1.1em;
height: 1.1em;
background-size: contain;
margin-right:5px;
vertical-align: sub;
filter: grayscale(1);
}



a.logout-button{
float:right;
display:block;
line-height:40px;
padding: 0 10px;
font-weight: 800;
}
a.logout-button:hover{
}
a.shop-link{
float:left;
display:block;
line-height:40px;
padding: 0 10px;
	
}
a.home-link{
float:left;
display:block;
line-height:40px;
padding: 0 10px;
	
}
a.help-link{
float: right;
display: block;
line-height: 40px;
padding: 0 10px;
}
form register login{
display: table;
width:100%;
}
form.register.login label {
  width: 80px;
}
form.register label {
  height: 33px;
  line-height: 33px;
  font-weight: 700;
  display: block;
  float: left;
  width: 130px;
}
label {
  user-select: none;
}
form.register p {
  clear: both;
  padding: 10px 0;
}
form.register input[type="password"], form.register input[type="text"] {
  width: 250px;
  font-size: inherit;
  float: left;
}
input[type="password"], input[type="text"], input[type="date"], textarea, select {
padding: .5rem 1rem;
  color: #333;
  background: #f6f6f6;
  border: 1px solid rgba(0,0,0,.25);
  font-family: inherit;
}
input[type="password"]:focus, input[type="text"]:focus, textarea:focus{
	color: #232323;
  background-color: #fff;
  outline: .1875rem solid #24b9d7;
}
form.register input[type="submit"] {
  padding: 9px 17px;
  margin:10px auto;
}
input[type="submit"],input[type="button"]
 {
color: #fff;
background-color: #24b9d7;
color: #fff;
border: 0;
cursor: pointer;
margin: 3px 0;
padding: 5px 10px;
font-family: inherit;
font-size: 100%;
font-weight: 700;
text-transform:uppercase;
}
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
background-color: #1d93ab;
}
input[type="submit"]:active,
input[type="button"]:active {
background-color: #0c7186;
}
.formRegister-info {
float: left;
padding-left: 13px;
line-height: 33px;
}


.content-generator{
display:flex;
margin-top:20px;
height: calc(100vh - 50px);
}
.generator-set{
width:25%;
min-width: 380px;
}
.generator-type{
width:40%;
padding-left:30px;
}
.generator-type .section-field{
background:#fcfcfc;
box-shadow: 2px 2px 5px rgba(75, 75, 75, 0.04);
}
.generator-results{
width:35%;
}
.generator-column{
overflow-y: auto; 
scrollbar-width: thin;
}
.section-field{
padding:15px 20px;
min-height:200px;
margin:15px 10px; 
overflow:hidden;
}
.section-field h2
{
font-size:120%;
font-weight:700;
margin-top:0;
color:#111;
margin-bottom:20px;
text-transform:uppercase;
}

.generator-textarea{
width:100%;
height:400px;
resize: none;
font-size:120%;
color:#111;
font-family:inherit;
background-color:transparent!important;
border:0;
padding:0;
line-height: 1.5em;
outline:none!important;
scrollbar-width: thin;
padding-right:5px;
}
.section-buttons{
display:flex;
align-items: center;
margin:20px 0 0;
font-size: 105%;
}
.generator-button{
font-size:110%!important;
}
#generator-button:disabled{
background:#dbdbdb;;
}

.generator-button:focus:not(:hover){
	background-color: #24b9d7!important;
}
#generator-textarea-counter{
margin:3px 10px;
padding:5px 10px;
font-family:inherit;
font-size:110%;
font-weight:600;
text-transform: uppercase;
background:#eee;
color:#666;
}
#generator-textarea-loading{
visibility:hidden;
margin:3px 10px;
padding:5px 10px;
}
#generator-textarea-loading.active{
visibility:visible;
}
#generator-textarea-loading img{
height: 25px;
width:25px;
display: block;
}
#notification{
color: red;
font-weight: 600;
}
#list-items ul{
list-style:none;
margin:0;
padding:0;
}
#list-items ul li{
margin:20px 0;
}
.list-item-text{
background: #eee;
padding: 5px 12px 10px;
}
.list-item-header{
padding:10px 12px 0;
text-transform:uppercase;
font-weight: 600;
background: #eee;
}
#list-items li.new .list-item-header, 
#list-items li.new .list-item-text {
background-color: #ffe8bf;
}
.list-item-menu{
margin-top:5px;
display:flex;
flex-wrap: wrap;
}
.list-item-menu .button{
margin-right:5px;
user-select: none;
}
.list-item-menu .button a{
display: inline-block;
font-size: 100%;
padding: 3px 7px;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
}
.list-item-download a{
background: #444;
color: #fff;
}
.list-item-download a:hover{
color:#fff;
background:#222;
}
.list-item-play a{
background: #24b9d7;
color: #fff;
}
.list-item-play.active a{
background: #1d93ab;
}
.list-item-play a:hover{
background: #1d93ab;
color: #fff;
}
.list-item-play a:active{
background-color: #0c7186
}
.list-item-audio{
flex-basis: 100%;
width:100%;
}
.list-item-audio audio{
width:100%;
}
audio::-webkit-media-controls-panel {
background-color: #dfdfdf;
}

.voice-select{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
.voice-option{
margin:15px 0;
background: #eee;
cursor:pointer;
}
.voice-option:hover{
background: #e6e6e6;
}
.voice-option.active{
outline: 2px solid #24b9d7;
background: #daebf0;
}
.voice-option-container{
padding: 5px;
display:flex;
align-items: center;
overflow:hidden;
}
.voice-option-avatar{
width:90px;
}
.voice-option-avatar-image{
}
.voice-option-avatar-image img{
width:70px;
height:70px;
display:block;
opacity: 0.3;
}
.voice-option-text p{
margin: 0 0;
font-weight: 600;
}
.voice-option-text p .gender.female{
color: #e62b68;
}
.voice-option-text p .gender.male{
color: #346ad2;
}
.voice-option-player{
width: 80px;
max-width: 80px;
overflow: hidden;
margin-left: auto;
}
.voice-option-container h3{
margin:5px 0;
font-weight: 800;
}