/******  Window & layouts ******/
BODY
{ 
  top: 1em;
  bottom: 1em;
  right: 1em;
  left: 1em;
  overflow:auto;
}

.toolbar
{ display:none;}

DIV#leftSide
{
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  max-width:220px;
  overflow-y:auto;
}

DIV.colorBox
{ display: inline-block; }

TD DIV.colorBox, TD DIV.colorBox:hover
{ border-color: #fff; }

TABLE#eventsList .colorBox
{ margin-right: 4px; }


/******************************/
/******  Print settings *******/

INPUT#inputFieldTitle {
  width:120px;
}


/******************************/
/******  What to print ********/

#dateRangeFrom, #dateRangeTo
{
  text-align: right;
}

#startingDate, #endingDate
{
  width:auto;
  vertical-align:8px;
}

#labelFrom, #labelTo
{
  vertical-align:8px;
}

TR.todo {
  display:none;
}

/************************/
/******  Buttons ********/

#printButtons {
  position:absolute;
  bottom:0;
  right:0;
}

#printButton
{
  font-weight:bold;
}

/**************************/
/******  RightSide ********/

.divEventsPreview, .divTasksPreview
{
  border:solid black 2px;
  border-radius:5px;
  margin-top:4px;
  margin-bottom:4px;
}

.overdueTasks {
  color:red;
}
.completedTasks {
  font-style:italic;
}

.EventsTasksDate {
  text-indent:20px;
}

DIV#rightSide
{
  position: absolute;
  left:230px;
  top:0;
  bottom:0;
  right:0;
}
  DIV#rightFrame
  {
    position:absolute;
    right:0;
    left:0;
    top:12px;
    bottom:30px;
    background-color:#FFFFFF;
    border-radius:5px;
    border-top: 1px solid #909090;
    border-left: 1px solid #909090;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    padding-left:5px;
    padding-right:5px;
    overflow-y:auto;
  }
    #rightFrameEvents{
    }

    #rightFrameTasks{
    }
    
    
/***********************************************/
/******  Overriding the SchedulerUI.css ********/

DIV#calendarHeader {
  position:relative;
  top:0;
  height:70px;
}

DIV#calendarHeader DIV.dayLabels {
  position:relative;
  width:93%;
  display:flex;
}

DIV#calendarHeader DIV.days {
  position:relative;
  display:block;
  top:0;
  height:33px;
  width:93%;
}

DIV#daysView {
  position:relative;
  top:0;
  display:inline-table;
  width:100%;
}

DIV#daysView DIV.days {
  display:flex;
}

DIV#daysView DIV.day0,
DIV#daysView DIV.day1,
DIV#daysView DIV.day2,
DIV#daysView DIV.day3,
DIV#daysView DIV.day4,
DIV#daysView DIV.day5,
DIV#daysView DIV.day6 {
  position:relative;
  left:0;
  display:inline-block;
}

DIV.event{
  z-index:1;
  border:solid black 2px;
  background-color:white;
  border-radius:5px;
}

/*******************************************/
/******  Overriding the general.css ********/

TABLE.frame{
  width:97%;
  text-align: left;
  background:#dddddd;
  border-radius:8px;
  display:table;
}

SPAN.caption 
{
  background: -webkit-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, #E6E7E6, #dddddd); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, #E6E7E6, #dddddd); /* Standard syntax (must be last) */
}

LABEL {
  margin-left:0;
}

/**************************************************/
/******  Calling print(); from the browser ********/

@media print
{
  .no-print, SPAN.caption, SPAN.weeksHeader SPAN.week1, SPAN.daysHeader SPAN.day1
  {
    display:none;
  }
  
  SPAN.weeksHeader, SPAN.daysHeader {
    border:none;
  }

  DIV#rightSide
  {
    position:static;
    top:5px;
    left:5px;
    width:99%;
  }
  DIV#rightFrame, DIV#rightFrameEvents, DIV#rightFrameTasks
  {
    width:99%;
    height:auto;
  }
  DIV#rightFrame
  {
    border:none;
    overflow:visible;
  }
  
  DIV#calendarHeader {
    width:99.5%;
  }
}