/*** login ***/
.vcodeImg{
	float: right;
	padding-right: 15px;
}

.vcodeImg canvas{
    vertical-align: middle;
    height: 38px;
    width: 84px;
    max-width: 84px;
}

.cursor-pointer {
    cursor: pointer;
}

/*** userAdd ***/
.right {
    float: right;
}

.contBlock {
    background-color: #fff;
}

.cbHead {
    color: #333;
    padding: 8px 16px;
    background-color: #fbdcae;
    border-bottom: 2px #eb6e3a solid;
    font-size: 1.5em;
    font-weight: bold;
}
.contBlock .cbHead {
    height: 52px;
    line-height: 35px;
}
.cbHeadTitle {
    font-size: 22.4px;
    line-height: 2rem;
}

.userInfo .pw {
    padding-left: 3%;
    padding-right: 3%;
}

.cbConts.pageConts {
    padding: 40px 5%;
}

.userInfo .form-group label {
    font-size: 1.6rem;
}

sup {
    font-size: 16px;
    color: #ed0000;
}

.userInfo .form-control {
    font-size: 1.5rem;
}

.form-control {
    font-size: 1.5rem;
    height: auto;
    border-color: #e5e5e5;
}

.m-t-25 {
    margin-top: 25px !important;
}

.userInfo .smSubTitle {
    color: #222222;
    padding: 0px 15px 6px;
    border-bottom: 2px solid #cb5929;
    font-size: 20px;
}

.smSubTitle {
    font-size: 1.5em;
    line-height: 1.25em;
    margin-top: 0px;
    margin-bottom: 15px;
}

.userInfo .smSubTitle .triangle {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 5px;
    border-style: solid;
    border-width: 8.5px 0 8.5px 14px;
    border-color: transparent transparent transparent #cb5a29;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.userInfo .form-group label {
    font-weight: inherit;
    padding-right: 0;
}

.userInfo .form-group label {
    font-weight: bold;
    padding-right: 0;
}

/**地址對齊**/
.address-label, .address-input {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}
.address-label {
    width: 10.6rem; /*9.5rem*/
}
.address-input {
    width: calc(100% - 10.6rem); /*9.5rem*/
}



.userInfo .borderAll {
    border: 1px solid #d2d2d2;
}

.pageContsBlock .cbHead {
    height: 50px;
    background-color: #e9e9e9;
    border-bottom: 0px;
    font-size: 1.25rem;
    font-weight: inherit;
}

.userAdd .upImg .cbConts {
    text-align: center;
}

.userAdd .upImg p {
    display: inline-block;
    padding: 0 8px;
}

.userInfo .upImg p {
    text-align: center;
    color: #222222;
    padding-bottom: 0px;
    font-size: 1.125rem;
    margin-bottom: 0;
}


.btn:hover {
    text-decoration: none;
}

.btn {
    border-radius:none;
    padding: 8px 40px;
    box-sizing: border-box;
    min-width: 100px;
    /* font-size: 1.2em; */
    font-size: 1.5rem;
    text-align: center;
    cursor: pointer;
    font-weight:400;

}

.btn-small {
    font-size: 1.125rem;
    padding: 8px 8px;
    min-width: 40px;
}

.btn-upload {
    padding: 2px 16px !important;;
    background-color: #bfbfbf !important;
    border: #7f7f7f solid 1px;
    color: #222222 !important;
}

.userInfo .upImg .Upfile img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.cbConts {
    padding: 12px 16px;
}

.userInfo .upImg .Upfile {
    text-align: center;
    padding: 10px 10px 20px;
}

.performanceBlock .cbConts .row > div, .pageContsBlock .cbConts .row > div {
    font-size: 1.25rem;
    padding-right: 10px;
    padding-left: 10px;
}

.userInfo .upImg {
    margin-bottom: 20px;
}



.btnBar {
    margin: 45px auto 0;
    text-align: center;
}

}

.btn-s {
    padding: 5px 20px;
    box-sizing: border-box;
    min-width: 100px;
    /* font-size: 1.2em; */
    font-size: 5rem;
    text-align: center;
    cursor: pointer;
    font-weight: lighter;
    font-weight: lighter;
}


.btn-sm {
    padding: 4px 9px !important;
}
.btn-group-sm>.btn, .btn-sm {
    border-width: 4px;
    font-size: 13px;
    padding: 4px 9px;
    line-height: 1.38;
}

.clear-both {
   clear: both;
}

/*** btn start ***/

