@media print{
    * {
      -webkit-print-color-adjust: exact !important;
    }
    .noBreak {
      break-inside: avoid;
    }
    .noPrint {
      display: none;
    }

    .showPrint {
        display: inline;
    }
  
  }
/* @page {
    size: A4 portrait;   
} */
/*
@page :first {
    margin-left: 4cm;
} */


body {
    margin: 0;
}

/* Disable ugly boxes around images in IE10 */
a img {
    border: 0px;
}

a {
    color: inherit;
    font-weight: 500 !important;
}

.a-color {
    color: #fff
     !important;
    font-size: 18px !important;
}

.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    background: #000 !important;
    color: #ff9933 !important;
}


.mdl-tabs__tab {

    width: -webkit-fill-available!important;

}


::-moz-selection {
    background-color: #6ab344;
    color: #fff;
}

::selection {
    background-color: #6ab344;
    color: #000000;
}

.so-search-box .mdl-textfield__input {
    color: rgba(0, 0, 0, 0.87);
}

.so-header .mdl-menu__container {
    z-index: 50;
    margin: 0 !important;
}

.so-bg{
    background-color: #444 !important;
}

.mdl-textfield--expandable {
    width: auto;
}

.so-fab {
    position: absolute;
    right: 20%;
    bottom: -26px;
    z-index: 3;
    background: #64ffda !important;
    color: black !important;
}

.so-mobile-title {
    display: none !important;
}


.so-logo-image {
    height:36px;
    
}

.so-header {
    overflow: visible;
    background-color:#555;
}

.so-header .material-icons {
    color: #FEE566 !important;
}

.so-header .mdl-layout__drawer-button {
    background: transparent;
    color: #FEE566;
}

.so-header .mdl-navigation__link {
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}

