body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
div {
	font-size: 16px;
	/*border: 1px solid;*/
}
a {
  color: #00B7FF;
}



/*!--- 共通部分 ---!*/
div {
	font-size: 16px;
}
/*!--- 共通部分 ここまで---!*/

/*! ---上部アイコン一覧 --- !*/
#display_config{
		display: flex;
		flex-direction: row;
		align-items: stretch; 
		justify-content: center;
		flex-wrap: wrap;
		align-content: stretch;
		max-width: 1920px;
		background-color: #99ccc0;
		border: 1px solid;
	}
select{
	height: 49px;
}
#display_config input{
	width: 100px;
	height: 100px;
}
ul,li{
	margin:0; 
	padding:0;
	list-style: none;
}
li{
	float:none;
}

ul.select_item{
	position: absolute;
	z-index: 2;
}

ul.select_menu li a{
	display: inline-block;
	width:100px; 
	line-height:48px;
	text-decoration:none;
	background-color: #FFFFFF;
	border: 1px solid;
	text-align: center;
}
ul img{
	width: 100px;
}

#sortable_possible{
	font-size: 1em;
	color: #028760;
	position: center;
}

/*! ---上部アイコン一覧 ここまで --- !*/


/*table要素*/

.name_space,.status_check_space,.user_status_space{
	width:100%;
	border-spacing: 0;
	/*border: solid 1px;*/
}

.name_space_left,.stutas_space_left {
	width:50%;
	vertical-align:center;
}
.name_space_right,.status_space_right {
		width:50%;
	vertical-align:center;
}

hr {
	width:98%;
	border-top: 1px dotted #000;
	border-bottom-width: 0px;

}

.replaceable_area {
	display: flex;
	flex-direction: row;
	align-items: stretch; 
	/*justify-content: center;*/ /* 均等配置 */
	flex-wrap: wrap; /* 折返し指定 */
	align-content: stretch; /* デフォルト値 */
	max-width: 1920px;
	background-color: #99cca0;
	/*height: 100vh; /* これを追加 */


}

.replaceable_block {
	/*flex-grow: 1 ;*/ /* デフォルト値 */
	/*flex-shrink: 1;*/ /* デフォルト値 */
	/*flex-basis: auto; *//* デフォルト値 */
	/*width : 33.3333% ; /* 未対応ブラウザ用フォールバック */
	width : 31.3333%;
	font-size: calc(150% + 0.5vw);/*16px*0.6+0.5vw*/
	/*width : -webkit-calc(100% / 3) ;*/
	/*width : calc(100% / 3) ;*/
	min-width: 50px;/* カラム落ちさせる分岐幅 */
	max-width: 800px;
	border: 1px solid;
	background-color : seagreen;
	margin: 0 1% 1% 0;
}

.important_block {
	background-color : lime;    /*#99cc00;*/
}

.cf:after {
	content: "";
	clear: both;
	display: block;
}


.state_picture button{
	display: block;
	width:100%;
}

.replaceable_block input{
	display: block;
	width:100%;
	vertical-align: bottom; /*画像下の余白の除去*/
	position: relative; /*wifi切断時のアイコンとの重ね用*/
}

.replaceable_block p{
	display: block;
	max-width: 300px;
	max-height: 550px;
	margin: 0;
	margin-left: 5px;
	top:10px;
	/*font-size: calc(70% + 0.5vw);/*16px*0.6+0.5vw*/
}
.hidden_details{
	font-size: calc(70% + 0.5vw);/*16px*0.6+0.5vw*/
}
table td {
    word-break: break-all;
}

@media (max-width: 500px) { 
	.replaceable_block:nth-last-child(1):nth-child(odd)::after {
		content: none;
	}
}
.hidden_box .details_hidden_button{
	font-size: calc(70% + 0.5vw);/*16px*0.6+0.5vw*/
	width: 100%;
	height: 50px;

}

.modal_content {
	font-size: calc(200% + 0.5vw);/*16px*0.6+0.5vw*/
	width: 50% ;
	margin: 0 ;
	padding: 10px 20px ;
	border: 2px solid #aaa ;
	background: rgb(116,232,232);
	position: fixed ;
	display: none ;
	z-index: 2 ;
	text-align:center;
}
  
#modal_overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	/*width: 100% ;
	height: 120% ;*/
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
	font-size: calc(200% + 0.5vw);/*16px*0.6+0.5vw*/
	color: #00f ;
	margin-left: 20px;
	margin-right: 20px;
	text-decoration: underline ;
}
.button_position{
	text-align: center;
}
 
.button-link:hover {
	cursor: pointer ;
	color: #f00 ;
}

.peke_button{
	font-size: calc(200% + 0.5vw);/*16px*0.6+0.5vw*/
	background-color: #FFF;
	border-radius: 50%;
	border: 1px solid #aaa ;

}

.peke_button_position{

	text-align:right;
}

#info{
	text-align: right;
}

.stoppedTerminalConnect{
	position: absolute;
	z-index: 1;
    width:  15%;
    height: auto;
	object-fit: cover;
    /*display: none;*/
}

.state_picture_overlay{
	display: block;
	width:100%;
	vertical-align: bottom; /*画像下の余白の除去*/
	position: relative; /*wifi切断時のアイコンとの重ね用*/
}
.sound_stop_button{
	font-size: calc(70% + 0.5vw);/*16px*0.6+0.5vw*/
	width: 74%;
	height: 50px;

}
.sound_stop_time_list{
	font-size: calc(70% + 0.5vw);/*16px*0.6+0.5vw*/
	width: 24%;
	height: 50px;

}
.state_image {
	position: relative;
}
.aleart_count_area {
	position: absolute;
    width:  15%;
    height: auto;
	bottom:0%;
	left:0%;
	z-index: 1;
}
.aleart_count_cercle {
  position: relative;
  }

.aleart_count_cercle p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  font-size: calc(90% + 0.5vw);/*16px*0.6+0.5vw*/
  /*文字の装飾は省略*/
  color:#ffffff;
  font-weight: bold; 
  }

.aleart_count_cercle img {
	width:  100%;
    height: auto;
    object-fit: cover;

	}
	
	.body_moving_view {

		position: absolute;
		top: 90%;
		left: 50%;
		z-index: 1;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		margin:0;
		padding:0;
		font-size: calc(90% + 0.5vw);/*16px*0.6+0.5vw*/
		/*文字の装飾は省略*/
		color:#ff0000;
		font-weight: bold; 
	

	}