*{
  box-sizing: border-box;
}


a{
  color:#333;
  text-decoration: none;
}
a:hover{
  color:#333;
  text-decoration: none;
}

body{
  color:#333;
  font-size:100%;
}
#login-form{
  background-color:rgba(255,255,255,0.7);
  padding:15px;
  border-radius: 5px;
}

.demo-login{
  cursor: pointer;
  font-size:1.08rem;
  display: inline-block;
  padding:5px;
}
.demo-login:hover{
  color:blue;
}


header{
  background-color:#eee;
  height:60px;
}
header h1{
  font-size:1.5rem;
  line-height: 60px;
}
@media (max-width:414px){
  header h1{
    font-size: 1.1rem;
    margin-top: 3px;
  }
}

.login-user{
  line-height: 60px;
}


.header_btn{
  font-size:0.8rem;
  margin-top:14px;
}

.todo-add,#login{
  background-image:url(imgs/main_image2.jpg);
  /* background-color:skyblue; */
  /* background-blend-mode: hard-light; */
  height:360px;
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
}
#login{
  height:470px;
}
.form-group label{
  font-size:1.1rem;

}

.input-wrapper{
  background-color:rgba(255,255,255,0.7);
}

@media (max-width:767px){
  section h2{
    font-size:1.25rem;
    text-align: center;
  }
}

.fa-plus-circle{
  font-size: 1.5rem;
  cursor: pointer;
}

.item-wrapper{
  max-width:1200px;
}

.item-wrapper{
  width:205px;
}
@media (max-width:767px){
  .item-wrapper{
    width:239px;
  }
}

@media (max-width:576px){
  .item-wrapper{
    width:97%;
  }
}


.todo-item__edit-button{
  cursor: pointer;
  opacity:0.8;
}
.todo-item__edit-button:hover{
  opacity:1;
}
.todo-item__title{
  height: 25px;
  overflow: hidden;
}

.todo-item__path{
  overflow: hidden;
}

.todo-item__comment{
  height:70px;
  overflow:scroll;
}

.progress{
  height:5px;
}

.todo-item__delete{
  font-size:0.7rem;
}


.footerFixed{
  min-height:100vh;
  position:relative;
  padding-bottom:40px;
}

footer{
  width: 100%;
  height:40px;
  background-color:#eee;

  position:absolute;
  bottom:0;
}

#mask{
  background-color: rgba(0,0,0,0.4);
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:0;
}

.modal-wrapper{
  width: 450px;
  border:1px solid #eee;
  background-color:white;
  position:absolute;
  /* top:90px; */
  left:0;
  right:0;
  
  transition: transform 0.5s;
}
@media (max-width:375px){
  .modal-wrapper{
    width: 100%;
  }
}

#edit-form label{
  font-size: 1rem;
}
 @media (max-width:375px){
  #edit-form label{
    font-size: 0.73rem;
  }
 }