body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  /*background-color: #f4f4f4;*/
}

div.bodyposition {
    
    position: absolute;
    margin-top: 7em;
    display: block;
    width: 100%;
}

a {
  color: #000;
}
/*
input[type='file'] { font-size: 0; }
::file-selector-button { font-size: initial; }
*/


input[type=file]::file-selector-button {
    border: 0px solid;
    padding: .5em 0.7em;
    /*border-radius: .2em;*/
    background-color: #dbd8d8;
    
    font-size: 1.2em;
    
    transition: 1s;
}

input[type=file]::file-selector-button:hover {
    background-color: #32CBCB;
    border: 0px solid;
    transition: 1s;
}


input[type="submit"] {
  /* background-color:  #4F4F4F;*/
  background-color:  #fff;
  /*font-family: sans-serif;*/
  border: 1px solid #C6C6C6;
  /*  font-weight: 400;*/
  /*padding: 6px 22px;*/
  padding:1.5% 3% 1.5% 3%;  
  /*margin: 3% 2px 3% 0px;*/
  margin: 0% 1%;
  color:#333;
  -webkit-appearance: none;
  border-radius: 0;
  cursor:pointer;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  
}

input[type="submit"]:hover {
  /*background-color:  #A5A5A5;*/
  background-color:  #32CBCB;
  border: 1px solid #376262;
  color:#FFF;
}

input[type="submit"].Delete {
    background-color:  #fff;
    border: 1px solid #C6C6C6;
    margin: 0% 1%;
    color:#333;
    -webkit-appearance: none;
    border-radius: 0;
    cursor:pointer;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    width:fit-content;
    padding:5% 7%;
    margin-top:5%;
    /*margin-left: 6em;*/
    margin-bottom: 2em;
}

input[type="submit"].Delete:hover {
    /*background-color:  #A5A5A5;*/
    background-color:  Red;
    border: 1px solid #376262;
    color:#FFF;
}




/*
label.addusers
{
    width: fit-content;
    padding: 5% 7%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 1px solid #C6C6C6;
    margin-right: 4.6em;
    cursor: pointer;
    
}*/

label.addusers
{
    width: fit-content;
    padding: 5% 7%;
    margin-top: 0.5em;
    margin-left: 4em;
    margin-right: auto;
    display: inline-block;
    border: 1px solid #C6C6C6;
    cursor: pointer;
    margin-bottom:0.4em;
    
}



label.addusers:hover {
    background-color:  #32CBCB;
    border: 1px solid #376262;
    color:#FFF;
}

label.infoinquilino
{
    width: fit-content;
    padding: 1em;
    /*border: 1px solid #C6C6C6;*/
    cursor: pointer;
    margin-bottom:0.4em;
    
}



label.infoinquilino:hover {
    background-color:  #32CBCB;
    /*border: 1px solid #376262;*/
    color:#FFF;
}




/* header */

.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
  /* Gabi*/
   	/*font-size: 4em;*/
    
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  #background-color: #f4f4f4;
  background-color: #31caca6b;
  
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  /*padding: 10px 20px;*/
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
  
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
  /* Gabi*/
  /*height: 1em;
  width: 5em;*/
  
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  /*max-height: 340px;*/
  /* Gabi*/
  max-height: 60%;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}


div.phone {
  display:none;
  
}

table.inmueble {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    width: 95%;
    /*max-width: 62em;*/
    max-width: 46em;
}

button.Inmueble {
 
  display: flex;
  align-items: center;
  justify-content: left;
  cursor: pointer;
 
  background: white;
  
  /*border-radius: 2em;*/
 
  /*margin-left: auto;
  margin-right: auto;*/
  margin-top:1em;
  padding: 1em;
  width: 100%;
  border: 0;
  color: grey;
  box-shadow: 0 .5em 1em 0 rgba(0,0,0,0.2), 0 .5em .5em 0 rgba(0,0,0,0.19);
}



button.Inmueble:hover {
  
  /*background: #007e8b;
  background: #728c8c;
  color:#FFF;
  opacity:1;
  cursor: pointer;*/
  background: #f0f0ef;
  box-shadow: 0 1em 1em 0 rgba(0,0,0,0.2), 0 .5em 1em 0 rgba(0,0,0,0.19);
}

