/*
***************************************************************
*
*
*    SMARTPHONES MUY PEQUEÑOS
*
*
***************************************************************
*/
@media only screen and (max-width: 512px)
{
        *{margin:0px; padding: 0px; }
        body{
            background: #f3f3f3 url(../images/login-bg-s.png) no-repeat;
            font-family: "Segoe UI";
            background-position: 50% 2px;
            background-attachment: fixed;
            position: absolute;
            width: 100%;
            height: 100%;
            }
        .error{
            color:red;
            text-align: center;
            height: 28px;
            display: block;
            text-shadow: 1px 1px 2px #fefffe;
            font-size: large;
            }
        #wrapper{
            width: 100%;
            min-width: 200px;
            height: 100%;
            position: absolute;
            }
        #wrapper-header{
            height: 35px;
            background: #f3f3f3;width: 100%;
            min-width: 200px;
            margin-bottom: 5px;
            -webkit-box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            -moz-box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            position: relative; z-index: 99;
        }
        #wrapper-header h1{
            font-size: 16px; font-weight: 400;padding: 1px 4px;color:#2e3b4e;
        }
        #wrapper-header h1 span{color: #e81123;}
        #wrapper-header .ePos{
            border: solid 1px #1c11e8;
            border-radius: 20px;
            border-radius: 20px;
            box-shadow: 2px 2px 3px 0 rgba(0,0,0,.6);
            float: left;
            height: 22px;
            margin-left: 5px;
            margin-top: 10px;
            padding: 0 8px 1px 8px;
            width: 89px;            
            position: absolute;
            bottom: 6px;
        }

        #wrapper-main{
        width: 100%;
        min-width: 200px;
        height: 90%;
        position: absolute;
        }


        button{height: 30px; width: 150px;}
        #keypad{width:60%; /*! height: 210px; */position: absolute;left: 20%;top: 0%;margin-left: 0%;margin-top: 20%;}
        #keypad table{width:100%; border:none;}
        #keypad table td{cursor: pointer; width:80px; height: 50px; color:#fff; font-size: 18px; text-align: center; vertical-align: middle;background: rgba(189, 189, 189, 0.9); box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);text-shadow: 2px 2px 2px #000;}
        #keypad table td.selected, #keypad table td:hover{background:rgba(0, 114, 198, 0.9)!important;}

        #LoginForm_password {
        text-align: center;
        width: 97%;
        line-height: 48px;
        }        
    
        #keypad .clear {
            background: rgba(255, 100, 100, 0.9);
        }    
        #keypad .login {
            background: rgba(123, 255, 100, 0.9);
        }    

}



/*
***************************************************************
*
*
*    SMARTPHONES Y TABLETS
*
*
***************************************************************
*/
@media only screen and (min-width: 512px) and (max-width: 1024px)
{
        *{margin:0px; padding: 0px; }
        body{
            background: #f3f3f3 url(../images/login-bg.png) no-repeat;
            font-family: "Segoe UI";
            background-position: 50% 50%;
            background-attachment: fixed;
            position: absolute;
            width: 100%;
            height: 100%;
            }
        .error{
            color:red;
            text-align: center;
            height: 28px;
            display: block;
            text-shadow: 2px 2px 2px #000;
            font-size: large;
            width: 99%;
            }
        #wrapper{
            width: 100%;
            min-width: 200px;
            height: 100%;
            position: absolute;
            }
        #wrapper-header{
            height: 35px;
            background: #f3f3f3;width: 100%;
            min-width: 200px;
            margin-bottom: 5px;
            -webkit-box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            -moz-box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            position: relative; z-index: 99;
        }
        #wrapper-header h1{
            font-size: 16px; font-weight: 400;padding: 1px 4px;color:#2e3b4e;
        }
        #wrapper-header h1 span{color: #e81123;}
        #wrapper-header .ePos{
            border: solid 1px #1c11e8;
            border-radius: 20px;
            border-radius: 20px;
            box-shadow: 2px 2px 3px 0 rgba(0,0,0,.6);
            float: left;
            height: 22px;
            margin-left: 5px;
            margin-top: 10px;
            padding: 0 8px 1px 8px;
            width: 120px;            
            position: absolute;
            bottom: 6px;
        }

        #wrapper-main{
        width: 100%;
        min-width: 200px;
        height: 90%;
        position: absolute;
        min-height: 90%;
        }


        button{height: 30px; width: 150px;}

        #keypad{width:33%; /*! height: 210px; */position: absolute;left: 33%;top: 0%;margin-left: 0%;margin-top: 20%;}
        #keypad table{width:100%; border:none;}
        #keypad table td{cursor: pointer; width:80px; height: 50px; color:#fff; font-size: 18px; text-align: center; vertical-align: middle;background: rgba(189, 189, 189, 0.9); box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);text-shadow: 2px 2px 2px #000;}
        #keypad table td.selected, #keypad table td:hover{background:rgba(0, 114, 198, 0.9)!important;}

        #LoginForm_password {
        text-align: center;
        width: 99%;
        line-height: 48px;
        }        
    
        #keypad .clear {
            background: rgba(255, 100, 100, 0.9);
        }    
        #keypad .login {
            background: rgba(123, 255, 100, 0.9);
        }    
}



