.register-option-modal
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 25px;
    border-radius: 8px;
}
.register-img-container
{
    width: 150px;
    height: 150px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.register-option-modal img
{
    width: 100%;
    object-fit: cover;
    background: white;
    transition: 0.3s ease-in;
}
.register-option-modal .bussiness-img
{
    height: 125px;
    object-fit: scale-down;
    background: white;
}
.register-options-container
{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    
}

.register-options-container .register-content-container
{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
    border: 1px solid lightgray;
    transition: 0.3s ease-in;
    width: 300px;
}

.register-options-container .register-content-container:hover > h3,
.register-options-container .register-content-container:hover > div img,
.register-options-container .register-content-container:hover > button
{
    cursor: pointer;
    transform: scale(1.05);

}
.register-content h2
{
    border-bottom: 1px solid lightgray;
    margin-bottom: 25px;
}
.register-option-modal h1
{
    width: 100%;
    text-align: center;
    border-bottom: 1px solid lightgray;
}

  

.sign-up-options
{
    height: min-content;
    padding-top:25px;
    width:100%;
    color: var(--primaryThree);
    margin-bottom: 25px 0;
}
.reg-btn-option
{
    border: none;
    outline: none;
    padding: 10px 20px;
    background:none;
    color: var(--lighGrey);
    cursor: pointer;
    font-size: 1.5em;
    font-weight: lighter;
    margin-bottom:25px;
  }
  
  /* Style the active class (and buttons on mouse-over) */
  .reg-active, .reg-btn:hover {
    color: var(--primaryTwo);
    text-decoration: underline;
  }


  #personalRegForm,
  #businessRegForm,
  #npo-reg-form
  {
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-items: center;
      width:100%;
      max-width:600px;
  }

.register-content
{
    display:grid;
    height: min-content;
    background:white;
    border-radius: 20px;
    grid-template-columns: repeat(2,minmax(min-content, max-content));
    grid-auto-rows: auto;
    box-sizing: border-box;
    box-shadow: var(--dropshadow);
}
.reg-info-container
{
    width:100%;
    /* max-width: 500px; */
    display:grid;
    column-gap: 25px;
    height: min-content;
    /* background:white; */
    grid-template-columns: repeat(2,minmax(100px, 1fr));
    grid-auto-rows: auto;
    box-sizing: border-box;
    align-self: center;
    justify-self: center;
}

#npo-reg-form .error-container
{
    width:100%;
    margin-top: 0;
}
#npo-reg-form .error-container alert-box-red
{
    padding: 0 10px;

}
.register-panel-container
{
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: center;
    text-align: center;
    margin:25px 0px;
    padding: 0 25px;
    transition: 0.3s ease-in-out;
}



.registerImgContainer
{
  /* margin:50px 0; */
  /* padding-right: 10px; */
  width:100%;
  max-width:500px;
  height: auto;
  display: flex;
  justify-self: center; 
  align-items: center;
  border-right: medium solid rgb(235, 235, 235);
  box-sizing: border-box;
  transition: 0.3s;
  
}

.registerImgContainer img
{
  width:100%;
}
.referral-code-container
{
    width:100%;
    max-width: 500px;
    text-align: center;
    letter-spacing: 1.5px;;
    margin-top:25px;
}

.referal-notice
{
    width:100%;
    margin: 10px 0;
    border:none;
    font-size: 0.8em;
    box-sizing: border-box;
    color: var(--primaryThree);
}

.sign-up
{
    background-color: var(--primaryThree);
    width:125px;
    align-self: center;
}

/* Googel and facebook fontawesome */
.fa
{
    border-right: thin solid rgb(255, 255, 255);
    position:relative;
    padding:0 10px;
    float:left;
    right: 20px;
    margin-left: 5px;
    font-size: 1.6em;
}

.tcbox
{
    margin-top: 25px;
    margin-right:25px;
    width:25px;
    height:25px;
    background:white;
    border-radius: 10px;
}
.tcbox-text
{
    position:relative;
    top: -8px;
    height:25px;
    
}
.got-to-login
{
    margin-top: 25px;
    color: var(--primaryTwo);
    font-size: 0.9em;
    cursor: pointer;
}
.got-to-login span
{
    text-decoration: none;
    color: var(--primaryTwo);
    font-weight: bold;
    transition: var(--btnTransitionSpeed);
}
.got-to-login span:hover
{
    font-size: 1.5em;
}

.or
{
    margin-top: 25px;
    width: 100%;
}

.or hr {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: thin solid var(--lightGrey);
    color: var(--lightGrey);
    text-align: center;
    align-self: center;
}
.or hr:after {
    content: "or";
    display: inline-block;
    position: relative;
    top: -1em;
    font-size: 0.8em;
    padding: 0 0.25em;
    background: white;
}

@media screen and (max-width: 1000px) {
    .register-options-container
    {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
        
    }
    .register-options-container .register-img-container
    {
        display:none;
    }
}
@media screen and (max-width: 850px) {
    .registerImgContainer {
        display: none;
    }


    .register-content {
        grid-template-columns: 100%;
    }
}
@media screen and (max-width: 450px) 
{
    .referral-code-container p 
    {
        font-size: 0.7em;
    }

    .org-contact-person-info
    {
        display:flex;
        flex-direction: column-reverse;
    }
    .reg-btn-option-container
    {
        width:100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .reg-btn-option
    {
        padding: 5px 2px;
        font-size: 1.2em;
        margin:10px 0;
    }
    .sign-up-options h3
    {
        font-size: 1em;
        width:100%;
        min-width: 200px;;
    }
    .register-content
    {
        width:100%;
        height: auto;
        border-radius: 0;
        margin-bottom: 50px;
        box-shadow: none;
    }

    .reg-info-container
    {
        grid-template-columns: 100%;
    }
}