/*
button.Inmueble {
 
  display: inline-block;
  cursor: pointer;
  background: white;
  border-radius: .5em;

  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  border: 0px;
  color: darkgrey;
  padding: 0;
  box-shadow: 0 .5em .5em 0 rgba(0,0,0,0.2), 0 .5em .5em 0 rgba(0,0,0,0.19);
  max-width: 258px;
}
*/

/*
button.Inmueble:hover {
 
  box-shadow: 0 1em 1em 0 rgba(0,0,0,0.2), 0 .5em 1em 0 rgba(0,0,0,0.19);
}

*/

button.Year {
    
    display: inline-flex;
    align-items: center;
    
    cursor: pointer;
    background:lightsteelblue ;
    /*margin-top:1em;*/
    padding: 0.5em;
    padding-left: 1.8em;
    padding-right: 1.8em;
    width: fit-content;
    border: 1px solid white;
    color: white;
    /*box-shadow: 0 .5em 1em 0 rgba(0,0,0,0.2), 0 .5em .5em 0 rgba(0,0,0,0.19);*/
    font-size: 1em;
}


table.Gastos {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    width: 98%;
    max-width: 35em;
}

table.GastosInner {
    
    width: 100%;
    /*font-size: 1.2em;*/
    font-size: 1em;
    /*margin-left: 1em;*/
    font-weight: 100;
}

table.GastosInner td {
    text-align:left;
    /*padding-right: 2em;*/
    
}

div.GastosInner {
    display:block;
    font-size: 1.2em;
    padding-right:1em;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 20em;
    width: 20em;
}




button.Gasto {
    
    display: flex;
    align-items: center;
    justify-content: left;
    cursor: pointer;
    
    background: white;
    
    /*border-radius: 2em;*/
    
    /*margin-left: auto;
     margin-right: auto;*/
    /*margin-top:1em;*/
    /*padding: 1em;*/
    /*width: 100%;*/
    border: 0;
    color: grey;
    /*box-shadow: 0 .5em 1em 0 rgba(0,0,0,0.2), 0 .5em .5em 0 rgba(0,0,0,0.19);*/
}

button.GastoData {
    
    display: flex;
    align-items: center;
    /*justify-content: left;*/
    cursor: pointer;
    background: white;
    border: 0;
    color: grey;
    min-height:7em;
    min-width: 20em;
    text-align: left;
    margin-left: 1em;
}

button.Gasto:hover {

    /*background: #f0f0ef;
    box-shadow: 0 1em 1em 0 rgba(0,0,0,0.2), 0 .5em 1em 0 rgba(0,0,0,0.19);*/
}


button.Coeficientes  {
  /*
  cursor: pointer;
  display: inline-block;
  background-color: #f0f5fd;
  border-radius: 5%;
  width: 5em;
  height: 5em;
  padding: 1em;
  border: 1px solid #c1b8b8;*/
  cursor: pointer;
  display: inline-block;
  /*background-color: #f0f5fd;*/
  /*background-color: #84e1e16b;*/
  background-color:  #fff;
  color:#333;
  border-radius: 20%;
  width: 4em;
  height: 4em;
  /*padding: 1em;*/
  /*border: 3px solid #7b7b7b;*/
  border: 0px;
  font-size: 1em;
  /*font-weight: 100;*/
  /*color: grey;*/
  border: 1px solid #c1b8b8;
}

button.Coeficientes:hover  {
  color:#FFF;
  /*background-color: #d0e2ff;*/
  /*background-color: #31caca6b;*/
  background-color:  #32CBCB;
  
  
}


h2.Dummy {
    margin-bottom: 0em;
    display:none;
}





a.property
{
  color:white;
}
a.property:hover
{
  /*color:honeydew;*/
  color:#f2e522;
}



/* [Object] Modal
 * =============================== */
