/* VARIABLES */
:root{
  --color-primary: rgba(75, 139, 242, 255);
}

/* NAVIGATION */
.cf-navs {
  background-color: var(--color-primary);
}

/* OVERVIEW STYLES */
/*
cf-overview-panels
cf-overview-dates
cf-overview-names
cf-overview-exercise-lists
*/

.cf-overview-panels {
  display: grid;
  grid-template-columns: 3fr minmax(0, 1fr); /* use minmax here or set minwidth of each element to 0. But this is necessary in order to not hvae overflow. */
  grid-template-rows: 1fr 3fr;
  
  padding: 15px;
}
.cf-overview-dates{
}
.cf-overview-names{
  font-size: 1.5rem;
}
.cf-overview-exercise-lists{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  
  margin: 0;
  font-size: 0.8rem;
}


/* 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;
}*/

/* recipe styles */
/*
.recipes{
  margin-top: 20px;
}
.card-panel.recipe{
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 1px 3px rgba(90,90,90,0.1);
  display: grid;
  grid-template-columns: 2fr 6fr 1fr;
  grid-template-areas: "image details delete";
  position: relative;
}
.recipe img{
  grid-area: image;
  max-width: 60px;
}
.recipe-details{
  grid-area: details;
  margin-top: 6px;
}
.recipe-delete{
  grid-area: delete;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.recipe-delete i{
  font-size: 18px;
}
.recipe-title{
  font-weight: bold;
}
.recipe-ingredients{
  font-size: 0.8em;
}
*/

/* 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;*/
}