/*
*****************************************************
*
*
*
*
DESKTOP-PC
*
*
*
*
*****************************************************
*/
@media only screen and  (min-width: 1024px)
{
        *{margin:0px; padding: 0px; }
        body{
            background: #f3f3f3 url(../images/login-bg.png) no-repeat;
            font-family: "Segoe UI";
            background-position: 50% 100%;
            background-attachment: fixed;
            position: absolute;
            height: 100%;
            width: 100%;
            }
        .error{
            color:red;
            text-align: center;
            height: 28px;
            display: block;
            text-shadow: 1px 1px 2px #fefffe;
            font-size: large;
            }
        #wrapper{
            width: 100%;
            min-width: 200px;
            height: 100%;
            position: absolute;
            }
        #wrapper-header{
            height: 35px;
            background: #f3f3f3;width: 100%;
            min-width: 200px;
            margin-bottom: 5px;
            -webkit-box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            -moz-box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            box-shadow: 0px 1px 3px 0px rgba(153,153,153,1);
            position: relative; z-index: 99;
        }
        #wrapper-header h1{
            font-size: 16px; font-weight: 400;padding: 1px 4px;color:#2e3b4e;
        }
        #wrapper-header h1 span{color: #e81123;}
        #wrapper-header .ePos{
            border: solid 1px #1c11e8;
            border-radius: 20px;
            border-radius: 20px;
            box-shadow: 2px 2px 3px 0 rgba(0,0,0,.6);
            float: left;
            height: 22px;
            margin-left: 5px;
            margin-top: 10px;
            padding: 0px 8px 1px 8px;
            width: 120px;            

            position: absolute;
            bottom: 6px;
        }

        #wrapper-main{
        width: 100%;
        min-width: 200px;
        height: 90%;
        position: absolute;
        }

        button{height: 30px; width: 150px;}

        #keypad{width:30%; /*! height: 210px; */position: absolute;left: 33%;top: 0%;margin-left: 0%;margin-top: 20%;}
        #keypad table{width:100%; border:none;}
        #keypad table td{cursor: pointer; width:80px; height: 50px; color:#fff; font-size: 18px; text-align: center; vertical-align: middle;background: rgba(189, 189, 189, 0.9); box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);text-shadow: 2px 2px 2px #000;}
        #keypad table td.selected, #keypad table td:hover{background:rgba(0, 114, 198, 0.9)!important;}

        #LoginForm_password {
        text-align: center;
        width: 99%;
        line-height: 48px;
        }        
    
        #keypad .clear {
            background: rgba(255, 100, 100, 0.9);
        }    
        #keypad .login {
            background: rgba(123, 255, 100, 0.9);
        }    
}