/**** UI-new ****/

/*** typography ***/

/** inline text elements **/
small {font-size:85%;}

/** alignment **/
.text-left{text-align:left;}
.text-center{text-align:center;}

/** text max-line - **/
.tt-max-line-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  overflow:hidden;
}

.tt-max-line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  overflow:hidden;
}
.tt-max-line-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  overflow:hidden;
}

/** text-link **/
/* a:hover {text-decoration:none;} */
/*a.link-default, a:visited.link-default, a.link-primary, a:visited.link-primary, .link-default a, .link-default a:visited, .link-primary a, .link-primary a:visited {color:#333;}
a:hover.link-default, .link-default a:hover {color:#e88621;text-decoration:none;}
a:hover.link-primary, .link-primary a:hover {opacity:0.7;text-decoration:none;}*/

/** lists **/
ul.list-inline li {display:inline-block;float:left;padding:7px 0 0 15px;}
ul.list-inline li {font-weight:bold;}


/*** buttons ***/
/** Options **/
/*
.btn {
	font-size:14px;
	font-family:'Roboto', Arial, Helvetica, "Microsoft JhengHei", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	text-align:center; 
	letter-spacing:1px;
	line-height:2;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	position:relative;
	background:#e88621;
	display:inline-block;
	padding:6px 50px;
	margin:10px 5px;
    cursor:pointer;
}
.btn:hover, a.btn:hover {opacity:0.8;text-decoration:none;color:#fff;}
*/

