/*
ph9datepicker-theme.css
=======================
This file is for the styling of the ph9 date picker!
feel free to modify this file as seems fit, unless it's
the global version of this file, if it is then don't touch!
*/


/*
DESKTOP / DEFAULT STYLING
=========================
All the stlying that is applied by default
or used on desktop only!
	- THIS CSS FILE ISN'T MOBILE FIRST!
*/

	/* Modify the style of the date input! */
		.ph9-date
		{
			/*
			By default to hide the input format (10/10/10) on date fields we set the opacity to 0, we then set the ph9-date opacity to 1,
			so when the webpage loads it doessn't just look like a box suddenly appears, we add a transition to the opacity, feel free to
			remove, or modify as required.
			*/

				-webkit-transition : opacity 0.6s;
				     -o-transition : opacity 0.6s;
				        transition : opacity 0.6s;
		}

	/* Background Overlay for Date Picker style*/
		.ph9-date-picker-wrapper .background-fill
		{
			background-color: black;
			opacity         : 0.7  ;
		}

	/* Date picker inner style (The actual date picker! We also modify the input of the date inputter) */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner,
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr input
		{
			background-color : #222831;
			font-size        : 1em    ;
		}

	/* Directly style the input date field */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr input
		{
			font-weight: bold;
		}

	/* Bottom Buttons Style, Month Buttons Style */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection .buttons-wrapper a
		{
			color: #eeeeee;

			-webkit-transition : background-color 0.25s;
			     -o-transition : background-color 0.25s;
			        transition : background-color 0.25s;
		}

	/* Month Selection Buttons Style */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table .month-display-picker a
		{
			color: #eeeeee;

			padding-bottom: 15px;
			padding-top: 15px;

			-webkit-transition : background-color 0.25s;
				 -o-transition : background-color 0.25s;
					transition : background-color 0.25s;
		}

	/* Bottom Buttons Hover Effect Style, Month Buttons Hover Effect Style */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection .buttons-wrapper a:hover,
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table .month-display-picker a:hover
		{
			background-color : #393e46;
			cursor           : pointer;
		}

	/* Table Head Style and Date Picker Input Style! */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr th,
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr input
		{
			color: #eeeeee;
			text-align: center;
		}

	/* Table Head Space Style (The Space between the elements ) */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table .space
		{
			width : 100%;
			height: 25px;
		}

	/* Table Head Arrow Buttons Style */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr th .arrow-buttons
		{
			color: #eeeeee;

			-webkit-transition : opacity 0.4s;
			     -o-transition : opacity 0.4s;
			        transition : opacity 0.4s;

			/* Don't allow peopel to highlight! */
				-webkit-touch-callout: none; /* iOS Safari */
			      -webkit-user-select: none; /* Safari */
			       -khtml-user-select: none; /* Konqueror HTML */
			         -moz-user-select: none; /* Old versions of Firefox */
			          -ms-user-select: none; /* Internet Explorer/Edge */
			              user-select: none; /* Non-prefixed version */
		}

	/* Table Head Buttons Hover Style */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection .arrow-buttons:hover
		{
			opacity: 0.7;
			cursor : pointer;
		}

	/* Table Head Arrow Buttons Style */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr th .header-date-link
		{
			color: #eeeeee;

			padding-left  : 6px;
			padding-right : 6px;

			-webkit-transition : opacity 0.4s;
			     -o-transition : opacity 0.4s;
			        transition : opacity 0.4s;
		}


	/* Table Head Arrow Buttons Style */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr th .header-date-link:hover
		{
			opacity: 0.7    ;
			cursor : pointer;
		}

	/* Day Picker All Style For TD Elements (Days, Dates, Month selections)*/
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr td
		{
			color: #eeeeee;

			text-align: center;

			-webkit-transition : background-color 0.25s;
				 -o-transition : background-color 0.25s;
					transition : background-color 0.25s;
		}

	/* Day Picker All Days Style */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr .day
		{
			background-color : inherit;
			height           : 40px   ;
			width            : 2%     ;
		}

	/* Day Picker All Days Hover Effect */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr td:hover
		{
			background-color: #393e46;
		}

	/* Day Picker Active Day Colours */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr .active
		{
			color            : #222831;
			background-color : #eeeeee;

			/* If you want previous/next month selections to retain the opacity of 1 instead of inheriting the opacity of .old/.new then add this! */
				/* opacity : 1!important; */

			-webkit-transition : opacity 0.35s;
			     -o-transition : opacity 0.35s;
			        transition : opacity 0.35s;
		}

	/* Day Picker Active Day Hover Effect Colours */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr .active:hover
		{
			background-color : #eeeeee;
			color            : #222831;
			opacity          : 0.8    ;
		}

	/* Last Month and Next Month days styling */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr .old,
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr .new
		{
			opacity: 0.3;
		}