body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin-bottom: 3em;
	background-image: url(//media.utp.edu.co/img/optimized/background.png);
}
.content{font-size:10px}
.center-block{margin-left:auto;margin-right:auto;display:block}
.access-panel{
    background-color:#183861;
    border-radius:.8em;
    width:38em;
    height:20.6em;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.3em}
.access-panel-body{padding:1em 1.2em 1.2em 2.1em}
.has-error{margin-bottom: 0.3em}
.text-block{float:left;width:40%;color:#FFF;text-align:center}
.text-block>img{margin-top:.8em;width:13em}
.form-block,.text-block{display:inline-block}
.form-block{float:left;width:60%;height:100%}
.form-container{border-radius:.5em;background-color:#FFF;margin-left:1.4em}
.form-block>.form-container>form{padding:.7em 1.1em 2.3em 1.5em}
.form-block>.form-container>form>.form-group>label{display:block;margin-bottom:.5em}
.form-block>.form-container>form>.form-group>input{
    padding-left:1.54em;
    margin-bottom:.5em;
    width:87%;
    -webkit-box-shadow:.15em .3em 1em 0 rgba(50,50,50,.6);
    -moz-box-shadow:.15em .3em 1em 0 rgba(50,50,50,.6);
    box-shadow:.15em .3em 1em 0 rgba(50,50,50,.6);
    border:1px solid transparent;
    font-size:1.3em}
.form-block>.form-container>form>.form-group>input:focus{
    -webkit-box-shadow:0 .1em .8em .1em rgba(102,175,233,.6);
    -moz-box-shadow:0 .1em .8em .1em rgba(102,175,233,.6);
    box-shadow:0 .1em .8em .1em rgba(102,175,233,.6);
    border-color:rgba(102,175,233,.62);outline:0}
.tipo_usuario{width:100%; height: 2em;}
#username{
    /*width:11em;*/
    background:url(//media.utp.edu.co/institucional/icons/user.png) .2em center no-repeat #FFF;
    background-size:1.3em 1.3em}
#password{
    /*width:11em;*/
    background:url(//media.utp.edu.co/institucional/icons/key.png) .2em center no-repeat #FFF;
    background-size:1.3em 1.3em}
.form-block>.form-container>form>.btn-submit{margin-top:1.5em}
.btn-submit{
    padding:.1em 2em;
    margin-bottom:0;
    font-size:1em;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
    cursor:pointer;
    border-radius:.4em;
    border:.1em solid #d8d8d8;
    background:-moz-linear-gradient(top,#d8d8d8 0,#fff 50%,#d8d8d8 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d8d8d8),color-stop(50%,#fff),color-stop(100%,#d8d8d8));
    background:-webkit-linear-gradient(top,#d8d8d8 0,#fff 50%,#d8d8d8 100%);
    background:-o-linear-gradient(top,#d8d8d8 0,#fff 50%,#d8d8d8 100%);
    background:-ms-linear-gradient(top,#d8d8d8 0,#fff 50%,#d8d8d8 100%);
    background:linear-gradient(to bottom,#d8d8d8 0,#fff 50%,#d8d8d8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#d8d8d8', GradientType=0 )
}
.btn-submit:hover{background-color:#e0e0e0;background-position:0 -1.1em}
@media (max-width:380px){
    .access-panel{width:100%}
    .access-panel-body{padding-left:1em}
    .text-block>img{margin-bottom:.5em;width:100%}
    .form-block>
    .form-container>form>.form-group>span{display:none}
    #password,#user{width:87%}
}
@media (max-width:549px) {
    .access-panel-body {
        display: grid;
        background: #183861;
        border-radius: 15px;
    }
    .text-block, .form-block {
        width: auto !important;
    }
}