﻿.odhHead
{
	width: 100%;
	margin-bottom: 5px;
	background-color: #f8f8ff;
	display: inline-block;
}
.odhHead ul {list-style:none; margin:0;padding:0;} 
.odhHead li
{
	float: left;
	font-size: 12pt;
	min-width: 33.3%;
	padding: 10px 0;
	text-indent: 10px;
	border-bottom: #d3d3d3 1px dotted;
} 
.nonothing
{
	padding:40px;
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
}
.odhtb
{
	width:100%;
	border-collapse: collapse;
}
.odhtbL,.odhtbR
{
	vertical-align: top;
	padding: 10px;
}
.odhtbL
{
	width: 1%;
} 
.odhtbR
{
	width: 99%;
}
.OdListTitle
{
     height:30px;
     font-size:12pt;	
}
.ListBox
{
	width: 220px;
	height:400px;
	overflow: auto;
}
#odhBox
{
	
}
#odhBox .ckoutTB
{
	border: #a9a9a9 1px solid;
    width:100%;
}
#odhBox .ckoutTB td
{
	padding: 10px;
}
#odhBox .ckoutTH td
{
	border-bottom: #d3d3d3 1px dotted;
	background-color: #fffafa;
}

#odhBox .ckoutIT td
{
	border-bottom: #d3d3d3 1px dotted;
}

#odhBox .ckoutFI td
{
	border-bottom: #d3d3d3 1px dotted;
}

#odhBox .th1{ width:1%}
#odhBox .th1 img{max-width:120px;}
#odhBox .th2{ width:40%}
#odhBox .th3{ width:10%}
#odhBox .th4{ width:10%}
#odhBox .th5{ width:10%}
#odhBox .th6{ width:15%}
#odhBox .th7{ width:10%;text-align:center;}

#odhBox .ckoutTH .th1{ text-align:center;}
#odhBox .ckoutTH .th2{ text-align:center;}
#odhBox .ckoutTH .th3{ text-align:center;}
#odhBox .ckoutTH .th4{ text-align:center;}
#odhBox .ckoutTH .th5{ text-align:right; padding-right:20px;}
#odhBox .ckoutTH .th6{ text-align:right; padding-right:20px;}

#odhBox .ckoutIT .th3{ text-align:center;}
#odhBox .ckoutIT .th4{ text-align:center;}
#odhBox .ckoutIT .th5{ text-align:right; padding-right:20px;}
#odhBox .ckoutIT .th6{ text-align:right; padding-right:20px;}

#odhBox .ckoutFI .th6{ text-align:right; padding-right:20px;}

