@import url("../js/dhtmlxScheduler_v5.0.0/codebase/dhtmlxscheduler_flat.css");


/* Overwrite styles for nav bar. This is copied from dhtmlxscheduler.css */
.dhx_cal_button .dhx_left_bg {
  width: 1px;
  overflow: hidden;
  height: 17px;
  z-index: 20;
  top: 0px;
}
.dhx_cal_prev_button {
  width: 29px;
  height: 17px;
  left: 50px;
  cursor: pointer;
  border-radius: 2px;
}
.dhx_cal_next_button {
  width: 29px;
  height: 17px;
  left: 80px;
  cursor: pointer;
  border-radius: 2px;
}
.dhx_cal_today_button {
  width: 75px;
  height: 17px;
  left: 112px;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  border-radius: 2px;
}

.dhx_cal_tab {
  width: 59px;
  height: 19px;
  text-align: center;
  text-decoration: underline;
  padding-top: 2px;
  cursor: pointer;
  background-color: #D8E1EA;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}


.dhx_cal_tab.active {
  text-decoration: none;
  cursor: default;
  font-weight: bold;
  border: 1px dotted #586A7E;
  border-bottom: 0;
  background-color: #C2D5FC;
}
.dhx_cal_tab,
.dhx_cal_date,
.dhx_cal_today_button,
.dhx_cal_prev_button,
.dhx_cal_next_button {
  color: #454544;
  height: 30px;
  line-height: 30px;
  background: none;
  border: 1px solid #CECECE;
}
.dhx_cal_today_button {
  color: #747473;
  left: auto;
  right: 123px;
  background: none;
  text-decoration: none;
  width: 80px;
  font-size: 12px;
  font-weight: bold;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 2px;
}
.dhx_cal_prev_button,
.dhx_cal_next_button {
  left: auto;
  width: 46px;
  border-color: #999;
}
.dhx_cal_prev_button {
  right: 61px;
  background: url(./mobile/images/arrow-left.svg) no-repeat center center;
}
.dhx_cal_next_button {
  right: 14px;
  background: url(./mobile/images/arrow-right.svg) no-repeat center center;
}
.dhx_cal_tab {
  color: #747473;
  width: 60px;
  padding-top: 0;
  text-decoration: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  font-weight: bold;
  font-size: 12px;
}
.dhx_cal_tab.active {
  background-color: #F0EDE7;
  color: #454544;
  border: 1px solid #CECECE;
  text-shadow: 0px 1px 0px white;
}
.dhx_cal_tab_first {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.dhx_cal_tab_last {
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.dhx_cal_tab_standalone {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0 5px;
}

/* Custom styles overriding dhtmlxscheduler css to match QB styles */
/* Create backgrounds for ALL events ( including timed events ) Copied styles from flat.css to make sure all events look alike */
.dhx_cal_event_clear {
    border: 1px solid transparent;
    background-color: #5B9BE0;
    color: #FFF;
    height: 17px;
    line-height: 17px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    padding-left: 10px;
    cursor: pointer;
    overflow: hidden;
}

.dhx_cal_container div
{
    text-overflow: ellipsis; /* make the event title ellipsise */
    white-space: nowrap;
}
.dhx_month_head
{
    padding-left: 5px; /* match the padding on "+" link to the padding on date */
    font-size: 14px; /* we need the date font to pop more in the month view */
}
.dhx_cal_event_line_start /* rounded start and end of events */
{
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
}
.dhx_cal_event_line_end
{
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

.dhx_cal_event_line.dhx_cal_event_line_end.dhtmlx_calendarEvent {
    padding-top: 2px;
}

.dhx_cal_event_line.dhtmlx_calendarEvent.VisibleBorder,
.dhx_cal_event_line_start.dhtmlx_calendarEvent.VisibleBorder
{
    border: 1px solid;
    border-color: rgba(0,0,0, 0.5);
}

.dhtmlx_calendarEvent.VisibleBorder > .dhx_title
{
    border: 1px solid;
    border-bottom: none;
    border-color: rgba(0,0,0, 0.5);
}

.dhtmlx_calendarEvent.VisibleBorder > .dhx_body
{
    border: 1px solid;
    border-top: none;
    border-color: rgba(0,0,0, 0.5);
}

.dhx_cal_event_clear.dhtmlx_calendarEvent.EventWarning {
    padding-left: 5px;
}

.dhtmlx_calendarEvent.EventWarning.dhx_cal_event_line_start > * {
    vertical-align: middle;
    line-height: 17px;
    height: 17px;
    display: inline-block;
}

.dhtmlx_calendarEvent.EventWarning > .ErrorImg,
.dhtmlx_calendarEvent.EventWarning > .dhx_title > .ErrorImg
{
    background: url(./themes/classic/images/icons/calendar_error.svg) no-repeat;
    border: none;
    padding-left: 15px;
    padding-right: 3px;
    height: 15px;
    margin-top: -3px;
}

.dhtmlx_calendarEvent.NoRightCorner.dhx_cal_event_line_end
{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.dhtmlx_calendarEvent.NoLeftCorner.dhx_cal_event_line_start
{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.dhx_now > * /* highlight for "Today" */
{
    background-color: rgba(116, 72, 157, 0.08) !important;
}
.dhx_scale_holder_now 
{
    background-image: url(themes/classic/images/databg_now.png);
}
.dhtmlx_calendarEvent  /* override class for all day and multi-day events */
{
    color: #000!important;
    text-shadow: none;
    font-size: 13px;
    padding-top: 2px;
}
.dhx_cal_event .dhx_body, .dhx_cal_event .dhx_header, .dhx_cal_event .dhx_title {
    color: #000;
}
.dhtmlx_calendarEvent > div
{
    cursor: pointer!important;
}
.dhtmlx_calendarEvent > img,
.dhtmlx_calendarEvent > .dhx_body > img /* Align all the event related text/images  */
{
    vertical-align: bottom;
}

/* 
begin responsive view. (width < breakpoint defined in dhtmlCalendar.js).
classes get added to appropriate dom elements in function makeResponsive(), dhtmlxCalendar.js
*/

.dhx_cal_container.qb_cal_resp.dhx_scheduler_day  .dhx_cal_date
{
    font-size:20px !important;
}

.dhx_cal_container .dhx_cal_date {
    color: #000 !important;
    font-size:16px !important;
    font-weight: 600;
    letter-spacing: 0;
    left: -7px;
}

.dhx_cal_container.qb_cal_resp .dhx_cal_prev_button {
  width: 25px !important;
  height: 22px !important;
  cursor: pointer !important;
  right:30px !important;
  display: table !important;
}
.dhx_cal_container.qb_cal_resp .dhx_cal_next_button {
  width: 25px !important;
  height: 22px !important;
  cursor: pointer !important;
  right:5px !important;
  display: table !important;
}
.dhx_cal_container.qb_cal_resp .dhx_cal_today_button 
{
    width: 48px !important;
    height: 22px !important;
    margin-right: -61px !important;
    display: table !important;
    text-decoration: none;
}
.dhx_cal_container .dhx_cal_today_button {
    font-size: 14px !important;
    color: #000;
    font-weight: normal;
    border-color: #999;
}

.dhx_cal_container.qb_cal_resp .dhx_cal_tab 
{
    width: 35px !important;
    height: 33px !important;
    cursor: pointer !important;
    border: 0;
    background-repeat: no-repeat;
    background-color: #fff;
    border-left: 5px solid #fff;
    background-position: 5px 5px;
    margin-left: -14px;
}
.dhx_cal_container.qb_cal_resp .dhx_cal_tab.active {
    background-color: #f4f1f8;
}

.dhx_cal_container.qb_cal_resp .dhx_cal_tab:last-of-type {
    width: 30px !important;
}

.dhx_cal_container.qb_cal_resp .dhx_cal_tab[name=day_tab]
{
    background-image: url(mobile/images/icon-day.svg) !important;
}

.dhx_cal_container.qb_cal_resp .dhx_cal_tab[name=day_tab].active 
{
	background-image: url(mobile/images/icon-day-active.svg) !important;
}

.dhx_cal_container.qb_cal_resp .dhx_cal_tab[name=week_tab]
{
    background-image: url(mobile/images/icon-week.svg) !important;
}
.dhx_cal_container.qb_cal_resp .dhx_cal_tab[name=week_tab].active
{
	background-image: url(mobile/images/icon-week-active.svg) !important;
}
.dhx_cal_container.qb_cal_resp .dhx_cal_tab[name=month_tab]
{
    background-image: url(mobile/images/icon-month.svg) !important;
}
.dhx_cal_container.qb_cal_resp .dhx_cal_tab[name=month_tab].active 
{
	background-image: url(mobile/images/icon-month-active.svg) !important;
}
.dhx_cal_container.qb_cal_resp .dhx_cal_tab_first,
.dhx_cal_container.qb_cal_resp .dhx_cal_tab_last,
.dhx_cal_container.qb_cal_resp .dhx_cal_tab_standalone,
.dhx_cal_container.qb_cal_resp .dhx_cal_tab_active 
{
  -webkit-radius: 0px !important;
  -webkit-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
  border-radius: 0px !important;
  padding:3 3 3 3 !important;
}

/*Min-width supported for calendars on full page views ( stand alone reports and table dashboards ) */
.ViewOuter > .dhx_cal_container {
    min-width: 500px;
}

.dhx_cal_container,
.dhx_cal_date, 
.dhx_cal_next_button, 
.dhx_cal_prev_button, 
.dhx_cal_tab,
.dhx_cal_tab.active, 
.dhx_cal_today_button,
.dhx_scale_bar,
.dhx_cal_event .dhx_body, .dhx_cal_event_line,
.dhx_cal_navline .dhx_cal_date,
.dhx_month_head,
.dhx_cal_event_clear,
.dhx_scale_hour {
    font-family: 'Gibson-Regular', Helvetica, Arial, Sans-Serif;
}

/*QB-1698: the day header in month view has no click action, use a default cursor*/
.dhx_month_head {
    cursor: default;
}

.printHeader 
{
    display: none;
}

.dhx_cal_container .calendar-month .dhx_month_head, 
.dhx_cal_container .calendar-month .dhx_month_body {
    border-color: #ccc;
}
.dhx_cal_container .calendar-month .dhx_month_head {
    text-align: left;
}

.dhx_cal_container .calendar-month .DateLink {
    color: #000;
    font-size: 16px;
}
.dhx_cal_container .dhx_scale_bar {
    color: #000;
    font-size: 14px;
}
.dhx_cal_container .calendar-month.dhx_before .DateLink {
    color: #ccc;
}

.dhx_cal_container .dhx_month_link {
    text-align: left;
    overflow: hidden;
}
.dhx_cal_container .dhx_month_link > a {
  font-size: 12px;
  color: #1b99ff;
  padding-left: 4px;
  padding-right: 1px;
}

.dhx_cal_container .dhx_cal_header {
    border-top: 2px solid #aaa;
    margin-top: -1px;
}

.dhx_multi_day_icon, .dhx_multi_day_icon_small {
    display: none;
}

.dhx_cal_container.allowAdd .calendar-month,
.dhx_cal_container.allowAdd .calendar-week-day {
    cursor: pointer;
}

/* default background color for timed and multi day events */
.dhx_cal_event.dhtmlx_calendarEvent .dhx_body, 
.dhx_cal_event.dhtmlx_calendarEvent .dhx_header, 
.dhx_cal_event.dhtmlx_calendarEvent .dhx_title,
.dhx_cal_event_line.dhtmlx_calendarEvent,
.dhx_cal_event_line_start.dhtmlx_calendarEvent {
    background-color: #eaeaea;
}

/* border radius */
.dhx_cal_event.dhtmlx_calendarEvent .dhx_title {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255, .5);
}

.dhx_cal_event.dhtmlx_calendarEvent .dhx_body {
    padding-bottom: 4px;
}

.dhx_cal_event.dhtmlx_calendarEvent .dhx_body {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.dhx_cal_container .drag_marker {
    background-color: rgba(116, 72, 157, 0.25);
}

.dhx_cal_event.dhtmlx_calendarEvent.Resizable .dhx_footer {
    background-image: url(themes/classic/images/event_handle.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.dhx_cal_event.dhtmlx_calendarEvent.Dark.Resizable .dhx_footer {
    background-image: url(themes/classic/images/event-handle_light.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.dhx_cal_event.dhtmlx_calendarEvent:not(.Resizable):hover .dhx_footer {
    background-image: none;
}

.dhx_cal_event.dhtmlx_calendarEvent.Movable .dhx_title {
    cursor: move !important;
}
.dhx_cal_event.dhtmlx_calendarEvent.Resizable .dhx_footer {
    cursor: row-resize !important;
}
.dhx_cal_event_line.dhtmlx_calendarEvent.Dragging,
.dhx_cal_event_line_start.dhtmlx_calendarEvent.Dragging {
    cursor: -webkit-grabbing !important;
    cursor: -moz-grabbing  !important;
    cursor: grabbing !important;
}

.calendarReportError {
    padding: 10px 0;
}