/*
 * 各ボタン共通
 */
.btn_exec,
.btn_cancel,
.btn_close,
.btn_clear,
.btn_return{
	box-sizing: 	border-box;
	cursor:			pointer;

	width:       	150px;
	height:       	50px;
	padding:		5px 10px 5px 10px;
	margin:			0px 5px 0px 5px;

	font-size:		12pt;
	font-weight:	bold;
	color:			#000;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	
	background:		#ccc;
	border:			1px solid #aaa;
	
	user-select:	none;
	
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.btn_exec:active{
	background: 	rgb(196, 43, 28);
	color:     		#999;
	border:			none;	
	transform:		translate(1px, 1px);
	box-shadow: 	none;
}

.btn_cancel:active,
.btn_close:active,
.btn_clear:active,
.btn_return:active{
	transform:		translate(1px, 1px);
	box-shadow: 	none;
}

.btn_exec:hover{
	filter:brightness(1.2);
}

.btn_cancel:hover,
.btn_close:hover,
.btn_clear:hover,
.btn_return:hover{
	filter:brightness(1.1);
}

.btn_exec:disabled,
.btn_cancel:disabled,
.btn_close:disabled,
.btn_clear:disabled,
.btn_return:disabled{
	/*transform:translate(-1px, -1px);*/
	filter:brightness(0.8);
	cursor:not-allowed;
	background:		#ccc;
	border:			1px solid #aaa;
	color:			#999;
	text-shadow: 	none;
	box-shadow: 	none;
}

/*
 * 実行系のボタンデザイン
 */
.btn_exec {
	background:   	#28d;
	color:        	#fff;
	border: 	    1px solid #17c;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/*
 * キャンセル系のボタンデザイン
 */
.btn_cancel {
	color:      	#555;
	border: 		1px solid #aaa;
}

/*
 * クローズボタンデザイン
 */
.btn_close {
	color:      	#555;
	border: 		1px solid #aaa;
}

/*
 * 戻る系のボタンデザイン
 */
.btn_return {
	background:   	#28d;
	color:        	#fff;
	border: 	    1px solid #17c;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.66);
}

/*
 * クリア系のボタンデザイン
 */
.btn_clear {
	color:      	#555;
	border: 		1px solid #aaa;
}

/*
 * リスト系のボタンデザイン
 */
.btn_list {
	color:      	#17c;
	border: 		1px solid #17c;
}

/*
 * hoverでボタンが輝く
 *
 * <p class="shine_button">ボタン</p>
 *
 */
.shine_button {
	position: relative;
	overflow: hidden;
	cursor:pointer;
}

/*
 * hoverでボタンが輝く(輝き部分)
 *
 */
.shine_button::before {
  	content: 	'';
  	display: 	block;
  	position: 	absolute;
  	width: 		100%;
  	height: 	100%;
  	top: 		0;
  	left: 		-100%;
  	background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%);
  	cursor:pointer;
}

.shine_button:hover::before {
  -webkit-animation: shine 0.5s;
          animation: shine 0.5s;
          cursor:pointer;
}

@-webkit-keyframes shine {
  	100% {
		left: 100%;
  	}
}

#action_button_panel {
	width:				100%;
	height:				60px;
	position: 			-webkit-sticky;
	position:			sticky;
	left:       		0px;
	display:			flex;
	gap:				10px;
	justify-content: 	center;
}

#action_button_panel a{
	text-decoration: none;
}

/*
 * アクションボタン
 */
.action_button {
 	font-size:		10pt;
  	padding:		10px 10px 10px 10px;
	border: 	    1px solid #ddd;
	border-radius:	2px;
	
 	display: flex;
  	align-items: center;
	
	width:			150px;
	height:			50px;
	cursor:			pointer;
	margin-right:	10px;
}

.action_button img{
	height:			28px;
	box-sizing:     border-box;
	padding: 		2px 0 2px 0;
	margin-right:   10px;
}

.action_button img.logout{
	margin-topt:   3px;
}

.action_button:hover{
	border: 	    1px solid #666;
}

.action_button p{
	color:      	#555;
	font-size:		10pt;
	margin:0 auto;
	//margin-left:	auto;
	//margin-right:	auto;
}

@media screen and (max-width: 480px){

	/*
	 * ボタンの高さとパディングを足した高さに調整
	 */
	 /*
	#action_button_panel {
		//height:			50px;
		//padding:		5px 10px 5px;
		//justify-content: 	start;
		width:			100vw;
	}
	*/
/*
	.action_button {
		width: 40px;
		padding: 4px 4px 4px 4px;;
	}
*/	
/*
	.action_button img{
		height:			32px;
		padding: 		0;
		margin:   		0;
	}
	*/
	/*
	.action_button p{
		display:none;
	}*/
}