/* Date / Time menu */

/* overall menu */
#calendarArea {
	padding: 0;
}

/* Calendar menu side column */
.datemenu-calendar-column {
	spacing: 5px;
}

/* let's bring back issue #1 */
.datemenu-calendar-column:ltr { padding-left: 0; }
.datemenu-calendar-column:rtl {	padding-right: 0; }

.datemenu-calendar-column .datemenu-displays-box {
	spacing: 5px;
}


/* today header button */
.datemenu-today-button {
	color: TEXT-SECONDARY-COLOR;
	background-color: none;
	border-radius: 12px;
}

.datemenu-today-button:hover {
	transition-duration: 100ms;
	background-color: SECTION-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
}

.datemenu-today-button:focus {
	transition-duration: 100ms;
	background-color: ACCENT-OPACITY-COLOR;
	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}

/* weekday label */
.day-label {
	font-weight: 600;
}

/* date label */
.date-label {
	font-weight: 700;
}


/* Calendar */

.calendar {
	border-radius: 14px;
	background-color: SECTION-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
	padding: 5px;
}

/* month header */
.calendar-month-header .calendar-month-label {
	color: TEXT-PRIMARY-COLOR !important;
	padding: 0;
	background-color: transparent; /* 46+ */
}

.calendar-month-header .pager-button {
	height: 2.2em;
	width: 2.2em;
}

/* day of week heading */
.calendar-day.calendar-day-heading,
.calendar .calendar-day-heading /* 46+ */ {
	color: TEXT-SECONDARY-COLOR;
	background-color: transparent;
}

/* day buttons, prev/next month button */
.calendar-day,
.calendar-month-header .pager-button {
	color: TEXT-PRIMARY-COLOR;
	background-color: transparent; /* 46+ */
	border-radius: 10px;
	padding: 0;
	transition-duration: 100ms;
}

.calendar-day:hover,
.calendar-day:selected:hover,
.calendar .calendar-day-heading:hover, /* 46+ */
.calendar .calendar-day-heading:selected:hover, /* 46+ */
.calendar .calendar-month-header .pager-button:hover {
	background-color: ACCENT-DISABLED_HOVER;
	color: TEXT-PRIMARY-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.calendar-day:focus,
.calendar .calendar-day-heading:focus, /* 46+ */
.calendar .calendar-month-header .pager-button:focus {
	background-color: ACCENT-OPACITY-COLOR;
	box-shadow: inset 0 0 0 1.5px ACCENT-SECONDARY-COLOR !important;
}

.calendar-day:selected,
.calendar .calendar-day-heading:selected /* 46+ */ {
	background: ACCENT-DISABLED_HOVER;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

/* today button */
.calendar-today,
.calendar-today:selected {
	background-color: BUTTON-COLOR;
	color: BUTTON-TEXT-COLOR !important;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.calendar-today:hover,
.calendar-today:selected:hover,
.calendar-today:focus,
.calendar-today:selected:focus {
	background-color: BUTTON_HOVER;
} 

/* if day has event */
.calendar .calendar-day-with-events {
	background-image: url("calendar-event.svg");
	background-size: contain;
	font-weight: 700;
}

.calendar .calendar-today.calendar-day-with-events {
	background-image: url("calendar-event-today.svg");
	background-size: contain;
}

/* weekend day button */
.calendar .calendar-nonwork-day, /* up to 44 */
.calendar-weekend { /* 45+ */
	color: TEXT-SECONDARY-COLOR;
}

/* other month day button */
.calendar .calendar-other-month-day, /* up to 44 */
.calendar-other-month { /* 45+ */
	color: TEXT-DISABLED-COLOR !important;
}

.calendar .calendar-other-month-day.calendar-day-with-events, /* up to 44 */
.calendar-other-month.calendar-day-with-events { /* 45+ */
	background-image: url("calendar-event-disabled.svg");
	background-size: contain;
}

.calendar .calendar-week-number {
	background-color: ACCENT-DISABLED-COLOR;
	color: TEXT-SECONDARY-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
	border-radius: 7px;
}


/* Events / World clocks / weather section */

.events-button,
.world-clocks-button,
.weather-button {
	background-color: SECTION-COLOR;
	color: TEXT-SECONDARY-COLOR;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.events-button:hover,
.world-clocks-button:hover,
.weather-button:hover {
	background-color: ACCENT-DISABLED-COLOR;
}

.events-button:focus,
.world-clocks-button:focus,
.weather-button:focus {
	background-color: ACCENT-OPACITY-COLOR;
	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}

.events-button:active,
.world-clock-button:active,
.weather-button:active {
	background-color: ACCENT-DISABLED_HOVER;
}

/* header */
.weather-button .weather-header,
.events-button .events-title,
.world-clocks-button .world-clocks-header {
	color: TEXT-SECONDARY-COLOR;
}


/* Events section */
.events-button .events-list {
	color: TEXT-PRIMARY-COLOR;
}
.events-button .event-time {
	color: TEXT-SECONDARY-COLOR;
}
.events-button .events-box .events-list .event-placeholder { /* if no events, 46+ */
	color: TEXT-DISABLED-COLOR;
}

/* World clocks section */
.world-clocks-button .world-clocks-time {
	color: TEXT-PRIMARY-COLOR;
}

.world-clocks-button .world-clocks-city,
.world-clocks-button .world-clocks-timezone {
	color: TEXT-SECONDARY-COLOR;
}


/* Weather section */
.weather-button .weather-forecast-time {
	color: TEXT-SECONDARY-COLOR;
}