#loginform
{

  width:50%;
  height:400px; background:white;
  border:1px solid rgba(0,0,0,0.1);
  box-shadow: 1px 1px 8px rgba(0,0,0,0.1);
  transform: translate(-50%,20%);
  left:50%;
  top:10%;
  position: relative;
  padding:1vw;
}

html, body, .container-fluid, #root {
    height: 100vh;
    overflow: hidden;
    background-color: #3498db!important;
    position: relative;
}
#root form[role=form] {
    width: 30%;
    height: max-content;
    position: relative;
    left: 50%;
    transform: translate(-50%,20vh);
    background: whitesmoke;
    text-align:center;
    padding:1vw;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


#root form[role=form]:before {
    content:url(https://riogenesis.com/images/v3/Rio_logo_Final1.png);
	width:100px;
}


#root form[role=form] label{
    display:block;
    margin:12px auto
}

#root form[role=form] label:before{
     content: attr(display)!important;
	display:block;
}

#root form[role=form] label input[type="text"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #9E9E9E;
    transition: 0.28s all ease-in;
}
#root form[role=form] label input[type="password"] {
    background: transparent;
    border: none;
     border-bottom: 1px solid #9E9E9E;
    transition: 0.28s all ease-in;
}

#root form[role=form] label input[type="password"]:focus
,#root form[role=form] label input[type="text"]:focus{
    border-bottom: 1px solid dodgerblue;
    outline:none;
}
/* img{
	height:auto!important
} */