/*******************************Calendar Top Navigation*********************************/
div#calendar{
    width: 100%;
    padding:0px;
    width: 100%;      
  }
   
  div#calendar div.box-calendar, div#timeline div.box{
      position:relative;
      top:0px;
      left:0px;
      width:100%;

      height:auto;
      background: none;   
      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; cursor: pointer;}
  div#calendar li.daybox-past,  div#calendar li.daybox-past:hover {
    opacity: 0.7 !important; cursor: unset; color: #bbb !important;
  } 

  div#calendar li.daybox-past.daybox-blocked,  div#calendar li.daybox-past.daybox-blocked:hover {
    opacity: 1 !important; cursor: unset; background-color: rgba(255,0,0,0.7) !important; color: white! important;
  } 

  div#calendar li.daybox-free,  div#calendar li.daybox-free:hover {
    opacity: 1 !important; cursor: unset; background-color: rgb(150, 224, 140) !important; color: white! important;
  } 

  div#calendar li.daybox-today { color: #000 !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: #4c8ecc; }
  div#calendar li.daybox-today .bg-circle {border: 1px solid rgba(255,255,255 0.3);}
  div#calendar li.daybox-selected {color: #fff !important;;}
  div#calendar li.daybox-selected .bg-circle {background-color: rgba(255,255,255 0.3) !important; border: 3px solid #4c8ecc; color: #fff !important;;}
  div#calendar li.daybox:hover:not(.daybox-past) .bg-circle {background-color: rgba(255,255,255 0.3) !important; border}
  
  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:45px;
      vertical-align:middle;
      float:left;
      list-style-type:none;
      width: calc(14.28% - 4px);
      height:45px;
      font-size:12pt;
      border-radius: 0.25rem;
      color:#000;
      text-align:center; 
  }
   
  div#calendar ul.dates li.daybox{
    color:#000; 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: #333;
    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 span {
    color: #fff;
  }

  div#timeline div.slot.slot-selected:not(.slot-blocked):not(.slot-past) {
    border: 1px solid #fff;
    background-color: #4c8ecc;
    color: #000;    
    filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.7))
    drop-shadow(0 0 6px rgb(255, 153, 0))
    drop-shadow(0 0 6px rgba(255, 153, 0, 0.5))
  }
  
  div#timeline div.slot.slot-selected:not(.slot-blocked):not(.slot-past) span { 
    color: #000;  
  }

  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: #4c8ecc; color: black; border-color: #4c8ecc;
  }

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

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

  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: 1; background-color: #eee; color: #555; cursor: not-allowed;
  } 

  div#timeline div.slot-past span,  div#timeline div.slot-past:hover span, div#calendar li.daybox.mask span {
    color: #555; 
  } 


  @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); }
}