/* 
 * アクションボタンツールバー
 * 
 * 
 * 
 */
 
/*
 * ツールバーベース
 */
#toolbar {
	width:      			100%;
	height:					50px;
	background:				#fff;
	font-weight:			400;
	
	border-bottom:			1px solid #ccc;
  	z-index:				100 !important;
  	position: 				-webkit-sticky;
	position:				sticky;
	top:					40px;
	left:       			0px;
	
	user-select:			none;
}

#toolbar_contents {
	display:				flex;
	width:      			calc(100vw - 17px);
	height:					100%;
	padding: 				0px 30px 0px 10px;
	justify-content: 		space-between;
  	//justify-content: 		end;
  	//z-index:				100 !important;
  	position: 				-webkit-sticky;
	position:				sticky;
	top:					40px;
	left:       			0px;
	//white-space: 			nowrap;
}

/*
 * アクションボタンベース
 */
#action_icons {
	//width:				calc(100vw - 600px);
	height:				100%;
	position: 			-webkit-sticky;
	position:			sticky;
	left:       		0px;
	display: 			flex;
  	justify-content: 	flex-start;
  	background-color: 	rgba(255,255,255,1.0);
	padding:			4px 0px 2px 0px;
}

#action_icons .action_icon {
	border: 	    1px solid #ddd;
	border-radius:	5px;
	width:			40px;
	height:			40px;
	cursor:			pointer;
	margin-right:	5px;
	padding:		5px 5px 5px 5px;
	display:		block;
}

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

#action_icons .action_icon:active{
	transform:		translate(1px, 1px);
}



#action_icons .action_icon img{
	height:			29px;
}

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

	#toolbar {
		top: 				60px;
		margin-bottom:		0;
	}
	
	#toolbar_contents {
	  	justify-content: 	space-between;
		padding: 			0px 10px 0px 10px;
	}
	
	#toolbar #result{
		display:			none;
	}
}

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

	#toolbar {
		width:				100vw;
	}
}