/** onboarding (Niva), Signup, login

**/

html{
  background-color: #000;
}

input:focus, textarea:focus:not(.tt-input:focus){
  outline:none !important; 
  border:#C567D7 1px solid !important; 
  box-shadow: none !important;
}

input, textarea{border-radius : 8px !important;  box-shadow: none !important;}

input.tt-input{
  border:none !important; 
}

span.filter-option {
  color: #666;
}

#onboarding {
  background: url(../images/bg-onboard.png) center center / cover no-repeat;
  background-size: cover;
  height: 100%;
  min-height: 100vh;
  position: relative;
  font-family: 'Syne', sans-serif, Arial, Helvetica, sans-serif;
}

#onboarding-container {
  -webkit-box-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  height: auto;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

#onboarding-container #setPassword,
#login,
#forgotPassword,
#signup,
#unsub {
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 50%) 0px 0px 34px 0px;
  padding: 15px 30px 25px;
  width: 450px;
  box-sizing: border-box;
  flex: 0 1 auto;
  background: #FFF;
}

#unsub{
  text-align: center;
}

#unsub img{
  margin-left: auto;
  margin-right: auto;
}

.onboard{
  padding-top: 30px !important;
  padding-bottom: 65px !important;
  margin-top: 50px;
}

#login,
#forgotPassword,
#signup {
  padding: 15px 40px 35px;
}

.signupGDPR.form-group {
  padding: 0;
}


#onboarding-container #setPassword input,
#login input,
#forgotPassword input,
#signup input {
  height: 45px;
}

#password-strength {
  margin: 10px 0px 0px;
  padding: 0px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  position: relative;
}

#setPassword .box,
#passwordInput .box {
  position: relative;
  width: 25%;
  height: 25px;
  display: inline-block;
  background-color: #e4e4e4;
  text-align: center;
}

#setPassword .box div.bar-text,
#passwordInput .box div.bar-text {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  font-size: 13px;
  z-index: 3;
  line-height: 25px;
}

#setPassword .box div.bar,
#passwordInput .box div.bar {
  position: absolute;
  width: 0%;
  height: 100%;
  z-index: 2;
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}

#setPassword .weak .box.box1 div.bar,
#passwordInput .weak .box.box1 div.bar {
  background: #c2f1f0;
  width: 100%;
}

.box.box1,
#setPassword .box.box1 div.bar,
#passwordInput .box.box1 div.bar {
  border-radius: 5px 0px 0px 5px;
}

.box.box4,
#setPassword .box.box4 div.bar,
#passwordInput .box.box4 div.bar {
  border-radius: 0px 5px 5px 0px;
}

#setPassword .weak .box.box1 div.bar-text,
#setPassword .medium .box.box1 div.bar-text,
#setPassword .strong .box.box1 div.bar-text,
#setPassword .vstrong .box.box1 div.bar-text,
#passwordInput .weak .box.box1 div.bar-text,
#passwordInput .medium .box.box1 div.bar-text,
#passwordInput .strong .box.box1 div.bar-text,
#passwordInput .vstrong .box.box1 div.bar-text {
  color: #000;
  font-weight: bold;
  ;
}

#setPassword .medium .box.box1 div.bar,
#passwordInput .medium .box.box1 div.bar {
  background: #7ee3e3;
  width: 100%;
}

#setPassword .medium .box.box2 div.bar,
#passwordInput .medium .box.box2 div.bar {
  background: #7ee3e3;
  width: 100%;
}

#setPassword .strong .box.box1 div.bar,
#passwordInput .strong .box.box1 div.bar {
  background: #07d6d3;
  width: 100%;
}

#setPassword .strong .box.box2 div.bar,
#passwordInput .strong .box.box2 div.bar {
  background: #07d6d3;
  width: 100%;
}

#setPassword .strong .box.box3 div.bar,
#passwordInput .strong .box.box3 div.bar {
  background: #07d6d3;
  width: 100%;
}

#setPassword .vstrong .box.box1 div.bar,
#passwordInput .vstrong .box.box1 div.bar {
  background: #00b7b5;
  width: 100%;
}

#setPassword .vstrong .box.box2 div.bar,
#passwordInput .vstrong .box.box2 div.bar {
  background: #00b7b5;
  width: 100%;
}

#setPassword .vstrong .box.box3 div.bar,
#passwordInput .vstrong .box.box3 div.bar {
  background: #00b7b5;
  width: 100%;
}

#setPassword .vstrong .box.box4 div.bar,
#passwordInput .vstrong .box.box4 div.bar {
  background: #00b7b5;
  width: 100%;
}

#setPassword button,
#login button,
#fp_submit,
#passwordInput button,
#login button,
#fp_submit button,
#signup button {
  height: 50px;
  font-size: 16px;
}


.role button, .step1Role button, .companySize button, .eventsEachYear button, .jobTitle button, .venueCapacity button {
  font-size: 14px !important;
  height: 45px !important;
}

.eventsEachYear button {
  font-size: 13px !important;
}

.role button[title="Role"] {
  color: rgb(153, 153, 153) !important;
}

.role button[title="Role"]::before {
  content: "*";
  color: rgb(255, 127, 120);
  margin-top: 14px;
  margin-right: 238px;
}

