/* 
 * calendar.css 
 */

 

#calendar_main {

    position: relative;

    align-self: flex-start;

    top:0 !important;
    left:0 !important;
    width:100%;
    
    text-align:left;
    
    margin: 0;
    
    background-color: white;
 }
 

 .calendar {

    position:relative;

    list-style-type: none;

  }



 
.calendar > * {

    display:grid;
    position:absolute;

}



  #calendar_panel {

    background-color: white;
    height:100vh;
  }





  #calendar_list {
    
    position:absolute;
    height:82%;
    width:100%;
 
    left:0px;

    margin-bottom:300px;
    overflow-y: scroll;    

  }

  
@media screen and (max-height: 649px) {
  #calendar_list {
    margin-bottom:400px;
  }

}


  
  .each_day {
  
    display:inline-flex;
    align-items: center;


    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--LEEDZ_DARKGRAY);
    background-color: var(--LEEDZ_GRAY);

    margin: 4px 0px;
    padding: 6px;

    width:95%;
  }





.leed_thumbnail {

    position:fixed;
    display:flex;
    text-align: start;

    opacity: 0;

    width: max-content;
    height: max-content;

    padding: 10px 16px;

    color:green;
    background-color:white;
    border-radius: 20px;

    font-family: var(--FONT_1);
    font-size: 1em;
}



  .each_day > .dateSquare {

    display:grid;
    width: max-content;
    justify-content: center;
    text-align: center;
    
    background-color:var(--LEEDZ_GREEN);
    border-radius: 6px;

    margin-right:10px;

    padding-bottom:6px;
    padding-left:6px;
    padding-right:8px;
    padding-top:4px;

    
    font-family: var(--FONT_1);
    color:black;
    font-size:2em;
    font-weight: bold;

    width:50px !important;
}


  .each_day > .dateSquare > span {
    font-size:small;
    color:black;
    font-weight:400;
  }