.modal {
  opacity: 0;
  visibility: hidden;
  /*position: fixed;*/
  position: absolute;
  top: 0;
  /*top: 1em;*/
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  /*background: rgba(0,0,0, .9);*/
  background: rgba(255, 255, 255, 0);
  transition: opacity .25s ease;
  
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  /*margin-top:1em;*/
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  background: #fff;
  border-radius: 5px;
  padding: 1em 2em;
  /*height: 50%;*/
  /*Gabi*/
  border: 1px solid grey;
  margin-top: 0em;
  height: fit-content;
  max-width: 35em;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}


*{
  /*
   font-size: 16px;
   font-family: sans-serif;
   */
}

body {
  margin: 0 !important;
  padding: 0 !important;
  
}

body.login {
  margin: 0 !important;
  padding: 0 !important;
  background-color: black;
  color: #fff;
}

a {
  text-decoration: none;
  /*color: #555454;*/
}

a.login {
  text-decoration: none;
  color: #999;
}

h4 {
  
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  
}

a.logout  {
  
  margin:0;
  padding:2%;
  text-transform:none;
  color:#fff;
}

a.logout:hover {
  color: #36A7EF;
}

div.error {
  width:90%;
  text-align:center;
  margin-left: auto ;
  margin-right: auto ;
  margin-top:1%;
  color:#EF683C;
  
}

table.login {
  
  border: 1px solid #C6C6C6;
  margin: 0 auto;
  padding: 4%;
  width: 98%;
  max-width: 500px;
  
}


input[type="radio"].coeficientes {
  display: none;
}

label.coeficientes  {
  cursor: pointer;
  display: inline-block;
  background-color: #f0f5fd;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  text-align: center;
  line-height: 3em;
  padding: 1em;
}

#Porcentajes
{
  display:none;
}

 input[type="radio"].coeficientes:checked+label,
.Checked+label {
   background-color: lightsteelblue;
}

#Copropiedad:checked ~ #Porcentajes
{
  display: block;
  border: 1px solid grey;
  margin-top: 1em;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  padding: 1em;
  width: fit-content;
  background: #f0f5fd;
  
}


table.Addhouse {
    border: 1px solid grey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 6em;
    padding-right: 4em;
    /*max-width: 60%;*/
    width: 30%;
    max-width:35em;
}

table.Showhouse {
    border: 1px solid grey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 6em;
    /*padding-right: 4em;*/
    /*max-width: 60%;*/
    width: 60%;
    max-width: 35em;
}

table.InformeInner {
    /*
    border: 0px;
    border-collapse: collapse;
    
    padding: 1em 2em;
   */
    
}

table.InformeInner, table.InformeInner td {
    
    border: 1px solid gray;
    border-collapse: collapse;
    /*border-collapse: separate;*/
    padding: 1em 2em;
    
}

tr.NoBorder td {
    
    border: 0px;
    border-collapse: collapse;
    /*border-collapse: separate;*/
    padding: 1em 2em;
    /* background: burlywood;*/
    
}

table.InformeInner th {
    
    border: 1px solid gray;
    /*border-collapse: collapse;*/
    padding: 1em 2em;
    
}



input[type="text"].Addhouse, input[type="number"].Addhouse {
    border: none;
    border-bottom: 1px solid lightgrey;
    text-align: end;
    font-size: 1em;
    cursor: pointer;
    max-width: 10em;
    /* Chrome, Safari, Edge, Opera */
        -webkit-appearance: none;
        /*margin: 0;*/
    /* Firefox */
        -moz-appearance: textfield;
}

input[type="date"].Addhouse {
    border: none;
    border-bottom: 1px solid lightgrey;
    text-align: end;
    font-size: 1.3em;
    cursor: pointer;
    max-width: 10em;
    /* Chrome, Safari, Edge, Opera */
    -webkit-appearance: none;
    /*margin: 0;*/
    /* Firefox */
    -moz-appearance: textfield;
}

span.Addhouse {
    border: none;
    border-bottom: 1px solid lightgrey;
    text-align: end;
    font-size: 1em;
    display:inline-block;
    cursor: pointer;
    max-width: 11em;
    /* Chrome, Safari, Edge, Opera */
    -webkit-appearance: none;
    /*margin: 0;*/
    /* Firefox */
    -moz-appearance: textfield;
    width: 11em;
}

