@charset "utf-8";

nav{
	position: sticky;
	top:0;
	z-index:999;
	border-bottom: solid 1px #999!important;
}
nav i{
	margin-right:3px;
}

.Toggle{
	display: none;
	position: absolute;
	z-index: 1;
	font-size:2em;
	width: 35px;
	height: 18px;
}
.Toggle:hover{
	cursor: pointer;
}
.Toggle i{
	font-size:1.2em;
	color: #999;
}
.Toggle_On i{
	color: #55f!important;
}
#Toggle_Monthbar{
	position:absolute;
	width: 31px;
	height: 20px;
	right: 28px;
	margin-top:5px;
}
#Toggle_Leftmenu{
	top:48px;
	left: 4px;
	width: 31px;
	height: 20px;
}

#page_caption{
	font-size:1.25em;
	font-weight: bold;
	margin-left:0.75em;
	margin-top:22px;
}
.Page_Delm{
	display: inline-block;
	padding: 0 14px 0 10px;
}

.menu_item{
	margin-left: 15px!important;
	padding-top: 20px;
}

.responsive_navi .hamburger{
	padding-top:0!important;
	margin-top:0!important;
	margin-left:0!important;
}
.toggle_responsive{
/*
	width:321px!important;
	margin-left: -15px;
	border-left: solid 5px #3a3a3a!important;
*/
	background-color:#f9f9f8!important;
}
div.active.toggle_responsive{
	color: rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
	background-color: #eaeafd!important;
}
#responsive_nav_box .menu_item{
	margin-left: 0px!important;
}
div.toggle_responsive + div.hamburger_menu a{
/*
	margin:-1px 0 0 10px!important;
	padding-left:31px!important;
	border-left:none!important;
*/
	background-color:#f5f5ff!important;
}
div.toggle_responsive.active{
	border-bottom: solid 1px rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
}

#responsive_nav_box{
	position:absolute;
	width:100%;
/*
	right: 0;
	width:65%;
*/
	border-top: solid 1px #3a3a3a;
	border-bottom: none;
	border-right: solid 4px #3a3a3a;
	border-left: none;
}
#responsive_nav_box div{
	background-color:#3a3a3a;
	color:#fff;
	padding:0!imortant;

}
.responsive_navi{
	border:none;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc( 100vh - 100px )!important;
}
.responsive_navi a{
	padding-top:15px;
	padding-bottom:10px;
	border-bottom: solid 1px #777;
	margin:0!important;
}
.responsive_navi a:hover{
	text-decoration:underline;
	color:#f00!imortant;
}
.responsive_navi a:first-child{
	border-top: solid 1px #777;
}

div .selecteditem{
	background-color:#eaeafd!important;
	border-left: solid 5px #3a3a3a!important;
	border-bottom: solid 2px rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
	/*border-bottom: solid 3px rgb(67 56 202 / var(--tw-text-opacity, 1))!important;*/
}
.nonselecteditem{
	color:#555!important;
	background-color:#f1f5f8;!important;
	border-left: solid 5px #3a3a3a!important;
	border-bottom: solid 1px #777!important;
}
.nonselecteditem:hover{
	color: rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
	background-color: #eaeafd!important;
	/*color:#fff!important;*/
	border-left: solid 5px #3a3a3a!important;
	border-bottom: solid 1px rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
	/*	border-top: solid 1px #ccc!important;	*/
}

div.hamburger_menu{
	display:none;
	padding:0!important;
}
.active + div.hamburger_menu{
	display:block;
}
div.hamburger_menu a{
	margin:0!important;
}
#nav_leftmenu .hamburger_menu a{
	padding-left:17px!important;
}

#nav_leftmenu .hamburger_menu a,
#nav_leftmenu .menu_item{
	width:200px!important;
}

#nav_leftmenu .hamburger_menu a:hover,
#nav_leftmenu .hamburger_menu a.active{
	border-left: solid 1px #eaeafd!important;
}


