/* NAVIGATION */
header {
  position: relative;
  width: 100%;
  height: 2, 5rem;
  background-color:var(--middle-color);
  margin-bottom:2.5rem;
}

.nav__logging__text {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  color: #fff;
}

.nav__navigation {
  display: flex;
  flex-flow: row nowrap;
  place-content: center;
  list-style: none;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.nav__navigation__container {
  cursor: default;
  text-align: center;
  background-color:var(--lighter-color);
  width:200px;
  padding-block: 0.5rem;
}

.nav__navigation__text {
  color: #fff;
}

/* Searchbar */
.search__flex{
    display:flex;
    flex-flow: nowrap row;
    place-content: center;
    gap:0.5rem;
    margin-bottom:50px;
}

.searchBar{
    text-indent:0.25em;
}
.searchByFilter{
    background-color:var(--middle-color);
    color:#fff;
}

/* Expiry code */
.legenda__container{
  margin:auto;
  text-align:center;
}

.legenda__container *{
  color:var(--middle-color);
}

.legenda__container div{
 display:flex;
 justify-content: center;
}
.legenda__container div p{
padding:5px;
}

.legenda__colors__container div{
width:20px;
height:20px;
}

.legenda__5days{
  background-color: #080;
}
.legenda__4days{
  background-color:#8c8;
}
.legenda__3days{
  background-color:#c80;
}
.legenda__2days{
  background-color:#c00;
}
.legenda__1days{
  background-color:#800;
}
.legenda__0days{
  background-color:#400;
}

.daysToExpireCircle{
  border-radius:50%;
  position:absolute;
  width:50px;
  height:50px;
  left:-25px;
  text-align:center;
  padding:15px;
  }

/* ArticleList */
.articleList__titleContainer{
  display:flex;
  place-items: center;
  gap:0.5rem;
  justify-content: center;
}

.articleList__title{
  color:#fff;
  background-color: var(--middle-color);
  width:fit-content;
  border-radius:0.5rem;
  padding-block:5px;
  padding-inline: 50px;
  margin-block:5px;
  cursor:default;
}

.addArticleButton{
  font-weight:bolder;
  font-size:larger
}

.articleList__container{
  display:flex;
  flex-flow:column nowrap;
}

.articleList__articleCard{
  background-color:var(--lighter-color);
  display:flex;
  position:relative;
  flex-flow:row nowrap;
  width:70%;
  padding-block:1rem;
  margin:5px auto;
  border-radius:1rem;
}

.articleList__articleCard__informationContainer{
  padding: 5px;
  cursor:default
}

.articleName{
margin-left:15px;
width:45%;
padding-left:0.75rem;
}

.articleEan, .articleHope, .articleEditPencil, .articleExpiry{
width:fit-content;
}

.articleAvailability{
width:20%;
}

/* Dialog editOrCreateDialog */
.editArticleScreen{
  margin:auto;
  background-color: var(--darkest-color);
  border-radius:1rem;
  border:none;
  padding-inline:1rem;

  & input{
    border:#fff solid 0.01rem;
    text-indent:5px;
    background-color: var(--middle-color);
    color:#fff;
    &::placeholder{color:#fff}
  }
}

.articleTitleDialog{
  justify-content: center;
  text-align:center;
  margin-top:20px;
}

.articleTitleDialog, .articleInformationDialog{
  margin-bottom:1rem;
  gap:1rem;
  justify-content: center;
}

.article{
width:90%;
height:30px;
}

.dialog_ean, .dialog_hope, .dialog_expiry{
  height:30px;
  width:150px;
}

.dialog__wrap{
  display:flex;
  flex-flow: row wrap;
  justify-content: center;
  gap:1rem;
  margin-bottom:1rem;
}

.stateLabel{
  text-indent:-5px;
}

label{
  color:#fff;
  font-style:italic;
  text-indent:5px;
}

.dialog__col{
  display:flex;
  flex-flow:column nowrap;
}

/* deletionCertainty */
.dialog_areYouCertainWindow{
  margin:auto;
  padding:20px;
  background-color:var(--middle-color);
  border-radius:10px;
  }
  
  .dialog_areYouCertainWindow h1{
  text-align:center;
  font-size:18pt;
  color:#fff;
  margin-bottom:1rem;
}
  
  .flex__row{
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  gap:1rem;
  }

  .confirm-btn{
    padding-block:5px;
    padding-inline:20px;
    background-color:#fff;
    color:var(--darkest-color);
    cursor:pointer;
    border-radius:10px;
  }

/* LOGIN */

.login_handler_container{
  margin:auto;
  width:250px;
  padding:20px;
  background-color:#fff;
  border-radius:1rem;
}

.login_handler_container::backdrop{
  background-color:#888;
}

.login_handler_content{
  display:flex;
  flex-flow:column nowrap;
  gap:1rem;
  align-items: center;
}

.login_handler-username, .login_handler-password{
  border:var(--middle-color) solid 0.1rem;
  color:var(--middle-color);
  text-indent:5px;
}

.login_handler-submit{
  background-color:var(--darkest-color);
  color:#fff;
  padding:5px 20px;
  border-radius:5px;
  cursor:pointer;
}

/* PAGING */

.paging-btn{
  padding:15px;
  text-align:center;
  border-radius:10px;
  background-color:var(--middle-color);
  width:50px;
  height:50px;
  cursor:pointer;
}

.paging-text{
  color:var(--middle-color);
  padding:15px 0;
}