/* colours */
:root{
  --primary: #e9e9e9;
  --secondary: gray ;
  --title: red  ;
}

/* layout styles */
nav{
  background: var(--primary);
  /* border-bottom: 10px solid var(--secondary); */
}
nav a{
  text-transform: uppercase;
  color: var(--title);
}
nav a span{
  font-weight: bold;
}
nav .sidenav-trigger{
  margin: 0;
}

/* contact styles */
.contacts{
  margin-top: 20px;
}
.card-panel.contact{
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 1px 3px rgba(90,90,90,0.1);
  display: flex;
  grid-template-columns: 2fr 6fr 1fr;
  grid-template-areas: "image details delete";
  position: relative;
  background: #80cbc4 ;
  align-items: center;
}


/* .contact img{
  width: 20%;
  max-width: 60px;
} */
/* .contact-details{
  width: 50%;
  margin-top: 3px;
} */
/* .contact-options{
  width: 20%;
  position: absolute;
  bottom: 0px;
  right: 0px;
} */

.contact-call{
  grid-area: delete;
  position: absolute;
  top: 0px;
  right: 0px;
}
.contact-call i{
  font-size: 18px;
}

.contact-title{
  font-weight: bold;
}
.contact-numbers{
  font-size: 0.8em;
}

.call_out{
  width: 18px;
}

/* form-styles */
.add-btn{
  background: var(--title) !important;
}
input{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.side-form button{
  background: var(--title);
  box-shadow: 1px 1px 3px rgba(90,90,90,0.2);
}
form .input-field{
  margin-top: 30px;
}

.pk-contact{
  display: flex;
  align-items: center;
  justify-content:space-between;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 1px 3px rgba(90,90,90,0.1);  
  grid-template-columns: 2fr 6fr 1fr;
  grid-template-areas: "image details delete";
  position: relative;
  background: #80cbc4 ;
  align-items: center;
  margin-bottom: 8px;
}

.contact-image{
  width: 60px;
}
.contact-image > img{
  width: 100%;
}
.contact-details{
  display: flex;  
  flex-direction: column;
  flex: 1;
}

.contact-options i{
  justify-content: space-evenly;
  font-size: 18px;
  align-items: center;
  margin-top: 10px;
}

.contact-options{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 18px;
  align-items: center;
}