* { margin: 0; }    
 
 
 html, body
{
    height: 100%;
    background-color: #fff;
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color:#333; 
}

.content
{
    text-align: center;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin: 20px auto ; /* bottom the bottom margin is the negative value of the footer's height */
    background-color: white;
    border: 3px solid #4C12A1;
    padding-bottom:85px;
    
   
}

.contentB2C {
    text-align: left;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin: 20px auto; /* bottom the bottom margin is the negative value of the footer's height */
    background-color: white;
    border: 3px solid #4C12A1;
    padding-bottom: 15px;
}

.contentB2CHeader {
    font-weight:800;

}
@media only screen and (max-device-width: 700px) {
    /* define mobile specific styles come here */

    html, body {
        font-size: xx-large;
    }

    .content {
        width: 90%;
        border: 10px solid #4C12A1;
    }

    .loginWrapper {
        width: 100% !important;
        margin: 0 auto !important;
    }

    .validationText {
        font-size: large;
    }

    .centerBlockWidth {
        width: 90%;
        margin-left: unset;
    }
  
    .loginBox {
        width: 100%;
        border:0px solid white !important;
    }

    .login {
        font-size: inherit;
    }

    .welcomeTitle {
        font-size: inherit !important;
    }
    
    .text {
        font-size: inherit;
    }

    .button {
        font-size: inherit;
        width: unset !important;
        padding: 20px 20px;
        width: 250px !important;
    }

    .buttonReset {
        display:none !important;
    }

    .buttoMFA {
        font-size: inherit;
        width: unset !important;
        padding: 20px 20px;
        width: 250px !important;
    }

    .centerBlock, .centerBlockWidth, .smallNote {
        font-size: large !important;
        
    }

    a {
    
        font-size:inherit;
    }

    .buttonTd {
        padding:50px 0;
       
    }

    .textboxEntry {
        height:40px;
        font-size:36px;
    
    }

    #supportMessage {
        font-size:medium !important;
        width:unset;
       
    }
    .supportMessage2 {
        padding:50px 0;
        font-size:medium !important;
    }
        

    .textboxTable {
        width:95% !important;
    }


    
}


















.button, .buttonReset {
    width:70px;
}

.welcomeTitle
{
    font-size:18px;
    text-align:center;  
    padding-bottom:20px; 
    letter-spacing:0.09em;
    font-family:'Franklin Gothic Demi' , Tahoma, Sans-Serif;
}

.welcomeMessage
{
    width:480px;
    text-align:center;
    padding: 20px 0px;    
}

.loginImage
{
    padding-top:75px;
    padding-bottom:20px;
    text-align:center;   
}

.loginBoxContent
{
    text-align:center;    
}

.loginBoxContentB2C {
    text-align: left !important;
    padding-bottom: 15px;
}

.loginBox
{
    border:1px solid #777;     
    padding:15px;
    display:block;
    text-align:center;
            
}

.loginB2CBox {
    padding: 15px;
    display: block;
    text-align: left;
}

.loginWrapper
{
    width:450px;
    padding:0;
    margin:auto;
    margin-left:25%;  
    display:block; 
}

.loginB2CWrapper {
    width: 600px;
    padding: 0;
    margin: auto;
    margin-left: 15%;
    display: block;
}
.validationText {
    color: #900;
    font-size: 12px;
    text-align: center;
}
a   {color: #2A5DB0;}
        
.centerBlock, .centerBlockWidth
{
    text-align:center;
    display:block;
    padding:10px 0;       
}

.centerBlockWidth
{
    width:450px;  
    margin-left:25%;  
    margin: auto; 
}

.smallNote
{ 
    font-weight:normal; font-size:12px;
}

a.tsp{ border:1px solid white;}
a.tsp:hover{border:1px solid blue;}
#RedirectPanel
{
text-align:center;
font-size:18px
}