@charset "utf-8";

/*!
 * TEMP： リアルタイム注文状況表示プラグイン
 * ECCUBE：v3.x
 * CSS Information： style
 * Copyright shiro8 all rights reserved.
 */

/* --------------------------------
	s8_nowOrder
-------------------------------- */
#s8_nowOrder {
margin:0 0 24px;
padding:0;
clear:both;
position:relative;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#s8_nowOrder .panel {
	width:auto;
	min-width:100%;
	font-size:13px;
	color:#000;
	background:#FFF;
	border: solid 1px #ccc;
	padding:0;
	margin:0;
}
#s8_nowOrder .panel{
	padding:0;
}
#s8_nowOrder .scroll-box::-webkit-scrollbar {
	height: 5px;
}
#s8_nowOrder .scroll-box::-webkit-scrollbar-track {
	border-radius: 5px;
	background: #EEE;
}
#s8_nowOrder .scroll-box::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #666;
}
/******** common ********/
#s8_nowOrder .panel-heading,#s8_nowOrder .panel-body{
	display:block;
}
#s8_nowOrder .panel ul{
	font-size:13px;
	display:block;
	clear:both;
	margin:0;
	padding:3px 0;
	position:relative;
}
#s8_nowOrder .panel ul li{
	width:inherit;
	display:inline-block;
	float:left;
	border-right: dotted 1px #DDD;
	margin:0;
	padding:5px 1%;
	box-sizing:border-box;
}
#s8_nowOrder .panel ul li:last-child{
	border-right:none;
}

/******** タイトル ********/
#s8_nowOrder .panel .panel-heading{
	background-color:#F8F7E6;
	display:block;
	border-bottom: solid 1px #ccc;
	padding:0;
}
#s8_nowOrder .panel .panel-heading h3 {
	font-size:16px;
	font-weight:bold;
	color: #FFF;
	background-color: #778899;
	text-align: center;
	padding:8px;
	display:block;
	letter-spacing:0.03em;
	margin:0;
}
#s8_nowOrder .panel .panel-heading h3 span{
	font-size:13px;
	font-weight:normal;
}
#s8_nowOrder .panel .panel-heading h3 span.total{
	padding:0 7px 0 15px;
}
/******** .panel-body ********/
#s8_nowOrder .panel-body a{ text-decoration:none; font-weight:bold;}
#s8_nowOrder .panel-body a:link { color:#09C;}
#s8_nowOrder .panel-body a:hover{ color:#F60;}
#s8_nowOrder .panel-body a:visited{ color:#551A8B;}
#s8_nowOrder .panel-body a img { border-style: none; margin:0;padding:0;}


#s8_nowOrder .panel-body{
	background-color:#FFF;
	height:227px;/* ulの高さ76px×表示したい行数-2px */
	overflow-y:scroll;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
	margin:0;
	padding:0;
}
#s8_nowOrder .panel-body ul{
	padding-top:3px;
	padding-bottom:3px;
	border-bottom: solid 1px #CCC;
	height:76px;
	overflow:hidden;
}
#s8_nowOrder .panel-body ul:nth-child(even){
background-color:#F9F9F9;
}
#s8_nowOrder .panel-body li:last-child{
	border-bottom:none;
}
#s8_nowOrder .panel-body li{
	height:70px;
	min-height:70px;
	position:relative;
	float:left;
}

/* 幅の設定 //全体の幅によって調節 */
#s8_nowOrder .panel li.num        { width:3em; min-width:1.5em;}
#s8_nowOrder .panel li.item_photo  {width:1em; width:70px; max-height:70px; font-size:7em;}
#s8_nowOrder .panel li.item_name  { width: calc(100% - 21em); min-width:35%;}
#s8_nowOrder .panel li.order_info  { width:11em; min-width:10em;}

#s8_nowOrder .panel .panel-body .num        { text-align:center; white-space:nowrap; font-weight:bold; line-height:70px; }
#s8_nowOrder .panel .panel-body .item_photo { text-align:center; padding:5px;}
#s8_nowOrder .panel .panel-body .item_name  { text-align:left; vertical-align:top; padding-top:10px; word-break:break-all;}
#s8_nowOrder .panel .panel-body .order_info  { text-align:left; vertical-align:top; padding-top:10px; word-break:break-all;}
#s8_nowOrder .panel .panel-body .item_name a  { display:block; clear:both; }

/* parts */
#s8_nowOrder .panel .panel-body span.qty        { text-align:left; margin-right:1em; line-height:1.8;font-size:13px; font-weight:normal}
#s8_nowOrder .panel .panel-body span.mes        { text-align:left; line-height:20px;font-size:13px; font-weight:normal}
#s8_nowOrder .panel .panel-body span.date       { text-align:center; white-space:nowrap; line-height:20px;}
#s8_nowOrder .panel .panel-body span.place    { text-align:center; white-space:nowrap;}
#s8_nowOrder .panel .panel-body span.place span    { text-align:center; white-space:nowrap;}

#s8_nowOrder .panel li.item_photo img{ width:100%; max-width:70px!important; height:auto; margin:0 auto; padding:0; display:block;}

/* ipad only(ヨコ) */
@media screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio:0) {

}
/* ipad only(タテ) */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio:0) {

}

