*, *:before, *:after {
  box-sizing: border-box;
}

.Login{
  min-width: 550px; 
}

.Login div{
  width: 100%;
  }

label.LoginInput {
  display: inline-block;
  width: 25%; 
  font-size: 2.1rem;  
  }

input[type="text"].LoginInput, input[type="password"].LoginInput {
  display: inline-block;
  margin-left: 20px;
  width: calc(75% - 20px);   
}

.LoginBtn{  
  margin-top: 1rem !important;
  margin-bottom: 1rem;
  float: right;
}

.LoginError {
  clear: both;  
  border: 10px solid #A02C2C;
  background-color: #333333;
  padding: 16px;
}

.LoginError-titel {
  font-size: 1.25em;
  padding-bottom: 8px;
  margin: 0;  
  border-bottom: 1px solid #C8C8C8;  
}

.LoginError-head {
  padding: 8px 0;
  font-weight: bold;
  line-height: 20px;
}

.VPELogout {
background-color: darkgrey;
color: black;
text-align: center;
cursor: pointer;
}

/********************************************************/
fieldset.admin-fieldset{
  padding:20px; 
  border-style: solid;
  border-width: 1px;
  border-radius: 20px 3px 20px 3px;
}

fieldset.admin-fieldset fieldset{
  min-width: 250px;
  float: left;
  padding:5px 10px 5px 10px;
  margin: 5px; 
  border-width: 1px;
  border-radius: 20px 3px 20px 3px;
  border-style: solid;

}
fieldset.admin-fieldset fieldset input[type="text"]{
  float: right;
  border-radius: 20px 3px 20px 3px;
}

div.usergrid {
  display: grid; 
  grid-template-columns: 20px 30px 250px 250px 150px 150px 150px calc(100% - 20px - 30px - 250px - 250px - 150px - 150px - 150px - 500px - 40px) 500px; 
  grid-gap: 5px;
  margin-bottom: 8px;
}

div.NewUsergrid {
  display: grid;
  grid-template-columns:
  minmax(300px, calc(100% - 300px - 300px - 480px - 500px - 20px))
  minmax(300px, calc(100% - 300px - 300px - 480px - 500px - 20px))
  minmax(480px, calc(100% - 300px - 300px - 480px - 500px - 20px))
  minmax(max-content, calc(100% - 300px - 300px - 480px - 500px - 20px))
  minmax(500px, calc(100% - 300px - 300px - 480px - 500px - 20px));

  /*grid-template-columns: 300px 300px 480px calc(100% - 300px - 300px - 480px - 500px - 20px) 500px; */
  grid-gap: 5px;
  margin-bottom: 8px;
  min-width: 1020px;
}

div.NewUsergrid input[type="text"], input[type="email"] {
  display:block;
  width: 300px;
  border-radius: 20px 3px 20px 3px;
}

div.NewUsergrid label {
  display:block;
  margin-left: 20px;
}

div.NewUsergrid div.roles {
 width: 110px;
 margin: 0px 5px 0px 0px;
 float:left;
 text-align:center; 
}
div.NewUsergrid div.roles input[type="checkbox"]{
  margin-top: 20px;
}


.newInput {
  width: 250px;
  border-radius: 20px 3px 20px 3px;
}

div.gridhead{font-weight: bold; }

div.usergrid button.UserBtn, div.NewUsergrid button.UserBtn {
  float:right;
  width: 150px;
  background-color: darkorange;
  border-radius: 20px 3px 20px 3px;
  padding: 0px;
}

div.usergrid button.delUserBtn{
  float:right;
  width: 50px;
  background-color: darkorange;
  border-radius: 20px 3px 20px 3px;
  padding: 0px;
}



div.usergrid span.BtnMsg, div.Newusergrid span.BtnMsg{
  width: 300px;
  float:left;
}

div.RoleUsergrid {
  display: grid;
  grid-template-columns: 50px 300px 480px 110px calc(100% - 50px - 300px - 480px - 110px); 
  grid-gap: 5px;
  margin-bottom: 8px;
  min-width: 1020px;
}

div.RoleUsergrid div.roles {
  width: 110px;
  margin: 0px 5px 0px 0px;
  float:left;
  text-align:center; 
}
div.RoleUsergrid div.role_deactivated {
  width: 110px;
  margin: 0px 5px 0px 0px;
  float:left;
  text-align:center; 
}

div.NewPagegrid {
  display: grid;
  grid-template-columns: 250px calc(100% - 250px - 520px) 500px; 
  grid-gap: 5px;
  margin-bottom: 8px;
  min-width: 1020px;
}

div.NewPagegrid div.roles {
  width: 110px;
  margin: 0px 5px 0px 0px;
  float:left;
  text-align:center; 
}
div.NewPagegrid span.BtnMsg{
  width: 300px;
  float:left;
}

div.NewPagegrid button.PageBtn {
  float:right;
  width: 150px;
  background-color: darkorange;
  border-radius: 20px 3px 20px 3px;
  padding: 0px;
}

.newPage {
  width: 250px;
  border-radius: 20px 3px 20px 3px;
}


div.RolePagegrid {
  display: grid;
  grid-template-columns: 250px calc(100% - 250px - 520px) 500px; 
  grid-gap: 5px;
  margin-bottom: 8px;
  min-width: 1020px;
}

div.RolePagegrid div.roles {
  width: 110px;
  margin: 0px 5px 0px 0px;
  float:left;
  text-align:center; 
}