/*
ph9datepicker.css
=================
This file is for the core styling and functionality of the date picker!
please don't modify unless you are adding content or fixing a bug!
*/

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

	/* PH9 date input styling (Applied to Input Field Dates) */
		.ph9-date
		{
			/* Set the opacity to 1 to show the date box */
				opacity: 1;
		}

	/* Remove style from input field (This is where we type the year in!) and style! */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr input
		{
		    background-image : none       ;
		    background-color : transparent;
			border           : none       ;

		    -webkit-box-shadow : none;
		       -moz-box-shadow : none;
		            box-shadow : none;

			display: inline-block;

			width      : 10% ;
			text-align : left;
			min-width  : 5em ;
		}

	/* PH9 date input hover styling (Applied to Input Field Dates) */
		.ph9-date:hover
		{
			cursor: pointer;
		}

	/* Hide the date field so it doesn't display the default format! */
		input[type="date"]
		{
			opacity: 0;
		}

	/* PH9 date picker wrapper styling */
		.ph9-date-picker-wrapper
		{
			display  : block;
			height   : 100% ;
			left     : 0    ;
			position : fixed;
			top      : 0    ;
			width    : 100% ;
		}

	/* Background fill styling (The background of the full screen overlay) */
		.ph9-date-picker-wrapper .background-fill
		{
			height   : 100% ;
			height   : 100vh;
			left     : 0    ;
			position : fixed;
			top      : 0    ;
			width    : 100% ;
			width    : 100vw;
		}

	/* Background fill hover, make sure users know it's clickable */
		.ph9-date-picker-wrapper .background-fill:hover
		{
			cursor: pointer;
		}

	/* Date picker container styling */
		.ph9-date-picker-wrapper .ph9-date-picker-container
		{
			height     : auto    ;
			left       : 50%     ;
			max-width  : 700px   ;
			max-height : 90%     ;
			padding    : 0px     ;
			position   : fixed   ;
			top        : 50%     ;
			width      : 100%    ;
			z-index    : 99999999;

			-webkit-transform: translateX(-50%) translateY(-50%);
			    -ms-transform: translateX(-50%) translateY(-50%);
			        transform: translateX(-50%) translateY(-50%);
		}

	/* Date picker wrapper close styling (What happens when we close the date picker) */
		.ph9-date-picker-wrapper .close
		{
			opacity    : 0    ;
			top        : 100vh;

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

	/* Date picker wrapper inner styling */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner
		{
			padding: 10px;
		}

	/* Date picker outer wrapper styling */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker
		{
			direction : ltr    ;
			width     : 100%   ;

			unicode-bidi : -webkit-isolate;
			unicode-bidi : -moz-isolate   ;
			unicode-bidi : isolate        ;
		}

	/* Date picker content wrapper */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection
		{
			display: block;
		}

	/* Date picker buttons wrapper (displayed at bottom of picker) */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection .buttons-wrapper
		{
			display : block;
			width   : 100%;
		}

	/* Date picker buttons wrapper (displayed at bottom of picker) */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection .buttons-wrapper a
		{
			display        : inline-block;
			padding-bottom : 10px        ;
			padding-top    : 10px        ;
			text-align     : center      ;
			width          : 50%         ;

			/* 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 */
		}

	/* Date picker table style (make the table full width) */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table
		{
			width: 100%;
		}

	/* Date picker table row (make the table row width 100% and fix browser some bugs) */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr
		{
			border-collapse : collapse ;
			border-spacing  : 0        ;
			display         : table-row;
			text-indent     : 0        ;
			width           : 100%     ;
		}

	/* Date picker table headers and cell styling (some of these are overwritten with .day .active .new .old in the theme file) */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr td,
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr th,
		{
			height         : 30px  ;
			padding        : 3px   ;
			text-align     : center;
			width          : 30px  ;
			vertical-align : middle;
		}

	/* Simply make the cursor a pointer when hovering required elements! */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table tr .day:hover,
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table .month-display-picker tbody tr td:hover
		{
			cursor: pointer;
		}

	/* Set the padding and width of the month selections, this is so it is responsive and in rows of 3! */
		.ph9-date-picker-wrapper .ph9-date-picker-container .date-picker-inner .date-picker .selection table .month-display-picker tbody tr td
		{
			width          : 33.333vw;
			padding-top    : 15px    ;
			padding-bottom : 15px    ;
		}