#nav_leftmenu{
	background-color:#f1f5f8;;
	z-index: 13;
	min-width: 45px;
	height: calc( 100vh - 100px );
	overflow-y: auto;
	overflow-x: hidden;
	border-right: solid 1px #cfcfcf;
	padding-top: 25px;
	padding-right:1px;
	margin-left:2px;
}
.ToggleClose #nav_leftmenu .wrapper{
	display:none;;
}

.ToggleClose .left_col{
	max-width:45px!important;
}
.Hide .left_col{
	display:none;
}

.Hide #Toggle_Account {
	display: none;
}

#nav_leftmenu .wrapper{
	min-width:15px;
}

.toggle_responsive .Btn_Toggle{
	position:relative;
	margin-left:0.5em;
	display:inline-block;
	width:40px;
	height:12px;
	background-image: url("images/arrow_right.png");
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-position: 1px 1px;
}
#responsive_nav_box .open .Btn_Toggle{
	background-image: url("images/arrow_down.png");
	background-size: 10px 10px;
	background-position: 1px 2px;
}

.toggle_navi .Btn_Toggle{
/*
	position:absolute;
	top:12px;
	right: -5px;
*/
	position:relative;
	margin-left:0.5em;
	display:inline-block;
	width:20px;
	height:16px;
	background-image: url("images/arrow_right.png");
	background-repeat: no-repeat;
	background-size: 10px 10px;
	background-position: 1px 6px;
}
#nav_leftmenu .open .Btn_Toggle{
/*
	top:12px;
*/
	background-position: 1px 6px;
	background-image: url("images/arrow_down.png");
	background-size: 10px 10px;
}

div.toggle_navi{
	padding: 7px 10px 7px 7px!important;
}
div.toggle_navi + div.hamburger_menu{
	width:160px;
	margin-left:-12px!important;
	padding-left:0!important;
	background-color: #eaeafd;
	border-left: solid 1px #cfcfcf!important;
}
div.toggle_navi + div.hamburger_menu a{
	color:#5f5f5f!important;
	width: 143px!important;
	margin-left:8px!important;
	background-color:#f00!important;
}
.toggle_navi,
#nav_leftmenu a{
	position:relative;
	z-index: 2;
	color: #555;
	font-size:0.9em;
	display:block;
/*
	width:152px;
	padding: 7px 10px 7px 7px!important;	
*/
	width:162px;
	white-space:nowrap;
	padding: 7px 10px 7px 7px!important;
	margin-top: -18px;
	margin-left:-12px;
	border-right: solid 1px #cfcfcf!important;
	border-left: solid 1px #cfcfcf!important;
	border-bottom: solid 2px #c9c9c9!important;
	background-color:#fff!important;
}
#nav_leftmenu div:first-child a{
	border-top: solid 2px #c9c9c9;
}
.toggle_navi:hover,
#nav_leftmenu a:hover{
	background-color:#eaeafd!important;
	color: rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
	/*border-bottom: solid #c1c1ff!important;*/
	border-bottom: solid 2px rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
}
.toggle_navi.active,
#nav_leftmenu a.active{
	font-weight: bold;
	background-color:#eaeafd!important;
	color: rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
	/*border-bottom: solid #c1c1ff!important;*/
	border-bottom: solid 2px rgb(67 56 202 / var(--tw-text-opacity, 1))!important;
}

#nav_leftmenu a:active i{
	margin-left:10;
}

#month_loader{
	display: block;
	width:75;
	height:74px;
	background-size: 55px 55px;
	background-image: url("images/loader.gif");
	background-repeat: no-repeat;
	background-position: 20px 9px!important;
}
.ToggleMonthClose #month_loader{
	width:50px;
	height:40px;
	margin-top: -4px;
	background-size: 32px 32px;
}

#monthbar{
	color: #444;
	font-size:1.2em;
	font-weight: bold;
	min-height:45px;
	max-height:125pximportant;
	padding: 4px 32px 0 1px;
	line-height:0.9em;
	border-bottom: solid 1px #ccc;
	margin-left:5px!important;
}
#monthbar #YM_Title{
	display:none;
	padding: 5px 17px;
}
#monthbar .wrapper{
	display:none;
	padding-left:5px;
}
#monthtbl{
	height: 74px;
}
#monthtbl td{
	padding:0!important;
}

