/*variables*/
:root {
    --bg-main-color: #fff;
    --main: #eaedf0;
    --accent: #0a0a0a;
    --hover: #ebedf0;
    --bg-hover: #0a0a0a;
    --disabled: #ebedf0;
    --selected: #ebedf0;
    --bg-selected: #0a0a0a;
    
  }
  /*styles*/
  /* body {
    background-color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
  } */
  .lvm-calendar-container {
    display: inline-block;
    background-color: var(--bg-main-color);
    border-radius: 25px;
    padding: 0 1em;
    margin-top: 2em;
    box-shadow: 0px 3px 15px rgba(0 0 0 /25%);
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease-in;
    width: 100%;
  }
  .lvm-calendar-container.active{
    opacity: 1;
    visibility: visible;
  }

  header {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
  .header-display {
    display: flex;
    align-items: center;
  }
  .header-display p {
    color: var(--accent);
    margin: 5px;
    font-size: 1.2rem;
    word-spacing: 0.5rem;
    text-transform: capitalize;
  }
  pre {
    padding: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--accent);
  }
  pre.disabled{color:var(--disabled)}
  pre.disabled:hover{cursor: unset;}
  .days,
.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: auto;
  padding: 0 20px;
  justify-content: space-between;
}
.week div,
.days div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 3em;
  border-radius: 100%;
  color: var(--accent);
  transition: all .2s ease-in;
}

  .days div.disabled, 
  .days div.disabled:hover 
   {
    background: var(--bg-main-color);
    color: var(--disabled);
    cursor: unset;
    opacity:0.9;
  }
  .week div {
    opacity: 0.6;
  }
  .current-date:hover,
  .days div:hover {
    background: var(--bg-hover);
    color: var(--hover);
    cursor: pointer;
  }
  .current-date {
    background-color: var(--bg-main-color);
    color: var(--accent);
    border: 1px solid var(--accent);
  }
  
  .selected-date {
    background-color: var(--bg-selected);
    color: var(--selected)!important;
  }
  .display-selected {
    margin-bottom: 10px;
    padding: 20px 20px;
    text-align: center;
  }

  @media screen and (max-width:600px)
  {
    .days,.week{
      padding: 0;
    } 
    .week div, .days div{
      height: 2.5em;
      width: 2.5em;
    }
  }