.so-navigation-container {
    /* Simple hack to make the overflow happen to the left instead... */
    direction: rtl;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    width: 500px;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.so-navigation {
    /* ... and now make sure the content is actually LTR */
    direction: ltr;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 800px;
}

.so-search-box.is-focused+.so-navigation-container {
    opacity: 0;
    width: 100px;
}


.so-navigation .mdl-navigation__link {
    display: inline-block;
    height: 60px;
    line-height: 68px;
    background-color: transparent !important;
    border-bottom: 4px solid transparent;
}

.so-navigation .mdl-navigation__link:hover {
    border-bottom: 4px solid #8bc34a;
}

.so-search-box {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    margin-left: 16px;
    margin-right: 16px;
}

.so-more-button {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
}


.so-drawer {
    border-right: none;
}

.so-drawer-separator {
    height: 1px;
    background-color: #dcdcdc;
    margin: 8px 0;
}

.so-drawer .mdl-navigation__link.mdl-navigation__link {
    font-size: 14px;
    color: #757575;
    padding: 4px 16px 4px 16px;
}

.so-drawer span.mdl-navigation__link.mdl-navigation__link {
    color: #EB804A;
}

.so-drawer .mdl-layout-title {
    position: relative;
    background: #F1905F;
    height: 70px;
}

.so-drawer .so-logo-image {
    position: absolute;
    bottom: 16px;
}

.so-be-together-section {
    position: relative;
    height: 800px;
    width: auto;
    background-color: #f3f3f3;
    background-size: cover;
}

.logo-font {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    line-height: 1;
    color: #171717;
    font-weight: 300;
    padding-bottom: 10px;
}

.sub-logo{
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    line-height: 1.4;
    color: #767777;
    font-weight: 400;
    font-size: 14px !important;
    padding: 6px 30px !important;

}
.so-slogan {
    font-size: 40px;
    padding-top: 160px;
}

.so-sub-slogan {
    font-size: 21px;
    padding-top: 24px;
}

.so-create-character {
    font-size: 21px;
    padding-top: 400px;
}

.so-create-character a {
    text-decoration: none;
    color: #767777;
    font-weight: 300;
}

.so-screen-section {
    position: relative;
    padding-top: 60px;
    padding-bottom: 80px;
}

.so-screens {
    text-align: right;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}

.so-screen {
    text-align: center;
}

.so-screen .so-link {
    margin-top: 16px;
    display: block;
    z-index: 2;
}

.so-image-link {
    text-decoration: none;
}

.so-wear {
    display: inline-block;
    width: 160px;
    margin-right: 32px;
}

.so-wear .so-screen-image {
    width: 40%;
    z-index: 1;
}


.so-phone {
    display: inline-block;
    width: 64px;
    margin-right: 48px;
}

.so-phone .so-screen-image {
    width: 100%;
    z-index: 1;
}


.so-tablet {
    display: inline-block;
    width: 110px;
    margin-right: 64px;
}

.so-tablet .so-screen-image {
    width: 100%;
    z-index: 1;
}

.so-tablet .so-link {
    display: block;
    z-index: 2;
}


.so-tv {
    display: inline-block;
    width: 300px;
    margin-right: 80px;
}

.so-tv .so-screen-image {
    width: 100%;
    z-index: 1;
}


.so-auto {
    display: inline-block;
    width: 300px;
    overflow: hidden;
}

.so-auto .so-screen-image {
    display: block;
    height: 300px;
    z-index: 1;
}


.so-wear-section {
    position: relative;
    background: url('images/wear.png') center top no-repeat;
    background-size: cover;
    height: 800px;
}

.so-wear-band {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #37474f;
}

.so-wear-band-text {
    max-width: 800px;
    margin-left: 25%;
    padding: 24px;
    text-align: left;
    color: white;
}

.so-wear-band-text p {
    padding-top: 8px;
}

.so-link {
    text-decoration: none;
    color: #8bc34a !important;
}

.so-link:hover {
    color: #7cb342 !important;
}

.so-link .material-icons {
    position: relative;
    top: -1px;
    vertical-align: middle;
}

.so-alt-link {
    text-decoration: none;
    color: #64ffda !important;
    font-size: 16px;
}

.so-alt-link:hover {
    color: #00bfa5 !important;
}

.so-alt-link .material-icons {
    position: relative;
    top: 6px;
}

.so-customized-section {
    text-align: center;
}

.so-customized-section-text {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 80px 16px 0 16px;
}

.so-customized-section-text p {
    padding-top: 16px;
}

.so-customized-section-image {
    background: url('images/devices.jpg') center top no-repeat;
    background-size: cover;
    height: 400px;
}

.so-more-section {
    padding: 80px 0;
    max-width: 1044px;
    margin-left: auto;
    margin-right: auto;
}

.so-more-section .so-section-title {
    margin-left: 12px;
    padding-bottom: 24px;
}

.so-card-container {}

.so-card-container .mdl-card__media {
    overflow: hidden;
    background: transparent;
}

.so-card-container .mdl-card__media img {
    width: 100%;
}

.so-card-container .mdl-card__title {
    background: transparent;
    height: auto;
}

.so-card-container .mdl-card__title-text {
    color: black;
    height: auto;
}

.so-card-container .mdl-card__supporting-text {
    height: auto;
    color: black;
    padding-bottom: 56px;
}

.so-card-container .mdl-card__actions {
    position: absolute;
    bottom: 0;
}

.so-card-container .mdl-card__actions a {
    border-top: none;
    font-size: 16px;
}

.so-footer {
    background-color: #fafafa;
    position: relative;
}

.so-footer a:hover {
    color: #8bc34a;
}

.so-footer .mdl-mega-footer--top-section::after {
    border-bottom: none;
}

.so-footer .mdl-mega-footer--middle-section::after {
    border-bottom: none;
}

.so-footer .mdl-mega-footer--bottom-section {
    position: relative;
}

.so-footer .mdl-mega-footer--bottom-section a {
    margin-right: 2em;
}

.so-footer .mdl-mega-footer--right-section a .material-icons {
    position: relative;
    top: 6px;
}


.so-link-menu:hover {
    cursor: pointer;
}

/* ---  新加入css    ---- */
.so-button {
    width: 280px;
    background-color: #f1905f !important;
    box-shadow: none;
    border-radius: 6px;
}

.so-tab {
    float: left;
    background-color: white;
    width: 50%;
    height: 45px;
    text-align: center;
    font-size: 22px;
    padding-top: 10px;
}

.so-tab-line {
    width: 70%;
    height: 2px;
    display: block;
    position: relative;
    bottom: 0;
    left: 0;
    margin-top: 10px;
    background-color: #ff9933;
    left: 15%;
}

.so-tab-label {
    color: #ff9933;
}

.so-padding {
    padding: 0 20px 0 20px;
}

.so-select {
    width: 250px;

}

.so-menubar {
    height: 50px;
    background-color: #333;
}

.order_card{
   max-width: 800px;
   padding: 0 0 20px 0;
   margin-top: 30px;
}

.order_card_title{
    background-color: #EB804A;
    color: #ffffff;
}
.vip_card{
    background-color: #EB804A;
    color: #ffffff;
    max-width: 400px;
    padding: 30px;
    margin-top: 30px;
    border-radius: 8px;

}

/**** Mobile layout ****/
@media (max-width: 900px) {
    .so-navigation-container {
        display: none;
    }

    .so-title {
        display: none !important;
    }

    .so-mobile-title {
        display: block !important;
        position: absolute;
        left: calc(50% - 70px);
        top: 12px;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10 break
     consecutive "+" operators in some cases. Therefore, we need to use both
     here to cover all the bases. */
    .so.so-search-box.is-focused~.so-mobile-title,
    .so-search-box.is-focused+.so-navigation-container+.so-mobile-title {
        opacity: 0;
    }

    .so-more-button {
        display: none;
    }

    .so-search-box.is-focused {
        width: calc(100% - 48px);
    }

    .so-search-box .mdl-textfield__expandable-holder {
        width: 100%;
    }

    .so-be-together-section {
        height: 280px;
    }

    .so-slogan {
        font-size: 26px;
        margin: 0 16px;
        padding-top: 50px;
    }

    .so-sub-slogan {
        font-size: 16px;
        margin: 0 16px;
        padding-top: 8px;
    }

    .so-create-character {
        padding-top: 200px;
        font-size: 16px;
    }

    .so-create-character img {
        height: 12px;
    }

    .so-fab {
        display: none;
    }

    .so-wear-band-text {
        margin-left: 0;
        padding: 16px;
    }

    .so-footer .mdl-mega-footer--bottom-section {
        display: none;
    }
}
/* custome */
.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: left;

}

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

.so-bgcolor {

 background: #F1905F !important;
}

.so-color {

 color: #EB804A !important;
}

.margin_top20{
    margin-top: 20px
}

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


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

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



.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;
}
.so-cart{
    width:100%;
    height:40px;
    box-shadow: none !important;
    border-radius: 0px;
    text-align: center !important;
    background-color: #555 !important;
    font-size: 18px;
    color:#fff;
}
.cart{
    width:100%;
    height:40px;
    box-shadow: none;
    border-radius: 0px;
    text-align: center;
    background-color: #F1905F !important;
    font-size: 14px;
    color:#fff;
}
.sq-o-button{
    width: 100px;
    height: 40px;
    box-shadow: 
    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: 
    font-weight:14px; 
    border-radius: 0px;
    background-color: #fff !important;
    border: 1px solid;
    border-color: #EB804A !important; 
    color: #EB804A !important;
    margin:5px 10px;
}
/*---- backend new add ----*/
.so-header {
    
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    min-height: 50px;
    background: repeat-x #F1905F !important;
    background-image: -webkit-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: -o-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: linear-gradient(to bottom, #FFF 0, #EEE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    color: #fff !important;
    border-bottom: 1px solid #DDD;
    padding-left: 12px;
    padding-top: 12px;
}
.so-skin{
    background-color: #555;
}
.nav-list>li:before {
    display: none;
    position: absolute;
    top: -1px;
    left: 0;
    z-index: 1;
    height: 41px;
    width: 3px;
    max-width: 3px;
    overflow: hidden;
    background-color: #7F7F7F !important;
}
.no-skin .nav-list>li.open>a {
    background-color: #333;
    /* color: #fff !important; */
    color: #7F7F7F !important;
}
.no-skin .nav-list>li:hover>a {
    background-color: #333;
    color: #7F7F7F !important;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: #fef4ef;
    border-color: #555 !important;
}
.no-skin .nav-list>li .submenu>li>a:hover {
    color: #4B88B7;
    background-color: #555;
}
.so-page {
    background-color: #555;
    position: relative;
    margin: 0;
    padding: 8px 20px 24px;
}

.widget-box {
    padding: 0;
    box-shadow: none;
    margin: 3px 0;
    border: none solid #CCC;
    border-radius: none;
    text-shadow: initial;
}
.widget-color-black>.widget-header {
    background: #555;
    border-color: #555;

}
.widget-header {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    min-height: 38px;
    background: repeat-x #F3F1F1;
    background-image: -webkit-linear-gradient(top,#FFF 0,#EEE 100%);
    background-image: -o-linear-gradient(top,#FFF 0,#EEE 100%);
    background-image: linear-gradient(to bottom,#FFF 0,#EEE 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    color: #ffffff !important;
    border-bottom: 1px solid #555 !important;
    padding-left: 12px;
    
}



/*---------color---------*/
im-color{
    color: #fff;
}
   .so_bar{
    background: #333 !important;
    color: #fff !important;
}
.so_nav-list>li:hover:before {
    display: block;
}
.so_nav-list>li:before {
    display: none;
    position: absolute;
    top: -1px;
    left: 0;
    z-index: 1;
    height: 41px;
    width: 3px;
    max-width: 3px;
    overflow: hidden;
    background-color: #F1905F;
}
.so-yellow{
    background-color: #f5cd79 !important;
}
.so-green{
    background-color: #badc58 !important;
}
.so-pink{
    background-color: #f78fb3 !important;
}
.so-blue{
    background-color: #295ea4 !important;
}
.so-red{
    background-color: #e66767 !important;
}
.so-indigo{
    background-color:  #686de0 !important;
}
.so-greentea{
    background-color:  #00be70 !important;
}
.so-milktea{
    background-color: #ffbe76 !important;
}
.so-ltblue{
    background-color: #AFE0FF !important;
}
.so-tiger{
    background-color: #e15f41 !important;
}

.modal-dialog {
		width: 85% !important;
}

a #chainGroupEdit:active, a #chainGroupEdit.active{
	color:black;
	background-color:white;
}

a #chainGroupEdit{
	color:white;
}

.backgroundLayer{
	background-color:white;
	opacity:0.5;
}