.btn.btn-save, .btn.btn-save.focus, .btn.btn-save:focus, .btn.btn-save.focus:hover, .btn.btn-save:active:hover, .btn.btn-save:focus:active{
    background-color: #78909C !important;
    border-color: #78909C !important;
    border-radius: none;
    margin: 2px auto;
    text-shadow: initial;
    color: white !important;
}
.btn.btn-save:focus:hover, .btn.btn-save:hover, .open>.dropdown-toggle.btn-save {
    color: #fff!important;
    background-color: #95a8b2 !important;
    border-color: #95a8b2 !important; /*set the color you want here*/
    color: white !important;
}

.btn.btn-add, .btn.btn-add.focus, .btn.btn-add:focus, .btn.btn-add.focus:hover, .btn.btn-add:active:hover, .btn.btn-add:focus:active{
    background-color: #A1887F !important;
    border-color: #A1887F !important;
    border-radius: none;
    margin: 2px auto;
    text-shadow: initial;
    color: white !important;
}
.btn.btn-add:focus:hover, .btn.btn-add:hover, .open>.dropdown-toggle.btn-add {
    color: rgb(109, 67, 165)!important;
    background-color: #BCAAA4 !important;
    border-color: #BCAAA4 !important; /*set the color you want here*/
    color: white !important;
}

.btn.btn-search, .btn.btn-search.focus, .btn.btn-search:focus, .btn.btn-search.focus:hover, .btn.btn-search:active:hover, .btn.btn-search:focus:active{
    background-color: #439f9f !important;
    border-color: #439f9f !important;
    border-radius:none;
    margin: 2px auto;
    text-shadow: initial;
}
.btn.btn-search:focus:hover, .btn.btn-search:hover, .open>.dropdown-toggle.btn-search {
    color: #fff!important;
    background-color: #69b2b2 !important;
    border-color: #69b2b2 !important; /*set the color you want here*/
}

.btn.btn-import, .btn.btn-import.focus, .btn.btn-import:focus, .btn.btn-import.focus:hover, .btn.btn-import:active:hover, .btn.btn-import:focus:active{
    background-color: #b28a38 !important;
    border-color: #b28a38 !important;
    border-radius:none;
    margin: 2px auto;
    text-shadow: initial;
}
.btn.btn-import:focus:hover, .btn.btn-import:hover, .open>.dropdown-toggle.btn-import {
    color: #fff!important;
    background-color: #bc9857 !important;
    border-color: #bc9857 !important; /*set the color you want here*/
}

.btn.btn-guide, .btn.btn-guide.focus, .btn.btn-guide:focus, .btn.btn-guide.focus:hover, .btn.btn-guide:active:hover, .btn.btn-guide:focus:active{
    background-color: #333 !important;
    border-color: #333 !important;
    border-radius: none;
    margin: 2px auto;
    color:#fee566 !important;
    text-shadow: initial;
}
.btn.btn-guide:focus:hover, .btn.btn-guide:hover, .open>.dropdown-toggle.btn-guide {
    color: #fee566!important;
    background-color: #555 !important;
    border-color: #555 !important; /*set the color you want here*/
}

.btn.btn-edit, .btn.btn-edit.focus, .btn.btn-edit:focus, .btn.btn-edit.focus:hover, .btn.btn-edit:active:hover, .btn.btn-edit:focus:active{
    background-color: #9E9D24 !important;
    border-color: #9E9D24 !important;
    border-radius: none;
    margin: 2px auto;
    color: white !important;
    text-shadow: initial;
}
.btn.btn-edit:focus:hover, .btn.btn-edit:hover, .open>.dropdown-toggle.btn-edit {
    color: white !important;
    background-color: #AABC6A !important;
    border-color: #AABC6A !important; /*set the color you want here*/
}


.btn.btn-cancel, .btn.btn-cancel.focus, .btn.btn-cancel:focus, .btn.btn-cancel.focus:hover, .btn.btn-cancel:active:hover, .btn.btn-cancel:focus:active{
    background-color: #777 !important;
    border-color: #777 !important;
    border-radius:none;
    margin: 2px auto;
    text-shadow: initial;
}
.btn.btn-cancel:focus:hover, .btn.btn-cancel:hover, .open>.dropdown-toggle.btn-cancel {
    color: #fff!important;
    background-color: #999 !important;
    border-color: #999 !important; /*set the color you want here*/
}

.btn.btn-dele, .btn.btn-dele.focus, .btn.btn-dele:focus, .btn.btn-dele.focus:hover, .btn.btn-dele:active:hover, .btn.btn-dele:focus:active{
    background-color: #903346 !important;
    border-color: #903346 !important;
    border-radius:none;
    margin: 2px auto;
    text-shadow: initial;
}
.btn.btn-dele:focus:hover, .btn.btn-dele:hover, .open>.dropdown-toggle.btn-dele {
    color: #fff!important;
    background-color: #964054 !important;
    border-color: #964054 !important; /*set the color you want here*/
}