@media only screen and (max-width: 768px) {
#s8_nowOrder .panel .panel-heading h3 { font-size:14px;}
#s8_nowOrder .panel .panel-heading h3 span{ font-size:12px;}
#s8_nowOrder .panel { font-size:13px;}

#s8_nowOrder .panel li.item_photo  { width:70px;}
#s8_nowOrder .panel li.item_name span{ font-size:12px;}
}

@media only screen and (max-width: 738px) {
#s8_nowOrder .panel .panel-heading h3 { font-size:14px;}
#s8_nowOrder .panel .panel-heading h3 span.total{ padding:0 5px 0 10px;}
#s8_nowOrder .panel ul{ font-size:12px; overflow:hidden;} 
#s8_nowOrder .panel li.num      { width:2.5em;}

#s8_nowOrder .panel li.item_name  { width: calc(100% - 20em); min-width:12em;}
#s8_nowOrder .panel .panel-body .item_name a{ margin-bottom:3px;}
#s8_nowOrder .panel li.order_info  { width:9.5em;}*/

#s8_nowOrder .panel .panel-body li.item_name span{ font-size:12px; line-height:1.3;}
#s8_nowOrder .panel .panel-body span.qty        { margin-right:0.7em; line-height:1.3; font-size:12px;}
#s8_nowOrder .panel .panel-body span.mes        { font-size:12px; line-height:1.3;}

@media only screen and (max-width: 540px) {
#s8_nowOrder .panel ul { font-size:12px; height:auto; min-height:56px;}
#s8_nowOrder .panel-body li{ height:auto; min-height:auto; overflow:visible; min-height:56px; }
#s8_nowOrder .panel .panel-body .num        { line-height:56px; }
#s8_nowOrder .panel li.item_photo  { width:0.8em; width:56px; padding:12px 5px;}
#s8_nowOrder .panel li.item_name  { width: calc(100% - 18em); min-width:12em;}
#s8_nowOrder .panel li.order_info  { width:8em;}
#s8_nowOrder .panel .panel-body li.num + li.item_name + li.order_info{border-right:none;}
}

@media only screen and (max-width: 414px) {
#s8_nowOrder .panel .panel-heading h3 { font-size:14px;}
#s8_nowOrder .panel .panel-heading h3 span.total{ padding:0 5px 0 10px; clear:right;}
#s8_nowOrder .panel .panel-heading h3 span.update{ clear:both; text-align:center; display:block;}
#s8_nowOrder .panel .panel-heading ul{display:none;}
#s8_nowOrder .panel ul { font-size:12px; padding:0 0 5px; height:auto; min-height:105px;}
#s8_nowOrder .panel ul li{ width:inherit; display:block; border-right: none; padding:5px; margin:0;}
#s8_nowOrder .panel-body{ height:314px;}/*ulの高さ106px(※初期の並び順)×表示したい行数-1px*/
#s8_nowOrder .panel-body li{ height:auto; min-height:auto; overflow:visible; }

#s8_nowOrder .panel .panel-body .num        { width:100%; line-height:15px; height:25px; clear:both; background:#F8F7E6; margin-bottom:5px;}
#s8_nowOrder .panel .panel-body .item_photo { width:70px; padding:5px; font-size:7em;}
#s8_nowOrder .panel .panel-body .item_name { width:calc(100% - 6.5em); padding:3px 5px;}
#s8_nowOrder .panel .panel-body .order_info  {min- width:8.5em; text-align:left; line-height:1; padding:3px 5px; font-size:11px; letter-spacing:0;}

#s8_nowOrder .panel .item_photo img{ margin:0 auto;}

#s8_nowOrder .panel .panel-body li.item_name span{ font-size:12px;}
#s8_nowOrder .panel .panel-body span.qty        { text-align:left; margin-right:0.5em; line-height:20px; font-weight:normal}
#s8_nowOrder .panel .panel-body span.mes        { text-align:left; line-height:20px; white-space:nowrap;}
#s8_nowOrder .panel .panel-body span.date       { margin-right:0.5em;}

/*組み合わせ3項目*/
#s8_nowOrder .panel .panel-body li:nth-child(2).item_name{
	width: calc(100% - 7.5em);
	float:left;
}
#s8_nowOrder .panel .panel-body li:last-child.order_info{
	width: calc(100% - 6.5em);
	display:block;
	float:right;
	text-align:left;
}
#s8_nowOrder .panel .panel-body li:nth-child(2).order_info,
#s8_nowOrder .panel .panel-body li:nth-child(3).order_info{
	float:left;
	text-align:left;
	white-space:nowrap;
}
#s8_nowOrder .panel .panel-body li.num + li.order_info + .item_photo,
#s8_nowOrder .panel .panel-body li.num + li.item_name + li.order_info + .item_photo,
#s8_nowOrder .panel .panel-body li.num + li.order_info +li.item_name + .item_photo{
	display:inline;
	float:right;
	clear:right;
	position:absolute;
	top:30px;
	right:5px;
}
#s8_nowOrder .panel .panel-body li.num + li.item_photo + li.order_info,
#s8_nowOrder .panel .panel-body li.num + li.item_name + li.item_photo + li.order_info{
	text-align:left;
	white-space:nowrap;
	padding:0 5px;
	float:left;
}

}