/*******************************Calendar Top Navigation*********************************/
div#calendar{
    width: 100%;
    padding:0px;
    width: 100%;      
  }
   
  div#calendar div.box, div#timeline div.box{
      position:relative;
      top:0px;
      left:0px;
      width:100%;
      height:auto;
      background-color:   #ffffff ;     
      text-align: center; color: white;
      font-size:16pt;
  }

  li.start.title {
    border-bottom: 1px solid #ddd;
  }

  div#timeline div.box{margin-bottom: 2px; }
   
  div#calendar div.header, div#timeline div.header{
      line-height:25px;  
      vertical-align:middle;
      width: 100%;
      height:auto;   
      text-align:center;
      padding: 5px;
      color: #aaa;
      font-size:12pt;
  }
   
  div#calendar div.header a.prev,div#calendar div.header a.next{ 
      position:absolute;
      top:0px;   
      height: 17px;
      display:block;
      cursor:pointer;
      text-decoration:none;
      color:#000;
  }
   
  div#calendar div.header span.title{
      color:#FFF;
      font-size:16pt;
  }

  div#calendar div.box{
    min-height: 75px;
    display: flex; justify-content: center; align-items: center;
}

  div#calendar div.header{
    color:#aaa;
    font-size:16pt;
    display: flex; justify-content: center; align-items: center;
}
   
   
  div#calendar div.header a.prev{
      left:15px; top: 40%; transform: translateY(-50%);
  }
   
  div#calendar div.header a.next{
      right:15px;  top: 40%; transform: translateY(-50%);
  }
   
   
  div#calendar li.daybox {position: relative;}
  div#calendar li.daybox-past,  div#calendar li.daybox-past:hover {
    opacity: 0.7 !important; cursor: unset; color: #bbb !important;
  } 

  div#calendar li.daybox-today { color: white !important;}
  div#calendar li .bg-circle {z-index: -1; width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; border-radius: 50%;}
  div#calendar li.daybox-today {color: black !important; }
  div#calendar li.daybox-today .bg-circle {border: 1px solid black;}
  div#calendar li.daybox-selected .bg-circle {background-color: #fbda2b !important; border: 1px solid #fbda2b;}
  div#calendar li.daybox:hover:not(.daybox-past) .bg-circle {background-color: #fbda2b !important; border: 1px solid #fff; box-shadow: 0 0 10px #fbda2b ;}
  
  div#calendar li.daybox:hover {}
   
   
  /*******************************Calendar Content Cells*********************************/
  
   
   
  div#calendar ul.label{
      float:left;
      margin: 0px;
      width: 100%;
      margin-left: 0 !important;
  }

  div#calendar ul.dates{
    float:left;
    margin: 0px;
    width: 100%;
    margin-left: 0 !important;
}
   
  div#calendar ul.label li{
      margin:0px;
      padding:0px; 
      float:left;
      list-style-type:none;
      height:40px;
      line-height:40px;
      vertical-align:middle;
      text-align:center;
      color:#000;
      font-size: 15px;
      background-color: transparent;
      width: calc(14.28%);
  }
   
   
  div#calendar ul.dates{
      float:left;
      margin: 0px;
      padding: 0px;
      width: 100%;
  }
   
  /** overall width = width+padding-right**/
  div#calendar ul.dates li{
      margin:2px;
      padding:0px;
      line-height:30px;
      vertical-align:middle;
      float:left;
      list-style-type:none;
      width: calc(14.28% - 4px);
      height:30px;
      font-size:12pt;
      border-radius: 0.25rem;
      color:#000;
      text-align:center; 
  }
   
  div#calendar ul.dates li.daybox{
    color:#333; font-weight: bold;
}

  :focus{
      outline:none;
  }
   
  div.clear{
      clear:both;
  }   

  div#timeline {
    margin-top: 15px;
    float: left;
    width: 100%;
    padding:0px;
    width: 100%;
  }



  div#timeline div.slot {
    width: calc(33.33% - 12px);
    background-color: #fff;
    border: 1px solid black; 
    border-radius: 25px;
    margin: 6px;
    display: block; 
    float: left;
    padding: 8px;
    font-size: 10pt; font-weight: bold;
    text-align: center;
  }

  div#timeline div.slot:hover:not(.slot-blocked):not(.slot-past) {background-color: #fbda2b !important; border: 1px solid #fff; box-shadow: 0 0 10px #fbda2b ;}
  

  div#timeline div.slot img {
    width: 20px; float: left; margin-right: 5px; opacity: 0.2; filter: invert(100);
    display: none;
  }

  div#timeline div.slot span {
    float: right;
    font-size: 9pt;
  }

  
  div#timeline div.slot:hover {
    background-color: #999;
    cursor: pointer;
  }

  div#timeline div.slot-selected,  div#timeline div.slot-selected:hover {
    background-color: #fbda2b; color: black; border-color: #fbda2b;
  }

  div.slot span {
    line-height: 120%;
  }

  div.slot span {
    float: left; width: 100%; text-align: center; line-height: 120%;
  }

  div#timeline div.slot-blocked,  div#timeline div.slot-blocked:hover {
    opacity: 0.3; cursor: not-allowed;
  }

  div#timeline div.slot-past,  div#timeline div.slot-past:hover, div#calendar li.daybox.mask {
    opacity: 0.3; cursor: not-allowed;
  } 


  @media only screen 
and (max-device-width : 1023px) 
 { 

  div#timeline div.slot {width: calc(25%); }
}
  @media only screen 
and (min-width : 200px) 
and (max-width : 700px) 
and (orientation : portrait) { 
  div#timeline div.slot {width: calc(100% - 12px); }
}