@font-face {
    font-family: openSans;
    src: url(../resource/fonts/OpenSans-Regular.ttf);
  }
@font-face {
  font-family: openSans-Bold;
  src: url(../resource/fonts/opensans_bold.ttf);
}
@font-face {
  font-family: openSans-SemiBold;
  src: url(../resource/fonts/opensans_semibold.ttf);
}
  
  .modal_form{
    font-family: openSans;
  }
  /* The Modal (background) */
  .modal_form {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 8; /* Sit on top */
      padding-top: 5%;
      padding-bottom: 5%;
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
    /* Modal Content */
    .modal_form .modal-content {
      position: relative;
      background-color: white;
      color: rgba(61, 61, 61, 0.836);
      margin: auto;
      padding: 0;
      width: 75%;
      max-width: 400px;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      min-height: 400px;
      border-radius: 3px;
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s;
    }
    
    /* Add Animation */
    @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1}
    }
    
    @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    }
    
    .modal_form .modal-content .popHeader {
      min-height: 30px;
      font-size: 20px;
      padding-top: 15px;
      padding-left: 10px;
      margin-left: 10px;
      font-weight: 900;
      font-family: openSans-Bold;
  }
  .modal_form .modal-content .popHeader #popHeading {
    margin: 20px;
    text-align: center;
  }
  .modal_form .modal-content .popContent {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 30px;
    margin-left: 30px;
    color: rgba(51, 47, 47, 0.918)
  }
  .modal_form .modal-content .popContent input {
      border: 2px rgba(143, 143, 143, 0.6) solid;
      background-color: rgb(143, 143, 143,0.15);
      min-height: 35px;
      margin-bottom: 15px;
      border-radius: 5px;
      outline: none;
      color: rgba(61, 61, 61);
      font-size: 15px;
      width: 100%;
      padding: 5px;
  }
.formInputHolder {
    width: 100%;
    display: flex;
}
.modal-content button i {
  color: rgba(61, 61, 61, 0.5);
}
.formInputHolder i {
  color: rgba(61, 61, 61, 0.692);
}
.popFormBTN {
    text-align: center;
}
.popFormBTN .popBTN {
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 10px;
    min-height: 40px;
    min-width: 100%;
    border-radius: 5px;
    border: none;
    font-size: 100%;
    background-color:  #215dbee8;
    color: white;
    font-family: openSans-SemiBold;
    outline: none;
}
.popContent a {
  text-decoration: none;
  font-family: openSans-SemiBold;
  color: rgba(51, 47, 47, 0.918);
}
#registerBTN {
  min-width: 50%;
  margin-bottom: 30px;
}
#registerFormPOPBTN {
    color: rgba(61, 61, 61, 0.836);
    font-family: openSans-Bold;
    margin-bottom: 20px;
    min-height: 20px;
    min-width: 50%;
    cursor: pointer;
    background: transparent;
    border: none;
}
.popFormBTN .popBTN:hover {
  /*background-image: linear-gradient(to bottom right, #265cff , #4286f4);*/
  background-color:  #215dbe;
    
}
.modal_form .modal-content .popContent input::placeholder {
  color: rgba(61, 61, 61,0.6);
  font-family: openSans-Bold;
  }

#loginErrorHolder,#regErrorHolder {
    font-size: 70%;
    font-weight: 900;
    font-family: openSans;
    position: relative;
    display: none;
    color: rgb(221, 92, 92);
    text-align: center;

}
.transparentBTN {
  background: none;
  border: none;
  outline: none;
}
@media only screen and (max-width:950px) {
  .modal_form .modal-content {
    width: 500px;
    width: 90%;
  }
}