@media(max-width: 1360px){
  .add-contact-btn{
    width: 100%;
  }
  .contact-list-entry{
    width: 300px;
  }
  .contacts-right{
    padding: 110px 10px;
  }
}

@media(max-width:1215px){
  .contacts-left{
    padding: 32px 10px 0 10px;
  }
  
  .contact-list-entry{
    width: 250px;
  }

}

@media(max-width: 1140px){
  .contacts-title-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .contacts-title-row h1{
    order:1;
    font-size:47px;
  }
  .contacts-title-sub{
    order:2;
    font-size:20px;
  }
  .contacts-title-divider{
    order:3;
    width: 90px;
    height: 3px;
  }
  .contacts-details-name{
    font-size:36px;
  }
  .contacts-details-avatar{
    width: 60px;
    height: 60px;
    font-size: 32px;
  }
  .contact-details{
    gap: 20px;
  }
  
}
@media(max-width:920px){
  .contact-list-entry{
    width: 220px;
  }
}
@media(max-width: 870px){
  
  .contacts-container{
    width: 100%;
  }
  .contacts-left{
    width: 100%;
    padding: 32px 16px 0 16px;
  }
  .contacts-left.close{
    display:none;
  }
  .contacts-left.show{
    display: flex;
  }
  .contact-name{
    font-size:20px;
  }
  .add-contact-btn{
    position:absolute;
    bottom: 120px;
    right:16px;
    width: 56px;
    height:56px;
    border-radius: 50%;
  }
  .add-contact-span{
    display:none;
  }
  .contact-list-entry{
    width: unset;
    padding: 15px 23px;
  }
  .contacts-right{
    display:none;
    width:100%;
    z-index: 9999;
    padding: 32px 16px;
    overflow-y: auto;
  }
  .contacts-right.show{
    display:flex;
    z-index:100;
  }

  .contacts-right.close{
    display:none;
  }
  .contacts-details-info{
    padding:0;
  }
   .contacts-details-actions{
    display:none;
  }

  .contact-details-container{
    height: 100%;
    overflow:hidden;
  }

  .contacts-details-actions-responsive{
    display: flex;
    flex-direction:column;
    background-color: white;
    gap:14px;
    padding:16px;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
    border-top-left-radius: 20px;
    border-top-right-radius:20px;
    border-bottom-left-radius:20px;
    position:fixed;
    right: 0;
    bottom: 115px;
    transition: transform 0.125s ;
    transform:translateX(100%);
  }

  .contacts-details-actions-responsive.show{
    transform: translateX(0);
  }
 
  .btn-more{
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #2a3647;
    width: 56px;
    height: 56px;
    border-style: none;
    border-radius: 50%;
    position: absolute;
    bottom: 120px;
    right: 16px;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
    cursor: pointer;
  }
  .btn-back{
    width:32px;
    height:32px;
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items: center;
    border-style: none;
    background-color: #f6f7f8;
    cursor: pointer;
    position:absolute;
    top: 128px;
    right: 16px;
  }
  .btn-back:hover{
    background-color:#d1d1d1;
  }
}

@media (max-width: 400px){
  .contacts-container{
    padding-bottom: 80px;
  }

  .btn-more{
    bottom: 80px;
  }
  .contact-list-entry{
    padding: 10px 14px;
    gap: 16px;
  }
}

@media(max-width: 350px){
  .btn-more{
    right: 4px;
  }
}