input[type="submit"].Addhouse{
    width:fit-content;
    padding:5% 7%;
    margin-top:5%;
    margin-left: 6em;
    margin-bottom: 2em;
}



input[type="submit"].AddInquilino{
    
    width:fit-content;
    /*padding:5% 7%;*/
    margin-top:5%;
    margin-left: 6em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    padding: 5% 7%;
    
}

.IncreaseUsers{
    cursor: pointer;
    display: inline-block;
    padding: 0;
    background: transparent;
    vertical-align: middle;
    border: 0;
    margin-right: 0.5em;
    margin-top: 1em;
    margin-left: 5.5em;
    margin-bottom: 1em;
}


.iconoMenu {
    display: block;
    opacity: .5;
    max-width: 1.35em;
    margin: auto;
    margin-bottom: .4em;
    
}

.Inquilino {
    
    /*padding-left:6em;*/
    padding-right:1em;
}


/*
@media screen and (max-width: 768px) {
  
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
    border: 0px solid white;
  }
}
*/

/* 48em = 768px */

@media (min-width: 925px) {
  .header li {
    float: left;
  }
  .header li a {
    /*padding: 20px 30px;*/
    
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  
  
  
  button.Inmueble {
    display: inline-block;
    /*border-radius: 1em;*/
    /*width: 15%;*/
    margin: 0.5em;
    width: 17em;
    height: 20em;
  }
  

  
}

@media screen and (max-width: 925px) {
  /*
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
    border: 0px solid white;
  }*/
  
  div.bodyposition {

          margin-top: 5em;

  }
  
  label.addusers
  {
      
      margin-right:auto;
      margin-left:auto;
  }
  
  label.infoinquilino
  {
      
      /*margin-right:auto;
      margin-left:auto;*/
  }
  
  .modal__inner {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 0px solid white;
      position: fixed;
      margin-top: 4.5em;
  }
  
  
  
  table.login {
    
    border: 0px;
    
    
  }
  
  table.Addhouse, table.Showhouse {
      
      width:95%;
      max-width: 25em;
      padding-right: 0em;
      border: 0;
      margin-top: 0em;
      margin-bottom: 3em;
  }
  

  
  input[type="text"].Addhouse, input[type="number"].Addhouse {
      font-size: 1em;
      max-width: 7em;
  }
  
  input[type="date"].Addhouse {
      max-width: 7em;
  }
  
  span.Addhouse {
      /*width: 10.4em;*/
      width: 7.4em;
  }
  
  input[type="submit"].Addhouse{
      
      margin-left: auto;
      margin-right: auto;
      
  }
  

  
  .IncreaseUsers{
      
      margin-left: 0;
  }
  
  /*button.Inmueble {
      
      width: 100%;
  }*/
  
  button.Inmueble:hover {
      
      /*background: #007e8b;*/
      /*background: #728c8c;*/
      /*color:#FFF;*/
      /*opacity:1;*/
      /*cursor: pointer;*/
      box-shadow: 0 1em 1em 0 rgba(0,0,0,0.2), 0 .5em 1em 0 rgba(0,0,0,0.19);
  }
  
  .iconoMenu {
      display: inline-block;
      margin-right: 1em;
      vertical-align: middle;
      margin-bottom: 0;
  }
  
  .Inquilino {
     /* padding-left:4em;*/
      
  }
 
  button.Gasto {
      display: block;
  }
  button.GastoData {
      
      display: block;
      text-align: center;
      min-width: 15em;
      margin-left: 0;
  }
 
  table.GastosInner {
      
      font-size: 1em;
      margin-left: 0;
  }
  table.GastosInner td {
     /* text-align:center;*/
  }
  
  div.GastosInner {
      display:block;
      font-size: 1.2em;
      padding-left: 1em;
      color: #000;
      font-weight: normal;
      max-width: 10em;
      width: 10em;
  }
  
  button.Year {

      padding-left: 0.7em;
      padding-right: 0.7em;
      
  }
  

  h2.Dummy {
      margin-bottom: 3em;
      display:block;
  }

}