body {font-family:sans-serif;
      direction:rtl;
      background-color: rgba(39, 35, 35, 0.9098039215686274);
}

div#all{


}
div#TheOutput{
    text-align:center;
    display:none
}
textarea{
    width: 823px;
    height: 113px;
}

div label input {
    
   width:20%;
   text-align:center;
}

#ck-button {

    width: 12%;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    
    margin-left:auto;
    margin-right:auto;
   
}
#ck-button:hover {
    background:red;
}

#ck-button label {
   
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

.Shela {
  
  color: white;
  display:none;
  position:relative;
  background-color: #fefefe;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: 1px solid #888;
  width: 50%;
  height:15%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  background-color: rgba(0, 0, 0, 0.4588235294117647);

  
}
.textShela{
    
    text-align:center;
}
#melo{

    /*float:right;*/
   
}
#skip{
    margin-top:2px;
}
#shol{
 /*float:left;*/
}

.btncheck {
  display:inline;
  /*margin-top:4.54%;*/
  margin-left:4px;
  margin-right:4px;
  color:white;
  background: #2eabb3;
  border-color: #20797e #1f757a #195d62;
  background-image: -webkit-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: -moz-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: -o-linear-gradient(top, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
  background-image: linear-gradient(to bottom, #3dbdcd 0%, #33b2c7 50%, #2eabb3 50%, #1e9a99 100%);
}

.btncheck:before {
  background: #3fccd5;
  background-image: -webkit-linear-gradient(top, #249299, #4dd3dc);
  background-image: -moz-linear-gradient(top, #249299, #4dd3dc);
  background-image: -o-linear-gradient(top, #249299, #4dd3dc);
  background-image: linear-gradient(to bottom, #249299, #4dd3dc);
}

.btncheck:active {
  background: #33b9c7;
  background-image: -webkit-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: -moz-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: -o-linear-gradient(top, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
  background-image: linear-gradient(to bottom, #1d918f 0%, #31b2bf 60%, #33b9c7 100%);
}

.btncheck:active:after {
  border-color: #33b9c7;
}

#choosen {
    color: white;
  }
  .next.round{
    text-decoration: none;
    margin-right: 2%;
    padding: 8px 16px;
    float:right;

  }
  
  .next.round:hover {
    background-color: #ddd;
    color: black;
  }
  .next.round {
    background-color: black;
    color: white;
  }
  
  .next.round {
    border-radius: 50%;
  }

  .ui-select{width: 100%}
  /* This is to remove the arrow of select element in IE */
  select::-ms-expand {	display: none; }
  #gender{
    width: 30px;
      -webkit-appearance: none;
      appearance: none;
      background:none;
      padding-right: 3px;

      color: white;
      font-size: 16px;
  }
  #gender { 
    background-color: rgb(31, 29, 29);
}