html {
   height: 100%;
}

input, textarea {
  background-color: #FFF;
}

    /*  
    
    
    */
body {
    margin:0px;
    background-color: black;
    color:white;
    
    min-height: 100%;
    
    
  background-image: url(../media/common/header.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 20%;
}


#main{
    position:relative;
    left: 2%;
    width:96%;
    height: 90vh;
    font-family: "Lucida Grande", Helvetica,  Arial, Arial Narrow, sans-serif;
    color:white;
    overflow: visible;
    
    
  /*   
    border: 1px solid red;
    border: 1px solid green;
    */

}
#myCont{
    position:relative;
    left: 2%;
    top: 0px;
    width: 96%;
    height: 100%;
    overflow: visible;

}


div.titol{

    text-align: center;

}

div.info{

    text-align: center;
}
.boto {
  cursor:pointer;
  text-align: center;
  text-decoration: none;
  line-height: 130%;
  border-radius: 8px;
  background-color: #820000;
}

.boto {
   &.off {
    color:#acacac;
    background-color: #777777;
    /*
    background-color: #590000;
    */
    }
}
.boto {
   &.back {
    }
}
.boto {
   &.next {
    background-color: #008200;
    }
}
.boto {
   &.here {
    background-color: #000082;
    }
}

#status_titol{
    position:relative;
    margin-top: 15%;
    width: 100%;
    text-align: center;
    font-size:10vw;

}
#status_info{
    position:relative;
    margin-top: 5%;
    width: 100%;
    text-align: justify;
    font-size:5vw;
}
#status_info2{
    position:relative;
    margin-top: 5%;
    width: 100%;
    text-align: justify;
    font-size:7vw;
}

#init_titol{
    position:absolute;
    top: 8%;
    left: 0px;
    width: 100%;
    height: 9%;
    text-align: center;
    font-size:4vh;
    overflow-y: hidden;
}
#init_info{
    position:absolute;
    top: 20%;
    left: 0px;
    width: 100%;
    height: 40%;
    text-align: justify;
    font-size:3vh;
}
#init_input{
    position:absolute;
    top: 60%;
    left: 20%;
    width: 60%;
    height: 8%;
    text-align: center;
    font-size:4vh;
    
}
#init_next{
    position:absolute;
    top: 80%;
    left: 20%;
    width: 60%;
    height: auto;
    font-size:4vh;
    text-align: center;
    display: none;
}

#main_titol{
    position:absolute;
    top: 5%;
    left: 0px;
    width: 100%;
    height: 11%;
    text-align: center;
    font-size:4vh;
    overflow-y: hidden;
}
#main_info{
    position:absolute;
    top: 20%;
    left: 0px;
    width: 100%;
    height: 30%;
    text-align: justify;
    font-size:3vh;
    overflow-y: hidden;
}
#main_botoA{
    position:absolute;
    top: 55%;
    left: 5%;
    width: 90%;
    height: auto;
    font-size:3vh;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
#main_botoB{
    position:absolute;
    top: 65%;
    left: 5%;
    width: 90%;
    height: auto;
    font-size:3vh;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
#main_botoC{
    position:absolute;
    top: 75%;
    left: 5%;
    width: 90%;
    height: auto;
    font-size:3vh;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

#main_opcio{
    display: none;
}
#main_next{
    position:absolute;
    top: 90%;
    right: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
    display: none;
}
#main_exit{
    position:absolute;
    top: 90%;
    left: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#main_codigo{
    position:absolute;
    bottom: 0%;
    left: 30%;
    width: 40%;
    text-align: center;
    font-size:2vh;
    overflow-y: hidden;
}

#selFoto_titol{
    position:absolute;
    top: 8%;
    left: 0px;
    width: 100%;
    height: 9%;
    text-align: center;
    font-size:4vh;
    overflow-y: hidden;
}
#selFoto_info{
    position:absolute;
    top: 20%;
    left: 0px;
    width: 100%;
    height: 40%;
    text-align: justify;
    font-size:3vh;
}

#selFoto_infoLoading{
    position:absolute;
    top: 25%;
    left: 0px;
    width: 100%;
    height: 40%;
    text-align: center;
    font-size:3vh;
    display:none;
}


#selFoto_input{
    position:absolute;
    top: 55%;
    left: 0%;
    width: 100%;
    height: auto;
    text-align: center;
    font-size:2vh;
    
}
#selFoto_input input{
    font-size:2vh;
}

/*
#selFoto_foto::-webkit-file-upload-button {
  visibility: hidden;
}
*/

#selFoto_foto{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#selFoto_inputFoto{
    display:none;
}
#selFoto_loading{
    position:absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: auto;
    overflow-y: visible;
    text-align: center;
    display:none;
}

#selFoto_exit{
    position:absolute;
    top: 90%;
    left: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}

#selFoto_error{
    position:absolute;
    top: 20%;
    left: 0px;
    width: 100%;
    height: 70%;
    text-align: justify;
    font-size:3vh;
    overflow-y: hidden;
}
#selFoto_errorClose{
    position:absolute;
    top: 80%;
    left: 30%;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}