.input-group{
  width: 100%;
}

.has-float-label .form-control:placeholder-shown:not(:focus)+*{
  top: 1.1em;
}

#passwordInput .input-group .input-group-addon,
#login .input-group .input-group-addon,
#forgotPassword .input-group .input-group-addon,
#signup .input-group .input-group-addon {
  background: #FFF;
}

#onboarding-container .fa-light,
#onboarding-container .fa-solid,
#onboarding-container .fa-regular {
  font-size: 18px;
}

.input-group .fa-light,
.input-group .fa-solid,
.input-group .fa-regular {
  background: #FFF;
  color: #C567D7;
}

.step-dot {
  width: 10px;
  height: 10px;
  background-color: rgb(238, 238, 238);
  border-radius: 50%;
  margin: 0px 5px;
  display: inline-block;
}

.step-dot-purple {
  background-color: rgb(197, 103, 215);
}

.fa-chevron-left {
  font-size: 12px !important;
}

.onboard .fa-light.fa-chevron-right
{
  color: #333;
}

#setPassword .fa-envelope {
  background: #EEE;
  color: inherit;
}

.form-group {
  position: relative;
}

.form-group input, .bootstrap-tagsinput {
  border-radius:12px !important;
}

.palceholder {
  position: absolute;
  top: 14px;
  left: 55px;
  color: #B1B1B1;
  display: none;
  z-index: 10;
}

label {
  font-weight: normal;
  color: rgb(153, 153, 153);
}

.star {
  color: rgb(255, 127, 120);
}

.form-group {
  padding: 0 15px;
}

#errorContainer {
  width: 450px;
}

.dot {
  margin: 3px;
}

#onboardFooter {
  margin-top: 20px;
  color: #CCC;
  font-size: 12px;
  text-align: center;
}

#onboardFooter a {
  color: #CCC !important;
  text-decoration: underline !important;
}

#onboardFooter a:hover {
  color: #e2e2e2 !important;
}

span.heading {
  font-size: 24px;
}

h1.heading{
  font-weight: 400;
}

.onboard h1.heading {
  margin-top:15px;
  font-size:24px;
}

img.headingImg {
  margin-top: 16px;
  margin-bottom: 20px;
}

#forgotPassword .heading {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 15px;
}

.forgotPassword {
  margin-top: 20px;
  text-align: right;

}

#havePromoCode {
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
}

.continue {
  padding: 0 0 15px;
}

.eye {
  width: 30px;
  position: absolute;
  z-index: 100;
  margin: -37px -40px;
  cursor: pointer;
  fill: currentColor;
}

.eye path {
  color: #707070;
}

.eye:hover path {
  color: #A2A2A2;
}

input.agree {
  height: inherit !important;
}

.agreeUpdatesOffers {
  color: inherit;
  margin-left: 5px;
  display: inline;
}

.dontHave {
  font-weight: 500;
  color: rgb(66, 66, 66);
}

.inputError {
  border: solid 1px #FF7F78;
}

.inputGroupErr{
  background:  #FF7F78 !important;
  border: solid 1px #FF7F78;  
}

.inputGroupErr .fa-light, .inputGroupErr .fa-solid{
  color: #FFF !important;
  background:  #FF7F78 !important;
}

.artistList, .venueList, .festivalList, .text-wrap textarea{
  min-height: 45px !important;
  border-radius: 0 5px 5px 0 !important;
  padding: 0 10px;
  font-size: 14px !important;
}

.has-float-label label, .has-float-label>span{
  opacity: 1 !important;
}

.btn.dropdown-toggle.btn-default{
  border-radius: 12px;;
}
.artistList::placeholder, .venueList::placeholder, .festivalList::placeholder{
  padding: 12px 5px;
  color: rgb(153, 153, 153);
}

.text-core .text-wrap .text-tags .text-tag .text-button{
  font-size: 14px !important;
}

.text-core .text-wrap .text-tags .text-tag{
  padding: 3px !important;
}

.text-dropdown{
  font-size: 14px !important;
}

.text-dropdown{
  z-index: 1000 !important;
}

.tt-selectable:hover{
  background: #C567D7 !important; 
}

.tt-menu{
  margin-left: -5px;
}

.tt-input{
  width: 100% !important;
  height: 15px !important;
  min-height: 2.9rem !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
}

span.tag.label.label-info{
  margin-top: 8px !important;
}

.bootstrap-tagsinput{
  padding: 0 7px !important;
}

.tag.label{
  display: block;
  float: left;
}
.twitter-typeahead{
  width: 35% !important;
}

.userRole{
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
  font-size: 20px;
  margin: 15px 0 0;
}

.userRole:hover, .userRole a:hover{
  border-color: #C567D7 !important;
  background-color: #C567D7;
  color: #FFF !important;
  cursor: pointer;
}

a:hover>.userRole>div>i{
  color: #FFF !important;
}

.userRole a:focus:not(.userRole a:hover){
  color: #333 !important;
}

.userRole:hover a:focus:not(.userRole a:hover){
  color: #FFF !important;
}

.row.nomarg{
  margin-right: 0;
  margin-left: 0;
}

.padl15{
  padding-left: 10px;
}

a>.userRole{
  color: #000;
}