#month_area{
	margin: 2px 0;
	padding: 0 4px;
	max-width: calc( 100vw - 320px )!important;
	overflow :auto;
	border-right: solid 1px #dfdfdf;
	border-left: solid 1px #dfdfdf;
}
.ToggleClose #month_area{
	max-width: calc( 100vw - 105px )!important;
}

.move_item{
	display:table-cell;
	cursor: pointer;
	line-height: 1.25em;
	padding: 2px 7px 2px 5px;
}
.move_item div{
	color: #777;
	padding:3px 0 0 5px;
	width:30px;
	height:30px;
	background-color:#eee;
	border-radius: 48%;
}
.move_item div:first-child{
	margin-top:2px;
	padding-top:3px;
	margin-bottom:5px;
}
.move_item div:last-child{
	margin-top:1px;
	padding-top:5px;
	margin-bottom:3px;
}
.move_item i{
	position:relative;
	font-size: 1.55em;
	margin-left:-5px;
}
.move_item div:hover{
	color:#5f5fff;
}

.year_item{
	display:table-cell;
	min-width:70px;
	vertical-align:middle;
	padding-top:7px;
	white-space: nowrap;
	padding-right:8px;
	padding-left:2px;
}
.year_item p{
	border-bottom: solid 1px #ccc;
	max-width:60px;
}
.month_item .LinkBtn{
	display:block;
	cursor: pointer;
	text-align: center;
	padding:15px 1px;
	width:54px;
	margin-top:7px;
	background-color:#eee;
	border-radius: 50%;
}
.month_item .LinkBtn{

}
.month_item .LinkBtn:hover,
.month_selected .LinkBtn{
	color:#fff;
	background-color:#5f5fff;
}

.mini{
	font-size:0.7em;
	margin-top:2px;
	margin-left:1px;
}

#YM_Title .mini{
	display: inline-block;
	font-size:0.7em;
	margin-top:2px;
	margin-left:1px;
	padding-top: 7px;
	padding-bottom: 7px;
}

@media (max-width: 850px) {
	#month_area{
		max-width: calc( 100vw - 220px )!important;
		border-right: solid 1px #dfdfdf;
		border-left: solid 1px #dfdfdf;
		margin-top: 20px;
	}
	#month_loader{
		height:93px;
		background-position: 25px 18px;
	}
	.year_item{
		position:absolute;
		font-size: 14px;
		top: 60px;
		margin-left:43px;
	}
	.year_item p{
		max-width:45px;
	}
	.move_item div:first-child{
		margin-top:-2px;
		margin-bottom:20px;
	}
}

@media (max-width: 640px) {
	#Toggle_Account,
	#nav_leftmenu{
		display:none;
	}
	#page_caption{
		font-size:1.1em;
		margin-top: 20px;
		margin-left: -10px;
	}
	#Toggle_Monthbar{
		margin-right:-2px;
	}
	#monthbar{
		padding-left: 2px;
		min-width: 100vw;
	}
	#month_loader{
		height:93px;
		background-position: 25px 18px;
	}
	#month_area{
		max-width: calc( 100vw - 55px )!important;
		margin-top: 20px;
	}
	.ToggleClose #month_area{
		max-width: calc( 100vw - 48px )!important;
		margin-top: 20px;
	}
	.ToggleClose .year_item,
	.year_item{
		position:absolute;
		font-size: 14px;
		top: 60px;
		margin-left:47px;
	}
	#monthbar .wrapper{
		padding:0;
	}
	.year_item p{
		max-width:45px;
	}
	.move_item div:first-child{
		margin-top:2px;
		margin-bottom:20px;
	}
}

#navi_primary,
#monthbar,
#nav_leftmenu,
#responsive_nav_box{
	user-select: none;
}