#edit_titol{
    position:absolute;
    top: 8%;
    left: 0px;
    width: 100%;
    height: 9%;
    text-align: center;
    font-size:4vh;
    overflow: hidden;
}
#edit_next{
    position:absolute;
    top: 85%;
    right: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#edit_exit{
    position:absolute;
    top: 85%;
    left: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#edit_foto{
    position:absolute;
    top: 18%;
    left: 0%; 
    width: 100%;
    height: 35%;
    overflow: hidden;
    /*border: solid 1px red;a eliminar !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
}
#edit_foto img{
    position:absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
}
#edit_foto.only{
    top: 30%;
    left: 0%; 
    width: 100%;
 }

#edit_botoFoto{
    position:absolute;
    top: 55%;
    left: 20%;
    width: 60%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#edit_botoFoto.only{
    top: 67%;
}
#edit_text{
    position:absolute;
    top: 65%;
    left: 0%; 
    width: 100%;
    height: 15%;
    text-align: center;
    font-size:3vh;
    overflow: hidden;
    /*a border: solid 1px red;eliminar !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
}
#edit_text.only{
    top: 30%;
}
#edit_text img{
    position:absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
}

#edit_botoText{
    position:absolute;
    top: 82%;
    left: 20%;
    width: 60%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#edit_botoText.only{
    top: 47%;
}

#edit_next{
    position:absolute;
    top: 93%;
    right: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#edit_exit{
    position:absolute;
    top: 93%;
    left: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}




#editFoto_titol{
    position:absolute;
    top: 8%;
    left: 0px;
    width: 100%;
    height: 9%;
    text-align: center;
    font-size:4vh;
    overflow-y: hidden;
}
#editFoto_instruccions{
    position:absolute;
    top: 20%;
    left: 0px;
    width: 100%;
    height: 15%;
    text-align: center;
    font-size:3vh;
    overflow-y: hidden;
}
#editFoto_foto{
    position:absolute;
    top: 35%;
    left: 0%;
    width: 100%;
    height: 45%;
    overflow: hidden;
    /*border: solid 1px red;a eliminar !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
}

#editFoto_divPorcio{
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
    /*border:1px yellow solid;*/
}
#editFoto_imgPorcio{
    position:absolute;
    left:0px;
    top:0px;
    display:none;
	
}
#editFoto_botoRot{
    position:absolute;
    top: 82%;
    left: 30%;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}

#editFoto_close{
    position:absolute;
    top: 93%;
    left: 30%;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}


#editText_titol{
    position:absolute;
    top: 8%;
    left: 0px;
    width: 100%;
    height: auto;
    text-align: center;
    font-size:4vh;
    overflow-y: hidden;
}
#editText_instruccions{
    position:absolute;
    top: 20%;
    left: 0px;
    width: 100%;
    height: 15%;
    text-align: center;
    font-size:3vh;
    overflow-y: hidden;
}

#editText_input{
    position:absolute;
    top: 40%;
    left: 0px;
    width: 100%;
    height: 30%;
    font-size:3vh;
    overflow-y: auto;
    resize: none;
}
#editText_close{
    position:absolute;
    top: 85%;
    left: 30%;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}

#result_titol{
    position:absolute;
    top: 5%;
    left: 0px;
    width: 100%;
    height: auto;
    text-align: center;
    font-size:4vh;
    overflow: hidden;
}
#result_preview{
    position:absolute;
    top: 25%;
    left: 0px;
    width: 100%;
    height: 55%;
    overflow: hidden;
    
   
    
}
#result_preview img{
    position:absolute;
    top: 0px;
    left: 0px;
    visibility: hidden;
}

#result_back{
    position:absolute;
    top: 82%;
    left: 30%;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#result_ok{
    position:absolute;
    top: 90%;
    right: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#result_exit{
    position:absolute;
    top: 90%;
    left: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}

#result_going{
    position:absolute;
    
    top: 82%;
    left: 40%;
    width: 20%;
    height: auto;
    text-align: center;
    display: none;

}

#result_codigo{
    position:absolute;
    bottom: 0%;
    left: 30%;
    width: 40%;
    text-align: center;
    font-size:2vh;
    overflow-y: hidden;
}


#end_titol{
    position:absolute;
    top: 8%;
    left: 0px;
    width: 100%;
    height: 9%;
    text-align: center;
    font-size:4vh;
    overflow-y: hidden;
}
#end_info{
    position:absolute;
    top: 20%;
    left: 0px;
    width: 100%;
    height: 40%;
    text-align: justify;
    font-size:3vh;
}
#end_codi{
    position:absolute;
    margin-top: 65%;
    width: 100%;
    text-align: center;
    font-size:4vh;
}

#end_next{
    position:absolute;
    top: 90%;
    right: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}
#end_exit{
    position:absolute;
    top: 90%;
    left: 0px;
    width: 40%;
    height: auto;
    font-size:3vh;
    text-align: center;
}