body
{
    vertical-align:middle;
    height:100%;
    font-size:14px;
}

#main {
    width: 100%;
    clear: both;
    float: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

html { 

  height:100%;
}



form input[type='password']#passWord,
form input[type='text']#userName,
form input[type='text']#userCode,
form input[type='password']#passWord2,
form input[type='password']#passWord1
{
    margin-left:0px;
    width:100%;
    box-sizing:border-box;
    margin-top:10px;
    padding-top:8px;
    padding-bottom:8px;
    height:40px;
    margin-bottom:5px;
    font-size:16px;
    border: solid 2px #CCCCCC;
    border-radius: 2px;
    padding-left:10px;
    
}

body.login #main 
{
    height:100%;
    width:100%;
    display:table;
    
    
}





#main #contentlogin
{
    background-color:White;
    
    border:none;
    border-radius:12px;
         
        padding-top: 20px;
        padding-bottom: 40px;
        padding-left:50px;
        padding-right:50px;
        max-width:500px;
        min-width:320px;
    margin: auto;
    width:100%;
    box-sizing:border-box;
}




span.validation,div.validation
{
    color:Red;
}

span#txtUN
{
    padding-top:8px;
    padding-bottom:8px;
    display:inline-block;
}

div.validation
{
    min-height:30px;
}

div#wachtwoordVergeten
{
    padding-bottom:10px;
}

span#txtUN
{
    font-size:16px;
}




.text-label {
	color: rgb(102, 102, 102);
	font-weight: bold;
}


@media screen and (max-width: 550px)  
{
 
    #main #contentlogin
    {
        position:fixed;
        width:100%;
        max-width:100%;
        height:100%;
        top:0px;
        left:0px;
        border-radius:0px;
        border:0px;
    }
}

/* 30/09/2021*/

span#loginTitle {
    font-family: Poppins, Helvetica, "sans-serif";
    color: #181C32;
    font-size: 1.8em;
    font-weight: 600 ;
    margin-top:35px;
    margin-bottom: 25px;
    display: block;
}


span#loginMessage {
    font-family: Poppins, Helvetica, "sans-serif";
    color: #181C32;
    font-size: 1.3em;
    margin-top: 30px;
    margin-bottom: 20px;
    display: block;
    font-weight:500;
}



form input[type='text']#userCode {
    background-color: #EBEDF3;
    border-color: #EBEDF3;
    color: #3F4254;
    box-shadow: none;
    border-radius: 0.85rem;
    padding: 1.5rem;
    margin-bottom:10px;
    font-size:20px;
}



    form input[type='text']#userCode:focus-visible {
        outline: none;
    }





input[type='submit'] {
    background-color: rgb(236, 112, 38);
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid rgb(236, 112, 38);
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 40px;
    cursor: pointer;
    min-width: 40px;
    box-shadow: none;
    letter-spacing:0.9px;
}

    input[type='submit']:hover {
        background: white;
        color: rgb(236, 112, 38);
    }


body.login #main #wrapme {
    display: block;
  
    margin-top:10vh;
}