.btn.btn-circle {
    display: inline-block;
    width: 100px;
    font-size: 18px;
    font-weight: 400;
    color: #FFF;
    text-align: center;
    text-shadow: initial;
    border: none;
    border-radius: 50px;
    padding: 12px 0 8px;
    margin: 2px;
    line-height: 1.7;
    position: relative;

}
.btn-circle, .btn-circle.btn-default, .btn-circle.btn-default.disabled:hover, .btn-circle.btn-default.no-hover:hover, .btn-circle.disabled:hover, .btn-circle.no-hover:hover {
 border-radius: 50px;
 width: 40px;  
 height: 40px; 
}
.btn-circle.btn-red, .btn-circle.btn-red.disabled:hover, .btn-circle.btn-red.no-hover:hover {
    color: #fff;
    background-color: #903346!important;
    border-color: #903346!important;
}
.btn-circle.btn-water, .btn-circle.btn-water.disabled:hover, .btn-circle.btn-water.no-hover:hover {
    color: #fff;
    background-color: #439f9f !important;
    border-color: #439f9f!important;
}
.btn-circle.btn-plus, .btn-circle.btn-plus.disabled:hover, .btn-circle.btn-plus.no-hover:hover {
    color: #fff;
    background-color: #F09596!important;
    border-color: #F09596!important;
    width: 60px !important;
    height: 60px !important;
    font-size:28px!important;

}
/*** btn end ***/
.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active-custom.is-active { color: #ff9933; } 

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active-custom.is-active:after { background: #ff9933; } 

.pointer_cusor { cursor: pointer; } 

.full-width { width:100% !important; } 

.width30 { width:30% !important; } 
.width100px { width:100px; } 

.width40px { width:40px; } 

.width80 { width:80% !important; } 

.width20 { width:20% !important; } 

.cart-list-td { width:60px !important; text-align: center !important; } 

.meal-detail { Text-align: center;  display: grid;} 

.meal-name { Text-align: left; } 
.meal-desc { Text-align: left; } 

.imember-bgcolor { background: #ff9933 !important; } 

.imember-color { color: #ff9933 !important; } 

.margin_top20 { margin-top: 20px } 

hr.layer { border: 0; border-bottom: 1px dashed #ccc; background: #999; } 


.box { -webkit-box-shadow: 2px 2px 2px 2px #ccc; -moz-box-shadow: 2px 2px 2px 2px #ccc; box-shadow: 2px 2px 2px 2px #ccc; display: flex; padding: 10px; } 

/*-- login form --*/
.loginbox { padding: 2px 30px 3px 35px !important; display: inline-block; width: 350px; font-size: 16px !important; margin-bottom: 10px; } 

.log-in { width: 100%; height: 40px; background: #F1905F !important; color: #fff !important; margin-bottom: 10px !important; font-size: 16px !important; padding: 2px 30px 3px 30px !important; border-radius: 6px; box-shadow: none; border:none; } 

.w-facebook { width: 100%; height: 40px; background: #3B5998 !important; color: #fff !important; margin-bottom: 10px !important; font-size: 16px !important; padding: 2px 30px 3px 45px !important; border-radius: 6px; box-shadow: none; border:none; } 

.w-facebook:hover { background: #2d4b90 !important; color: #fff !important; } 

.w-line { width: 100%; height: 40px; background: #1FB91F !important; margin-bottom: 10px !important; font-size: 16px !important; padding: 2px 30px 3px 45px !important; border-radius: 6px; box-shadow: none; border:none; } 

.w-line { background: #1FB91F !important; color: #fff !important; } 

.btnfield { margin-bottom:10px; } 

.menu_padding { padding: 8px !important; } 

.sm-o-button { width: 65px; height: 40px; box-shadow: none; border-radius: 4px; background-color: #EB804A !important; font-size: 14px; color: #fff; border:none; margin:5px 10px; } 
.sm-g-button { width: 65px; height: 40px; box-shadow: none; border-radius: 4px; background-color: #B0B0B0 !important; font-size: 14px; color: #fff; margin:5px 10px; } 
.m-button { width:40%; height:45px; box-shadow: none; border-radius: 6px; background-color: #EB804A !important; font-size: 18px; color: #fff; border:none; margin:8px 10px; } 
.cart { width:100%; height:60px; box-shadow: none; border-radius: 0px; background-color: #EB804A !important; font-size: 20px; color:#fff; } 
.sq-o-button { width: 100px; height: 40px; box-shadow: none; font-weight:14px; border-radius: 0px; background-color: #EB804A !important; border: 1px solid; border-color: #EB804A !important; color: #fff; margin:5px 10px; } 
.sq-w-button { width: 100px; height: 40px; box-shadow: none; font-weight:14px; border-radius: 0px; background-color: #fff !important; border: 1px solid; border-color: #EB804A !important; color: #EB804A !important; margin:5px 10px; } 

.points_amount { margin-right: 80px; text-align: center; background: #D8D8D8; margin-left: 80px; margin-bottom: 20px; border-radius: 3px; } 

/* for account upload profile picture [top]*/
.hoverable { position: relative; display: block; cursor: pointer; } 
.hoverable .hover-text { position: absolute; display: none; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; } 
.hoverable .background { position: absolute; display: none; top: 0; left: 0; bottom: 0; right: 0; background-color:rgba(255, 255, 255, 0.5); pointer-events: none; z-index: 1; } 
.hoverable:hover .hover-text { display: block; } 
.hoverable:hover .background { display: block; } 
/* for account upload profile picture [bottom]*/

/* for profile picture [top] */
.avatar { width:169px; height: 169px; margin: 10px; display: block; border-radius: 50%; } 
/* for profile picture [bottom] */

    .video-wrapper{
	  position: relative;
    padding-bottom: 56.25%;  
    overflow: hidden;
	}

   .video_iframe{
	    position: absolute !important;
		top: 50% !important;
	    left: 50%;
	    transform: translate(-50%, -50%); 
	    max-width: 560px !important;
	    width: 100% !important;
	    max-height: 315px !important;
	    height: 100% !important;
	}
    






/*** width < 1200px ***/
@media screen and (max-width: 1199px) {
	/**地址對齊**/
	.address-label {
        width: 8.2rem; /*7.3rem*/
    }
    .address-input {
        width: calc(100% - 8.2rem); /*7.3rem*/
	}
}

/*** 768px > width > 992px ***//*PAD開啟*/
@media screen and (min-width: 768px) and (max-width: 991px) {
	/**地址對齊**/
    .address-label {
        width: 25%;
    }
    .address-input {
        width: 75%;
    }
}

/*** width < 768px ***/
@media screen and (max-width: 767px) {
	/**地址對齊**/
    .address-label {
        width: 100%;
    }
    .address-input {
        width: 100%;
    }
}

.required:after { 
	content:" *"; 
	color:red;
}

.loginBoxLabel{
  display: inline-block;
  width: 300px;
  text-align: left;
}

.loginBoxInput{
  display: inline-block;
  width: 280px;
}




.m-0 {
    margin: 0 !important
}

.mt-0, .my-0 {
    margin-top: 0 !important
}

.mr-0, .mx-0 {
    margin-right: 0 !important
}

.mb-0, .my-0 {
    margin-bottom: 0 !important
}

.ml-0, .mx-0 {
    margin-left: 0 !important
}

.m-1 {
    margin: 4px !important
}

.mt-1, .my-1 {
    margin-top: 4px !important
}

.mr-1, .mx-1 {
    margin-right: 4px !important
}

.mb-1, .my-1 {
    margin-bottom: 4px !important
}

.ml-1, .mx-1 {
    margin-left: 4px !important
}

.m-2 {
    margin: 8px !important
}

.mt-2, .my-2 {
    margin-top: 8px !important
}

.mr-2, .mx-2 {
    margin-right: 8px !important
}

.mb-2, .my-2 {
    margin-bottom: 8px !important
}

.ml-2, .mx-2 {
    margin-left: 8px !important
}

.m-3 {
    margin: 16px !important
}

.mt-3, .my-3 {
    margin-top: 16px !important
}

.mr-3, .mx-3 {
    margin-right: 16px !important
}

.mb-3, .my-3 {
    margin-bottom: 16px !important
}

.ml-3, .mx-3 {
    margin-left: 16px !important
}

.m-4 {
    margin: 24px !important
}

.mt-4, .my-4 {
    margin-top: 24px !important
}

.mr-4, .mx-4 {
    margin-right: 24px !important
}

.mb-4, .my-4 {
    margin-bottom: 24px !important
}

.ml-4, .mx-4 {
    margin-left: 24px !important
}

.m-5 {
    margin: 48px !important
}

.mt-5, .my-5 {
    margin-top: 48px !important
}

.mr-5, .mx-5 {
    margin-right: 48px !important
}

.mb-5, .my-5 {
    margin-bottom: 48px !important
}

.ml-5, .mx-5 {
    margin-left: 48px !important
}

.p-0 {
    padding: 0 !important
}

.pt-0, .py-0 {
    padding-top: 0 !important
}

.pr-0, .px-0 {
    padding-right: 0 !important
}

.pb-0, .py-0 {
    padding-bottom: 0 !important
}

.pl-0, .px-0 {
    padding-left: 0 !important
}

.p-1 {
    padding: 4px !important
}

.pt-1, .py-1 {
    padding-top: 4px !important
}

.pr-1, .px-1 {
    padding-right: 4px !important
}

.pb-1, .py-1 {
    padding-bottom: 4px !important
}

.pl-1, .px-1 {
    padding-left: 4px !important
}

.p-2 {
    padding: 8px !important
}

.pt-2, .py-2 {
    padding-top: 8px !important
}

.pr-2, .px-2 {
    padding-right: 8px !important
}

.pb-2, .py-2 {
    padding-bottom: 8px !important
}

.pl-2, .px-2 {
    padding-left: 8px !important
}

.p-3 {
    padding: 16px !important
}

.pt-3, .py-3 {
    padding-top: 16px !important
}

.pr-3, .px-3 {
    padding-right: 16px !important
}

.pb-3, .py-3 {
    padding-bottom: 16px !important
}

.pl-3, .px-3 {
    padding-left: 16px !important
}

.p-4 {
    padding: 24px !important
}

.pt-4, .py-4 {
    padding-top: 24px !important
}

.pr-4, .px-4 {
    padding-right: 24px !important
}

.pb-4, .py-4 {
    padding-bottom: 24px !important
}

.pl-4, .px-4 {
    padding-left: 24px !important
}

.p-5 {
    padding: 48px !important
}

.pt-5, .py-5 {
    padding-top: 48px !important
}

.pr-5, .px-5 {
    padding-right: 48px !important
}

.pb-5, .py-5 {
    padding-bottom: 48px !important
}

.pl-5, .px-5 {
    padding-left: 48px !important
}

.m-n1 {
    margin: -4px !important
}

.mt-n1, .my-n1 {
    margin-top: -4px !important
}

.mr-n1, .mx-n1 {
    margin-right: -4px !important
}

.mb-n1, .my-n1 {
    margin-bottom: -4px !important
}

.ml-n1, .mx-n1 {
    margin-left: -4px !important
}

.m-n2 {
    margin: -8px !important
}

.mt-n2, .my-n2 {
    margin-top: -8px !important
}

.mr-n2, .mx-n2 {
    margin-right: -8px !important
}

.mb-n2, .my-n2 {
    margin-bottom: -8px !important
}

.ml-n2, .mx-n2 {
    margin-left: -8px !important
}

.m-n3 {
    margin: -16px !important
}

.mt-n3, .my-n3 {
    margin-top: -16px !important
}

.mr-n3, .mx-n3 {
    margin-right: -16px !important
}

.mb-n3, .my-n3 {
    margin-bottom: -16px !important
}

.ml-n3, .mx-n3 {
    margin-left: -16px !important
}

.m-n4 {
    margin: -24px !important
}

.mt-n4, .my-n4 {
    margin-top: -24px !important
}

.mr-n4, .mx-n4 {
    margin-right: -24px !important
}

.mb-n4, .my-n4 {
    margin-bottom: -24px !important
}

.ml-n4, .mx-n4 {
    margin-left: -24px !important
}

.m-n5 {
    margin: -48px !important
}

.mt-n5, .my-n5 {
    margin-top: -48px !important
}

.mr-n5, .mx-n5 {
    margin-right: -48px !important
}

.mb-n5, .my-n5 {
    margin-bottom: -48px !important
}

.ml-n5, .mx-n5 {
    margin-left: -48px !important
}

.m-auto {
    margin: auto !important
}

.mt-auto, .my-auto {
    margin-top: auto !important
}

.mr-auto, .mx-auto {
    margin-right: auto !important
}

.mb-auto, .my-auto {
    margin-bottom: auto !important
}

.ml-auto, .mx-auto {
    margin-left: auto !important
}

.w-25 {
    width: 25% !important
}

.w-50 {
    width: 50% !important
}

.w-75 {
    width: 75% !important
}

.w-100 {
    width: 100% !important
}

.w-auto {
    width: auto !important
}

.h-25 {
    height: 25% !important
}

.h-50 {
    height: 50% !important
}

.h-75 {
    height: 75% !important
}

.h-100 {
    height: 100% !important
}

.h-auto {
    height: auto !important
}

.page-content {
	background-color: #FFF;
	position: relative;
	margin: 0;
	padding: 8px 20px;
}

body table.dataTable thead tr th.sorting_disabled:after {
    content: '';
    color: translate;
}