#div_contenedor_img
{
  /*margin-top: 10px;*/
  /*background-image: url('../img/Prueba.png');*/
  /*position: static;
  text-align: center;*/
  width: 595px;
  height: 889px;
}
.divcontenedor
{
  width:215.9mm;
  height:279.4mm;
  padding-top: 10mm;
  padding-left:10mm;
}
.divcontenedor1
{
  border-top: solid;
  border-left: solid;
  border-top-width: thin;
  border-left-width:thin;
  border-top-color: black;
  border-left-color: black;
  padding-top: 5mm;
  padding-left:5mm;
  width: auto;
  height:269mm;
}
.img2
{
  width:150mm;
  height:100mm;
}
/* ///////////// diseño 2///////////////////// */
.divcontenedord2
{
  width:215.9mm;
  height:279.4mm;
  padding-top: 5mm;
 padding-left:5mm;
}
.divcontenedor1d2
{
  border-top: solid;
  border-left: solid;
  border-top-width: thin;
  border-left-width:thin;
  border-top-color: black;
  border-left-color: black;
  padding-top: 3mm;
  padding-left:3mm;
  /* background-color: blue; */
  width:210.9mm;
  height:274.4mm;
}
.img2d2
{
  padding-right:3mm;
  padding-bottom:3mm;
  width:90mm;
  height:50mm;
}
/* di para texto */
.divimg
{
  width:150mm;
  height:100mm;
  /*background-image: url('../pruebas 2/Prueba11-ConvertImage.png');*/ /* here put coment */
  /* background-repeat: no-repeat; */
  background-size: 150mm 100mm;
}
.textar
{
  position:fixed;
  background:transparent;
  text-align: center;
  font-size: 30px;
 width: 301px; height: 135px
}
#draggable
{
  width: 320px;
  height: 155px;
  border:solid;
 }
 /*draggable textarea*/
 #mydiv
 {
     position: absolute;
     z-index: 9;
     background-color: transparent;
     left: 320px;
     border: solid transparent;
 }
 #mydivheader /*header move-> cursor*/
 {
     padding: 10px;
     cursor: move;
     z-index: 10;
     background-color: transparent; /*header clikeame*/
     color: #fff; /*color de texto -> white*/
 }
 #text_fondo
 {
   background-color: transparent;
   height: 4.4em; /* a bit less than four lines to demonstrate scrolling */
   width: 300px;
 }
.padre
{
  /* IMPORTANTE */
  text-align: center;
}
.hijo
{
  padding: 10px;
  margin: 10px;
  /* IMPORTANTE */
  display: inline-block;
}
.btn
{
  margin-top: 1px;
  margin-left: 400px;
}

/*tabla*/
#contenedor-mains
{
display: inline-block;
background:#fff;
width:200px;
}
#contenedor-mains div
{
float:right;
/*border:2px solid #FF0100;*/
background:#fff;
width:30px;
}
#menuOpcion
{
  width: auto;
  height: 40px;
  margin-left: -8px;
  margin-right: -8px;
  margin-top: 0px;
}
/*configuracion de alineacion de los botones en el menu*/
#boton
{
  padding: 0px;
  margin: auto;
}
#boton li
{
  display: inline-block;
}
#boton li button {
  font-family: Arial;
  font-size: 16px;
  text-decoration: none;
  display: inline;
  padding: 0;
  margin: 0;
  width: 45px;
  height: 45px;
  color: #fff;
  font-family: 'Dosis', sans-serif;
  text-transform: uppercase;
}
/*codigo para selectpr de tamaño*/
select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://ecogreenhome.es/wp-content/themes/ecogreenhome/img/triangulo_gris-oscuro.png) 96% / 15% no-repeat #eee;
}
#verSlcTipoFuente
{
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://ecogreenhome.es/wp-content/themes/ecogreenhome/img/triangulo_gris-oscuro.png) 96% / 15% no-repeat #eee;
}

/* CAUTION: IE hackery ahead */


