:root {
  --gap_css: 10px;
}

#mainContent{

    padding:100px 0;
    /*padding:10% 0;*/

    display:flex;
    flex-direction:column;
    max-width: 400px;
    margin: auto;
    align-items: center;
    row-gap: 20px;
}

#TopLogo{
    max-height:200px;
}


.login-container {
    width: 100%;
    text-align:left;
    background: rgba(238,238,238, 0.95);
    padding: 2rem;
}

#memberLoginForm, .memberLoginForm{
  display:flex;
   flex-direction:column;
   justify-content: flex-start;
   row-gap: var(--gap_css);
}


#memberLoginForm div, .memberLoginForm div{
    display:flex;
   flex-direction:row;
   column-gap: var(--gap_css);
}

@media (max-width:550px)
{
    /*#topLogo {
      width: 100%;
    }*/
}

#btnLogin{
    flex-basis:30%;
    flex-grow: 1;
    flex-shrink: 1;
}

#btnRecover{
    flex-basis:70%;
    flex-grow: 1;
    flex-shrink: 1;
}

label{
    margin-bottom: unset;
    display: unset;
}


#poweredBy{
  color:#9b9b9b;
  font-size:12px;
  margin-bottom: -20px;
}

#registerRow{
  display: flex;    
  flex-direction: row;
  column-gap: var(--gap_css);
}

#registerRow a,
#registerRow button
{
  flex-basis: 30%;
  flex-grow: 1;
  flex-shrink: 1;
}