#odhBox .sale
{
	background-color: #ffffe0;
} 
#odhBox .sale .th6
{
	color: #ff0033;
} 
#odhBox .ckoutTB .sbcode
{
	margin-right: 5px;
}
#odhBox .salecodebox{
    padding:10px 15px; 
}
#odhBox .subtotalbox
{
	margin-top:10px;
	text-align:right;
    padding-right:20px;
    font-size:14pt;
	background-color: #faf0e6;
	margin-bottom: 20px;
	padding-top:10px;
	padding-bottom:10px;
}
#odhBox .subtotalbox .hrr
{
	margin-bottom: 10px;
}
#odhBox .saletotal
{
	font-size: 10pt;
	color: #ff0000;
	margin-left: 10px;
	vertical-align: super;
}
#odhBox .subtotal
{
	min-width: 60px;
	display:inline-block;
}
#odhBox ul.tabs , ul.tabs li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#odhBox .abgne_tab {
	clear: left;
	width: 99.5%;
	margin: 10px 0;
}
#odhBox ul.tabs {
	width: 100%;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
}
#odhBox ul.tabs li {
	float: left;
	height: 31px;
	line-height: 31px;
	overflow: hidden;
	position: relative;
	margin-bottom: -1px;	/* 讓 li 往下移來遮住 ul 的部份 border-bottom */
	border: 1px solid #999;
	border-left: none;
	background: #e1e1e1;
}
#odhBox ul.tabs li a {
	display: block;
	padding: 0 20px;
	height: 31px;
	line-height: 31px;
	color: #000;
	text-decoration: none;
	/* border: 1px solid #fff; */
}
#odhBox ul.tabs li a:hover {
	background: #ccc;
}
#odhBox ul.tabs li.active  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
#odhBox ul.tabs li.active a:hover {
	background: #fff;
}
#odhBox div.tab_container {
	clear: left;
	width: 100%;
	border: 1px solid #999;
	border-top: none;
	background: #fff;
}
#odhBox div.tab_container .tab_content {
	padding: 20px;
	font-size:12pt;
}
#odhBox div.tab_container .tab_content div{
	padding: 7px;
}
#odhBox div.tab_container .tab_content div.cttle
{
	border-bottom: #a9a9a9 1px dotted;
}
#odhBox div.tab_container .tab_content div.cartmbim  font
{
	width:140px;
	display:inline-block;
	text-align:right;
	margin-right:10px;
}
#odhBox div.tab_container .tab_content div.cartmbim h1
{
	display:inline-block;
}
#odhBox div.tab_container .tab_content div.remarks font
{
	display: inline-block;
	vertical-align: top;
}
#odhBox div.tab_container .tab_content div.remarks span
{
	display: inline-block;
}
.ckoutIT .ckoutapp .m_product .m_subtotal {
    font-size: 14pt;
    font-weight: bold;
    color: #000000;
    float: right;
}
.cartmbim input[type="text"]
{
	font-size: 12pt;
	height: 24px;
	line-height: 24px;
    padding-left:2px;
}
#od0112n{ width:50px;}
#od0113n{ width:270px;}
#od0114n{ width:180px;}
#od0115n{ width:180px;}
#od0120n{ width:100px;}
#od0121n{ width:250px;}
#od0130n{ width:50px;}
#od0131n{ width:270px;}
#od0146n{ width:250px;}
.orderScrdox
{
	
}
.orderScrdox ul
{
    margin:0;
    padding:0;	
    width:100%;
    display:inline-block;
}
.orderScrdox li
{
	list-style-type: none;
	float: left;
}
.orderScrdox p
{
    padding:3px 0;
}
.orderScrdox .odr_lkup
{
}
.orderScrdox .odr_tle
{
	width:90px;
    display:inline-block;
}
.orderScrdox .odr_ctl
{
	font-size: 120%;
}
.orderScrdox .odr_text
{
	padding: 5px 0 5px 3px;
	font-size: 120%;
}
.orderScrdox .odr_button
{
    padding:10px 15px;
}
#odr_msg
{
	color: #ff0033;
}
#order_vsd
{
    width:140px;	
}
.butbox
{
    text-align:right;	
}
.butbox input
{
     margin-left:10px;
     cursor:pointer;	
}
@media screen and (max-width: 991px)
{
	.odhHead li
	{
		width: 50%;
	}
}
@media screen and (max-width: 768px)
{
	.ckoutIT .th1
	{
		min-width:75px;
		width:100%;
	}
	.odhtbR,.odhtbT
	{
		width: 100%;
	}	
	.odhtbL,.odhtbR,.odhtbT
	{
		padding: 10px 0;
	}
	#odhBox div.tab_container .tab_content div.cartmbim font
	{
		text-align: left;
		width: auto;
		font-weight: bold;
	}
	.odhHead li
	{
		width: 100%;
		padding: 10px 0;
		text-indent: 10px;
	}
	.odhHead li label
	{
	    min-width: 90px;
	    text-align:right;
	    display:inline-block;
	}
}

@media screen and (max-width: 480px)
{
	#odhBox .ckoutTB td
	{
		padding: 10px;
	}
	#odhBox .salecodebox{
	    text-align:center;
    }
	.orderScrdox .odr_text
	{
		width:98%;
	}
	.orderScrdox li
	{
		float:none;
		width:100%;
	}
	.orderScrdox #order_vsd
	{
		width: 140px;
	}
	.orderScrdox .odr_but .odr_tle
	{
	}
	.orderScrdox .odr_msg
	{
		text-align: center;
	}
	.orderScrdox .odr_but
	{
		text-align: center;
	}

}