select::-ms-expand {
    display: none; /* remove default arrow in IE 10 and 11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    }
}
/*opciones de input file*/
.btn-bs-file input[type="file"]
{
    position: absolute;
    top: -9999999;
    filter: alpha(opacity=0);
    opacity: 0;
    width:0;
    height:0;
    outline: none;
}
#contenedor_image
{
  margin:0px;
  width: 595px;
  height: 889px;
  margin-top: 0px;
  /*position: static;
  text-align: center;*/
}
#div_contenedor_upload
{
  top: 70px; /*aqui modificarle el sidebar*/
  width: 250px;
  /*position: fixed;
  /*z-index:-1;*/
}
/**********************apartado de login**************************/
body{background: #eee url(http://subtlepatterns.com/patterns/sativa.png);}
html,body{
    position: relative;
    height: 100%;
}

.login-container{
    position: relative;
    width: 300px;
    margin: 80px auto;
    padding: 20px 40px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
}

#output{
    position: absolute;
    width: 300px;
    top: -75px;
    left: 0;
    color: #fff;
}

#output.alert-success{
    background: rgb(25, 204, 25);
}

#output.alert-danger{
    background: rgb(228, 105, 105);
}


.login-container::before,.login-container::after{
    content: "";
    position: absolute;
    width: 100%;height: 100%;
    top: 3.5px;left: 0;
    background: #fff;
    z-index: -1;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    border: 1px solid #ccc;

}

.login-container::after{
    top: 5px;
    z-index: -2;
    -webkit-transform: rotateZ(-2deg);
     -moz-transform: rotateZ(-2deg);
      -ms-transform: rotateZ(-2deg);

}

.avatar{
    width: 100px;height: 100px;
    margin: 10px auto 30px;
    border-radius: 100%;
    border: 2px solid #aaa;
    background-size: cover;
    background-image: url("../img/loginUser.jpg");
}

.form-box input{
    width: 100%;
    padding: 10px;
    text-align: center;
    height:40px;
    border: 1px solid #ccc;;
    background: #fafafa;
    transition:0.2s ease-in-out;

}

.form-box input:focus{
    outline: 0;
    background: #eee;
}

.form-box input[type="text"]{
    border-radius: 5px 5px 0 0;
    text-transform: lowercase;
}

.form-box input[type="password"]{
    border-radius: 0 0 5px 5px;
    border-top: 0;
}

.form-box button.login{
    margin-top:15px;
    padding: 10px 20px;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
/*la otra parte de login**/
/*=== 5. Login Button ===*/
.login-form-1 .login-button {
  position: absolute;
  right: -25px;
  top: 50%;
  background: #5bc0de;
  color: #FDFEFE;
  padding: 11px 0;
  width: 65px;
  height: 65px;
  margin-top: -25px;
  border: 5px solid #efefef;
  border-radius: 50%;
  transition: all ease-in-out 500ms;
}
.login-form-1 .login-button:hover {
  color: #555555;
  transform: rotate(450deg);
}
.login-form-1 .login-button.clicked {
  color: #555555;
}
.login-form-1 .login-button.clicked:hover {
  transform: none;
}
.login-form-1 .login-button.clicked.success {
  color: #2ecc71;
}
.login-form-1 .login-button.clicked.error {
  color: #e74c3c;
}
/*=== 6. Form Invalid ===*/
label.form-invalid {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: block;
  margin-top: -25px;
  padding: 7px 9px;
  background: #777777;
  color: #ffffff;
  border-radius: 5px;
  font-weight: bold;
  font-size: 11px;
}
label.form-invalid:after {
  top: 100%;
  right: 10px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: #777777;
  border-width: 6px;
}
/*=== 7. Form - Main Message ===*/
.login-form-main-message {
  background: #ffffff;
  color: #999999;
  border-left: 3px solid transparent;
  border-radius: 3px;
  margin-bottom: 8px;
  font-weight: bold;
  height: 0;
  padding: 0 20px 0 17px;
  opacity: 0;
  transition: all ease-in-out 200ms;
}
.login-form-main-message.show {
  height: auto;
  opacity: 1;
  padding: 10px 20px 10px 17px;
}
.login-form-main-message.success {
  border-left-color: #2ecc71;
}
.login-form-main-message.error {
  border-left-color: #e74c3c;
}