#register-content-container{
  background: #2B2B2B;
  display:  flex;
  width:  100%;
  height:  100%;
  justify-content: center;
  align-items: center;
}

body, html{
  width:  100%;
  height:  100%;
  margin:  0;
  justify-content: center;
  align-items: center;
  display:  flex;
}

.register-input-container{
  display:  flex;
  background: #ecf0f1;
  flex-direction: column;
  padding:  2em;
  width:  20%;
  -webkit-box-shadow: 0px 0px 51px 16px rgba(255,255,255,0.40);
  -moz-box-shadow: 0px 0px 51px 16px rgba(255,255,255,0.40);
  box-shadow: 0px 0px 51px 16px rgba(255,255,255,0.65);
}

.register-button-box-container{
  margin-top: 1em;
  display:  flex;
  flex-direction: row;
}

.register-input{
  border:  none;
  background:  none;
  border-bottom: 1px solid black;
  margin:  10px;
  font-size: 14px;
  padding:  7.5px;
  color:  black;
}

.register-select{
  color: black;
}

.register-select select {
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;
}

.register-msg-box-container{
  display:  flex;
  width:  50%;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size:  11px;
}

.register-button-container{
  display:  flex;
  width: 50%;
  justify-content: flex-end;
  align-items: center;
}

.register-button{
  background:  #27ae60;
  color:  white;
  padding:  5px;
  border:  0;
  cursor: pointer;
  width: 6em;
  height: 3em;
  font-size:  11px;
}

@media only screen and (max-width: 500px) {
  .register-input-container{
    width: 70%;
  }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
  .register-input-container{
    width: 50%;
  }

  .side-nav-open-nav-button-container{
    border:  2px solid black;
    background: rgba(00,00,00,0.82);
  }
}