/* default*/
/*
.btn-default, a.btn-default, .btn-default input, 
.btn-default:hover, a.btn-default:hover, .btn-default input:hover,
.btn-default:active, a.btn-default:active, .btn-default input:active,
.btn-default:focus, a.btn-default:focus, .btn-default input:focus,
.btn-default:active, .btn-default:focus, .btn-default:hover {color:#fff!important;background:#e88621!important;border:1px solid #e88621!important;cursor:pointer;}

a.btn:visited {color:#fff;}
.btn-default-border, a.btn-default-border, 
.btn-default-border:hover, a.btn-default-border:hover, a.btn-default-border:visited {color:#e88621;background:#fff;border:1px solid #e88621;}
.btn-default-border input, .btn-default-border input:hover {color:#e88621;background:#fff;border:none;cursor:pointer;}
*/
/* primary */
/*
.btn-primary, .btn-primary input, a.btn-primary,
.btn-primary:hover, .btn-primary input:hover, a.btn-primary:hover,
.btn-primary:active, a.btn-primary:active, .btn-primary input:active,
.btn-primary:focus, a.btn-primary:focus, .btn-primary input:focus 
{color:#fff;background:#eb0a4b!important;border:1px solid #eb0a4b!important;cursor:pointer;}
*/
/*
.btn-primary-border, a.btn-primary-border,
.btn-primary-border:hover, a.btn-primary-border:hover, a.btn-primary-border:visited {color:#eb0a4b!important;background:#fff;border:1px solid #eb0a4b;}
.btn-primary-border input, .btn-primary-border input:hover {color:#eb0a4b!important;background:#fff;border:none;cursor:pointer;}
*/
/* others */
.btn-fb, a.btn-fb, .btn-fb:hover, a.btn-fb:hover {
  color:#fff;background:#3b5998!important;border:0px solid #3b5998!important;
}
.btn-line:focus, .btn-line:hover {
  color: #fff;
}
.btn-line, a.btn-line {
  color: #fff;
  background-image: url(/images/v3/common/member/login_line.png);
  width: 145px;
  background-size: 100%;
  height: 38px;
  background-color: transparent;
  border-radius: 0px;
  background-origin: border-box;
  padding-left: 43px;
  line-height: 1.8;
  border: none;
}
.btn-line:hover, a.btn-line:hover {
  background-position-y: 33.33%;
  opacity: 1 !important;
  border: none;
  background-color: transparent;
}
.btn-line:active, a.btn-line:active {
  background-image: url(/images/v3/common/member/login_line.png);
  background-position-y: 66.67%;
  box-shadow: none;
}
.btn-line.no-line-icon {
  background-image: none !important;
  background-color: #00c301;
  border-radius: 5px;
  width: auto;
}
.btn-line.no-line-icon:hover {
  background-color: #00e000;
}
.btn-line.no-line-icon:active {
  background-color: #00b300;
}
.btn-edit, a.btn-edit, .btn-edit:hover, a.btn-edit:hover {color:#fff;background:#333;border:1px solid #333;}
.btn-update, a.btn-update, .btn-update:hover, a.btn-update:hover {color:#fff!important;background:#8b8b8b;border:1px solid #8b8b8b;}
.btn-other, a.btn-other, .btn-other:hover, a.btn-other:hover {color:#fff!important;;background:#7c4824;border:1px solid #7c4824;}
.btn-disable {opacity:0.7;cursor: default!important;}
.btn-disable:active {box-shadow: inherit;}

/* sizes */
/*.btn-xl {padding:8px 95px;font-size:16px;letter-spacing:2px!important;}
.btn-lg {padding:9px 90px;font-size:16px;letter-spacing:2px!important;}
.btn-sm {padding:4px 20px;font-size:13px;}
.btn-xs {padding:2px 10px;font-size:12px;}
.btn-block {width:100%;padding-left:0!important;padding-right:0!important;margin:10px auto;}
*/
/** Arrow Buttons **/
/* arrow-position*/
.arrow-forward:after {position:absolute;margin:8px 0 0 10px;content:' ' ;}
.arrow-before:before {position:absolute;margin:8px 0 0 -15px;content:' ';}
.btn-xs.arrow-forward:after {margin:7px 0 0 5px;}
.btn-other.btn-sm.arrow-forward:after, .btn-default-border.btn-sm.arrow-forward:after, .btn-primary.btn-sm.arrow-forward:after, .btn-primary-border.btn-sm.arrow-forward:after, 
.btn-primary.btn-sm.arrow-forward:after {margin:8px 0 0 5px;}
.btn-default.btn-sm.arrow-forward, .btn-default.btn-border.btn-sm.arrow-forward, .btn-primary.btn-sm.arrow-forward, .btn-primary-border.btn-sm.arrow-forward {padding-right:27px;}
.btn-default.btn-sm.arrow-before, .btn-default.btn-border.btn-sm.arrow-before, .btn-primary.btn-sm.arrow-before, .btn-primary-border.btn-sm.arrow-before {padding-left:27px;}

/** default **/
.btn.arrow-forward:after, .btn.arrow-before:before{border-top:6px solid #e88621;border-bottom: 6px solid #e88621;border-left:6px solid #fff;}
.btn-default-border.arrow-forward:after, .btn-default-border.arrow-before:before{border-top:6px solid #fff;border-bottom: 6px solid #fff;border-left:6px solid #e88621;}

/** facebook **/
.btn.btn-fb.arrow-forward:after, .btn.btn-fb.arrow-before:before{border-top:6px solid #3b5998;border-bottom:6px solid #3b5998;border-left:6px solid #fff;}

/* btn-lg */
.btn-default.btn-lg.arrow-forward:after, .btn-default.btn-lg.arrow-before:before{border-top:7px solid #e88621;border-bottom:7px solid #e88621;border-left:7px solid #fff;}
.btn-default-border.btn-lg.arrow-forward:after, .btn-default-border.btn-lg.arrow-before:before{border-top:7px solid #fff;border-bottom:7px solid #fff;border-left:7px solid #e88621;}
.btn.btn-fb.arrow-forward:after, .btn.btn-fb.arrow-before:before{border-top:7px solid #3b5998;border-bottom:7px solid #3b5998;border-left:7px solid #fff;}

/* btn-sm */
.btn.btn-sm.arrow-forward:after, .btn.btn-sm.arrow-before:before{border-top:5px solid #e88621;border-bottom: 5px solid #e88621;border-left:5px solid #fff;}
.btn-default-border.btn-sm.arrow-forward:after, .btn-default-border.btn-sm.arrow-before:before{border-top:5px solid #fff;border-bottom:5px solid #fff;border-left:5px solid #e88621;}

/* btn-xs */
.btn.btn-xs.arrow-forward:after, .btn.btn-xs.arrow-before:before{border-top:4px solid #e88621;border-bottom: 4px solid #e88621;border-left:4px solid #fff;}
.btn-default-border.btn-xs.arrow-forward:after, .btn-default-border.btn-xs.arrow-before:before{border-top:4px solid #fff;border-bottom:4px solid #fff;border-left:4px solid #e88621;}

/** primary **/
.btn.btn-primary.arrow-forward:after, .btn.btn-primary.arrow-before:before{border-top:6px solid #eb0a4b;border-bottom:6px solid #eb0a4b;border-left:6px solid #fff;}
.btn.btn-primary-border.arrow-forward:after, .btn.btn-primary-border.arrow-before:before{border-top:6px solid #fff;border-bottom:6px solid #fff;border-left:7px solid #eb0a4b;}

/* btn-lg */
.btn-primary.btn-lg.arrow-forward:after, .btn.btn-primary.btn-lg.arrow-before:before{border-top:7px solid #eb0a4b;border-bottom:7px solid #eb0a4b;border-left:7px solid #fff;}
.btn-primary-border.btn-lg.arrow-forward:after, .btn-pj-border.btn-lg.arrow-before:before{border-top:7px solid #fff;border-bottom:7px solid #fff;border-left:7px solid #eb0a4b;}

/* btn-sm*/
.btn-primary.btn-sm.arrow-forward:after, .btn-primary.btn-sm.arrow-before:before{border-top:5px solid #eb0a4b;border-bottom:5px solid #eb0a4b;border-left:5px solid #fff;}
.btn-primary-border.btn-sm.arrow-forward:after, .btn-primary-border.btn-sm.arrow-before:before{border-top: 5px solid #fff;border-bottom: 5px solid #fff;border-left: 5px solid #eb0a4b;}

/* btn-xs*/
.btn-xs.arrow-forward {padding:2px 16px 2px 10px;}
.btn-xs.arrow-before {padding:2px 10px 2px 16px;}
.btn-xs.arrow-before:before {margin:8px 0 0 -8px;}
.btn-primary.btn-xs.arrow-forward:after, .btn-primary.btn-xs.arrow-before:before{border-top:4px solid #eb0a4b;border-bottom:4px solid #eb0a4b;border-left:4px solid #fff;}
.btn-primary-border.btn-xs.arrow-forward:after, .btn-primary-border.btn-xs.arrow-before:before{border-top:4px solid #fff;border-bottom:4px solid #fff;border-left:4px solid #eb0a4b;}

/** other **/
.btn.btn-other.arrow-forward:after, .btn.btn-other.arrow-before:before{border-top:6px solid #7c4824;border-bottom: 6px solid #7c4824;border-left:6px solid #fff;}

/* btn-lg */
.btn-other.btn-lg.arrow-forward:after, .btn.btn-other.btn-lg.arrow-before:before{border-top:7px solid #7c4824;border-bottom:7px solid #7c4824;border-left:7px solid #fff;}

/* btn-sm*/
.btn-other.btn-sm.arrow-forward:after, .btn-other.btn-sm.arrow-before:before{border-top:5px solid #7c4824;border-bottom:5px solid #7c4824;border-left:5px solid #fff;}

/** Cart Buttons **/
.btn.cart-before{padding-left:70px;}
.btn.cart-after{padding-right:70px;}
.btn.cart-before:before{top:12px;left:40px;}
.btn.cart-after:after{top:12px;right:40px;}

/* cart-icon */
.btn.cart-before:before, .btn.cart-after:after{width:16px;height:13px;position: absolute;content:" ";display:block;}
.btn.cart-before:before, .btn.cart-after:after,
.btn-primary.cart-before:before, .btn-primary.cart-after:after{background: url(/images/tintint/common/cart_icon_white.png);}
.btn-default-border.cart-before:before, .btn-default-border.cart-after:after{background: url(/images/tintint/common/cart_icon_orange.png);}
.btn-primary-border.cart-before:before, .btn-primary-border.cart-after:after{background: url(/images/tintint/common/cart_icon_pink.png);}

/* btn-lg */
.btn-lg.cart-before{padding-left:110px;}
.btn-lg.cart-after{padding-right:110px;}
.btn-lg.cart-before:before{top:18px;left:75px;}
.btn-lg.cart-after:after{top:18px;right:75px;}

/* btn-sm */
.btn-sm.cart-before{padding-left:40px;}
.btn-sm.cart-after{padding-right:40px;}
.btn-sm.cart-before:before{top:10px;left:20px;}
.btn-sm.cart-after:after{top:10px;right:20px;}

/* btn-xs */
.btn-xs.cart-before{padding-left:40px;}
.btn-xs.cart-after{padding-right:40px;}
.btn-xs.cart-before:before{top:7px;left:15px;}
.btn-xs.cart-after:after{top:7px;right:15px;}

/** tag **/
/* input */
.btn input, .btn-lg input, .btn-sm input, .btn-xs input, .btn-block input {font-size:inherit!important;letter-spacing:inherit!important;font-weight:bold;padding:0;}

/** margin **/
.btn.start {margin-left:0;}
.btn.last {margin-right:0;}

@media (max-width: 750px) {
.btn.start {margin-left:5px;}
.btn.last {margin-right:5px;}
}

/*** helper classes ***/
/** contextual colors **/
.text-important {font-weight:bold;text-align:center;}
.text-primary {color:#e88621;}
.text-muted {color:#bebebe;}
.text-warning {color:#C21E0C;font-size:14px;}

/** contextual background **/
.bg-white {background:#fff;}
.bg-f4 {background:#f4f4f4;}
.bg-ef {background:#efefef;}
.bg-c7 {background:#c7c7c7;}
.bgk-ea {background:#f5ebe3;}
.bg-33 {background:#333333;}

/** quick floats **/
.pull-left{float:left;}
.pull-right{float:right;}

/** border **/
.border{border:1px solid #cecece;}
/*.border-primary {padding:5px;}*/
.radius-default {-moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px;}
.border-warning {border:1px solid #f53e3e; color:#f53e3e; font-weight:bold; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; text-align:center; line-height:25px; margin:10px 0;}
.border-table td {border:1px solid #b8b8b8;}


/*** components ***/

/** labels **/
.label, a.label, .label:visited, a.label:visited {font-size:13px;color: #fff;font-weight: bold;text-align: center;white-space: normal;background: #7B6453;padding: 2px 8px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;}


/** navs **/
/* .sidenav {width:150px;} */
.sidenav {width:165px;}
.sidenav li {text-align:left;letter-spacing:1px;font-weight:bold;}
.sidenav li.last {border-bottom:1px solid #e6e6e6;padding-bottom: 15px;margin-bottom:15px;}
.sidenav li a {
  /*background: url('/images/tintint/zh_TW/gray_icon.gif') no-repeat 5px center;*/
  padding:0px 0px 0px 21px;
  display:block;
  line-height:28px;
  margin:5px 0;
  --bs-link-color: #333333;
}
.sidenav li a.selected {
  /*background: #eee url('/images/tintint/zh_TW/bk_icon.gif') no-repeat 8px center;*/
  color: var(--tt-primary);
}

/** tabs **/
/*.nav {padding-left:0;margin-bottom:0;list-style:none;}
.nav>li {position:relative;display:block;font-weight:bold;}
.nav-tabs {border-bottom:1px solid #efefef;float:left; font-size:13px;}
.nav-tabs>li {float:left;margin-bottom:-1px;}
.nav-tabs a, .nav>li>a, .nav-tabs>li>a {float: left;padding:6px 10px 0px 10px;height:36px;border-right:1px solid #efefef;color:#333333;font-size:13px;text-align:center;text-decoration:none;}
.nav-tabs>li:last-child>a {border:0;}
.nav-tabs a:hover {background:#e3e3e3;}
.nav-tabs>li>a {margin-right:0;line-height:inherit;border-radius:0;}
.nav-tabs .selected {color:#9c9c9c;background:#efefef;text-decoration:none;}*/


/*** tables ***/
.table {width:100%;padding:20px 10px;margin:0;}
.table thead {background: #E2E2E2;}
.table thead th {padding: 15px 8px;color: #333;font-weight: bold;}
.table tbody {background:#fff;}
.table tbody td, .table>tbody>tr>td, .table>thead>tr>th {padding: 15px 8px;}
.table tbody tr {border-bottom: 1px solid #E1E1E1;}
.table-hover tbody tr:hover {cursor: pointer; background: #f6f6f6;}
.table-bordered td {border: 1px solid #b8b8b8;}
.table-bordered td.title-top{background:#e8e8e8;}
.table-bordered td.title-left{background:#dbdbdc;}


/*** forms ***/
/*
.form-group {padding:5px;margin:0;}
.form-group label{vertical-align:top;display:inline-block;padding:5px;width:160px;}
.form-group input#photo {border:none;display:inline-block;}
.form-control {padding:5px;border:1px solid #cecece;font-size:13px;font-family:inherit;display:inline-block;width:inherit;height:inherit;border-radius:0;}
label input[type=checkbox], label input[type=radio] {margin:3px 3px 0 3px;}
*/