/*******************************Calendar Top Navigation*********************************/

div.calendar * {
  font-size: 12pt;
}

div.calendar{
    border: 2px solid #eee;
    padding:5px;
    /* width: 33.33%;       */
    position: absolute;
    top: 0; left: 0;
    background-color: white;

  }
   
  div.calendar div.box, div#timeline div.box{
      position:relative;
      top:0px;
      left:0px;
      width:100%;
      height:auto;
      background-color:   #bbb ;     
      text-align: center; color: white;
      font-size:12pt;
  }

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

  div.calendar div.header{
    color:#FFF;
    font-size:12pt;
}
   
   
  div.calendar div.header .prev{
      left:15px; top: 33%; transform: translateY(-30%);
  }
   
  div.calendar div.header .next{
      right:15px;  top: 33%; transform: translateY(-30%);
  }

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

  div.calendar li.daybox-today {background-color: #eee !important; color: white !important;}
  div.calendar li.daybox-today:hover {background-color: #ddd !important;}
   
  div.calendar li.daybox:hover {background-color: #ddd;}
   
   
  /*******************************Calendar Content Cells*********************************/
  

  div.calendar_collector {position: relative; width: 100%; overflow: hidden; display: block; margin-bottom: 25px;}
   
   
  div.calendar ul.label{
      float:left;
      margin: 0px !important;
      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: 12pt;
      background-color: transparent;
      width: calc(14.28%);

  }
   

   
  div.calendar ul.dates{
      float:left;
      margin: 0px !important;
      padding: 0px;
      width: 100%;
  }
   
  /** overall width = width+padding-right**/
  div.calendar ul.dates li{
      margin:1px;
      padding:0px;
      line-height:80px;
      vertical-align:middle;
      float:left;
      list-style-type:none;
      width: calc(14.28% - 2px);
      height:80px;
      font-size: 12pt;
      background-color: rgb(229, 248, 227);
      color:#000;
      text-align:center; 
      display: flex; justify-content: center; align-items: center;
      overflow: hidden;
  }
   

  div.calendar ul.dates li span {z-index: 5; font-size: 14pt; width: 40px; height: 40px; background-color: rgba(255,255,255, 0); border-radius: 50%; display: flex; justify-content: center; align-items: center;}


  :focus{
      outline:none;
  }

  div.calendar ul.dates li.daybox div.daybox-bg-full,
  div.calendar ul.dates li.daybox div.daybox-bg-l,
  div.calendar ul.dates li.daybox div.daybox-bg-r  {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
   
  div.calendar ul.dates li.daybox div.daybox-bg-l {width: 100%; clip-path: polygon(0 0, 100% 0, 0 100%);}
  div.calendar ul.dates li.daybox div.daybox-bg-r {left: 0%; clip-path: polygon(0 100%, 100% 100%, 100% 0);}



  div.clear{
      clear:both;
  }   

  div#timeline {
    float: left;
    width: 100%;
    border: 2px solid #eee;
    padding:5px;
    width: 100%;
  }

  div#timeline div.slot {
    width: calc(25% - 4px);
    background-color: #f9f9f9;
    margin: 2px;
    display: block; 
    float: left;
    padding:5px;
    font-size: 10pt; font-weight: bold;
    cursor: pointer;
  }

  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: #eee;
    cursor: pointer;
  }


  div#timeline div.slot-contract {
    background-color: #fbd39b !important;; cursor: unset;
  }

  div.calendar li.slot-contract  div.daybox-bg-full {
    background-color: #fbd39b !important;; cursor: unset;
  }

  div.calendar li.slot-contract-first div.daybox-bg-r {
    background-color: #fbd39b !important;
  }

  div.calendar li.slot-contract-last div.daybox-bg-l {
    background-color: #fbd39b !important;
  }

  div#timeline div.slot-selected {
    background-color: #70d963 !important;
  }

  div.calendar li.slot-selected div.daybox-bg-full {
    background-color: #70d963 !important;
  }

  div.calendar li.slot-selected-first div.daybox-bg-full, div.calendar li.slot-selected-last div.daybox-bg-full {
    background: none !important;
  }

  div.calendar li.slot-selected-first.slot-contract div.daybox-bg-full, div.calendar li.slot-selected-last.slot-contract div.daybox-bg-full {
    background: #fbd39b !important;
  }

  div.calendar li.slot-selected-first div.daybox-bg-r {
    background-color: #70d963 !important; 
  }

  div.calendar li.slot-selected-last div.daybox-bg-l{
    background-color: #70d963 !important; 
  }

  div#timeline div.slot-blocked {
    background-color: #ff9fa7 !important;; cursor: unset;
  }

  div.calendar li.slot-blocked  div.daybox-bg-full{
    background-color: #ff9fa7 !important;; cursor: unset;
  }

  div.calendar li.slot-blocked-first div.daybox-bg-r {
    background-color: #ff9fa7 !important; 
  }

  div.calendar li.slot-blocked-last div.daybox-bg-l{
    background-color: #ff9fa7 !important; 
  }


  div.calendar li.slot-selected-last div.daybox-bg-l {
    background-color: #70d963 !important;
  }

  div.calendar li.slot-contract-first.slot-selected.slot-selected-last div.daybox-bg-r {
    background-color: #fbd39b !important;
  }

  div.calendar li.slot-contract-first.slot-selected div.daybox-bg-r {
    background-color: #70d963 !important;
  }

  div.calendar li.slot-contract-last.slot-selected div.daybox-bg-l {
    background-color: #70d963 !important;
  }

  div.calendar li.slot-contract-last.slot-selected.slot-selected-first div.daybox-bg-l {
    background-color: #fbd39b !important;
  }

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

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


  li.daybox.slot-past div.daybox-bg-r {display: none !important;}


  @media only screen 
and (min-device-width : 200px) 
and (max-device-width : 700px) 
and (orientation : portrait) { 
  div#timeline div.slot {
    width: calc(25% - 4px);
    font-size: 8pt; font-weight: bold;
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    height: 60px;
  }
}