@charset "utf-8";

.ui-datepicker {
	position: relative;
	
	display: flex;
    justify-content: start;
    align-items: center;
    
    background: #ffffff;
    
    border: 1px solid var(--gray-400);
    
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.ui-datepicker:hover {
	border-color: var(--gray-500);
}
.ui-datepicker.-active {
	border-color: #80bdff;
	
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	/*
	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
	*/
	/*
	border: 1px solid #ff0000;
	*/
}
.ui-datepicker-icon {
	display: inline-block;
	
	margin: 0 0.25rem 0 0;
	
	padding: 0 0.5rem;
	
	height: 100%;
	
	color: var(--gray-600);
	
	/*
	font-family: 'Font Awesome 5 Free';
  	font-weight: 400;
	*/

	font-family: outline-icons;
 
    font-size: 1.7rem;
    
    cursor: pointer;
}
.ui-datepicker-icon:before {
	color: var(--gray-600);
	
    content: '\f073';
}
.ui-datepicker.-active .ui-datepicker-icon:before {
	color: var(--gray-700);
}
/*
.ui-datepicker:before {
	position: absolute;
	top: 0;
	left: 0;

    font-family: outline-icons;
    font-size: 17px;
    content: '\f073';
}
*/
.ui-datepicker-input {
	padding: 0 0.5rem 0 0;
    width: 7.7rem;
    height: 2.6rem;
    /*
    border: 1px solid var(--gray-400);
	*/

	color: var(--gray-800);

	font-size: 1.3rem;
}



.ui-datepicker-container {
	position: absolute;
	left: 0;
	top: 0;
	
	width: 25em;
	/*
	height: 20em;
	*/

	background: #ffffff;

	border: 1px solid #c5c5c5;
	/*
	border: 1px solid #ff0000;
	*/
	
	font-size: 10px;
	
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
	/*
	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
	*/
	
	z-index: 9999;
}

.ui-datepicker-container ._title {
	display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    
    margin: 0.3em 0.3em 0.1em 0.3em;
    
    width: calc(100% - 0.3em - 0.3em);
    height: 2.4em;
    
    background: var(--gray-300);
    
    border: 1px solid var(--gray-400);

	font-size: 1.2em;
}

.ui-datepicker-container ._title ._arrow {
	cursor: pointer;
    pointer-events: visiblePainted;

    user-select: none;
    
    fill: var(--gray-400);
}
.ui-datepicker-container ._title ._arrow:hover {
	fill: var(--gray-700);
}


.ui-datepicker-container ._title .ic_box_h17:first-child {
	margin-left: 0.7em;
}
.ui-datepicker-container ._title .ic_box_h17:last-child {
	margin-right: 0.7em;
}
.ui-datepicker-container ._title .ic_box_h17:nth-of-type(2) {
	margin-right: 2.0em;
}



.ui-datepicker-container ._title input {
	position: relative;
	
	padding: 0 0.3em;
	
	height: 1.6em;
	
	color: #454545;
	
	border: 1px solid var(--gray-400);

	text-align: center;
	
	z-index: 2;
}

.ui-datepicker-container ._title ._year {
	/*
	display: flex;
    align-items: center;
	justify-content: center;
	*/
	
	width: 5em;
}

.ui-datepicker-container ._title ._year_wrap,
.ui-datepicker-container ._title ._month_wrap
{
	position: relative;
}

.ui-datepicker-container ._title ._month {
	/*
	display: flex;
    align-items: center;
	justify-content: center;
	*/
	
	width: 4em;
}


.ui-datepicker-container ._title ._select {
	position: absolute;
	left: 0;
	top: calc(1.6em - 1px);

	width: 100%;

	background: #ffffff;

	border: 0.7px solid var(--gray-500);
	
	box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.5), 0 1px 3px 1px rgba(60, 64, 67, 0.27);
	/*
	box-shadow: 0 1px 2px 0 rgb(60 64 67 / 50%), 0 1px 3px 1px rgb(60 64 67 / 27%);
	*/
	
	z-index: 1;
}

.ui-datepicker-container ._title ._select ._option {
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	
	height: 1.6em;
	
	color: #454545;
	
	/*ext-align: center;*/
	
	cursor: pointer;
}
.ui-datepicker-container ._title ._select ._option:hover {
	background: var(--gray-200);
}


.ui-datepicker-container ._grid {
	display: grid;
	
	gap: 0.2em;
	
	/*
	margin-top: 1em;
	*/

	padding: 0 0.3em 0.3em 0.3em;
	
	width: 100%;
	height: 15em;
	
	grid-template-rows: repeat(7, 1fr);
	grid-template-columns: repeat(7, 1fr);
	
	/*
	border: 1px solid #00ff00;
	*/
	
	font-size: 1.2em;
}


.ui-datepicker-container ._grid ._item {
	display: flex;
    align-items: center;
    flex: 1;
    
    user-select: none;
}
.ui-datepicker-container ._grid ._item:not(.-week, ._day) {
	justify-content: flex-end;
	
	padding-right: 0.4em;

	color: var(--gray-500);

	border: 1px solid #ffffff;
	
	cursor: default;
	
	pointer-events: none;
}
	
.ui-datepicker-container ._grid .-week {
	justify-content: center;
	
	color: #333333;
	
	font-weight: 500;
	
	cursor: default;

	pointer-events: none;
}

.ui-datepicker-container ._grid ._day {
	justify-content: flex-end;
	
	padding-right: 0.4em;
	
	color: #454545;

	background: #f6f6f6;
	
	border: 1px solid #c5c5c5;


	/*
	color: var(--gray-800);
	border: 1px solid var(--gray-500);
	*/
	
	cursor: pointer;
}
.ui-datepicker-container ._grid ._day:hover {
	
	color: #ffffff;
	
	background: var(--gray-500);
	
	border: 1px solid var(--gray-600);
}
.ui-datepicker-container ._grid ._day.--selected {
	color: #ffffff;
	
	background: #007fff;
	
	border: 1px solid #003eff;
}