/*******************************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:   #444 ;     
      text-align: center; color: white;
      font-size:16pt;
  }

  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: white;
      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:#FFF;
  }
   
  div#calendar div.header span.title{
      color:#FFF;
      font-size:16pt;
  }

  div#calendar div.header{
    color:#FFF;
    font-size:16pt;
}
   
   
  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 {
    background-color: #eee; opacity: 0.7; cursor: unset;
  } 

  div#calendar li.daybox-today {background-color: #a6a6a6 !important; color: white !important;}
   
  div#calendar li.daybox:hover {background-color: #ddd;}
   
   
  /*******************************Calendar Content Cells*********************************/
  
   
   
  div#calendar ul.label{
      float:left;
      margin: 0px;
      width: 100%;
  }
   
  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:80px;
      vertical-align:middle;
      float:left;
      list-style-type:none;
      width: calc(14.28% - 4px);
      height:80px;
      font-size:25px;
      background-color: #444;
      border-radius: 0.25rem;
      color:#000;
      text-align:center; 
  }
   
  :focus{
      outline:none;
  }
   
  div.clear{
      clear:both;
  }   

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

  div#timeline div.slot {
    width: calc(12.5%);
    background-color: #333;
    display: block; 
    float: left;
    padding: 8px;
    font-size: 10pt; font-weight: bold;
    text-align: center;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }

  div#timeline div.slot img {
    width: 20px; float: left; margin-right: 5px; opacity: 0.2;
  }

  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: #0c6900
  }

  div#timeline div.slot-blocked,  div#timeline div.slot-blocked:hover {
    background-color: #7c000a; cursor: unset;
  }

  div#timeline div.slot-past,  div#timeline div.slot-past:hover, div#calendar li.daybox.mask {
    background-color: #eee; opacity: 0.3; cursor: unset;
  } 


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

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