.signup-header{
  display: flex;
  justify-content: center;
}

.registration-page {
    display: flex;
    justify-content: center;
    margin-left: 15%;
}

.registration-ui-left{
    display: block;
    width: 40%;
    padding: 2%;
}

.registration-ui-left p {
    margin-top: 5%;
}

.registration-ui-right{
    width: 60%;
    padding: 2%;
}

.registration-img img{
    width: 100%;
}

.op-btn{
    background-color: #f87228;
    color: white;
    font-weight: 500;
}

.btn1 {
  margin-left: 1%;
}


.registration-form input[type=text], .registration-form input[type=email], .registration-form input[type=password], .registration-form input[type=number]{
  width: 50%;
  margin: 1%;
}

.registration-form p{
  margin-top: 5%;
}

.registration-form button{
  width:12%;
}

.registration-form select{
  height: 46px;
  width: 50%;
  margin: 1%;
}

.registration-form textarea{
  height: 95px;
  width: 50%;
  margin: 1%;
}

.crm-dropdown{
  display: flex;
}

.multiselect[type=button]{
  text-align: left;
  height: 46px;
}

#message {
    display:none;
    position: absolute;
    background: #f1f1f1;
    color: #000;
    /* position: relative; */
    padding: 20px;
    margin-top: 10px;
    margin-left:26%;
  }

  #message::before{
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right:15px solid #f00;
  }

  #message p {
    padding: 5px;
    font-size: 11px;
    margin: 0;
  }

  /* Add a green text color and a checkmark when the requirements are right */
  .valid {
    color: green;
  }

  .valid:before {
    position: relative;
    left: -15px;
    content: "✔";
  }

  /* Add a red text color and an "x" icon when the requirements are wrong */
  .invalid {
    color: red;
  }

  .invalid:before {
    position: relative;
    left: -15px;
    content: "✖";
  }

.thankyou-text {
  font-size: 16px;
  color: #777;
}

.thankyou-text ul{
  list-style-type:none;
  padding-left: 10px;
}

.thankyou-text ul li{
  margin: 5px 0;
}