/* make sure you add mime to your server side to support ttf */
@font-face {
    font-family:'FontMedium';
    src:url('../fonts/roboto/Rotobo-Medium.ttf') format('truetype');
}

@font-face {
    font-family:'FontBold';
    src:url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'FontRegular';
    src:url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src:url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'FontLight';
    src:url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'FontThin';
    src:url('../fonts/roboto/Roboto-Thin.ttf') format("truetype");
}


* {
    -webkit-font-smoothing: antialiased;
}

body, td { 
     font-family:"Roboto","arial","Microsoft YaHei New", "Microsoft Yahei", "微软雅黑"; 
}

body { background-color: #F3F4FC; }


.div_nomfont
{
    font-size:20px;
}

.div_testfont
{
    font-family:"FontBoldItalic";
    font-size:20px;
}

input
{
   -webkit-border-radius:0; 
   border-radius:0;
   -webkit-appearance: none;
}

.body_home
{
    margin:0px;
}

/***** login form ****/

.body_login
{
   margin:0px;
}


.div_login
{
   padding:20px !important;
   box-shadow:0 0 15px 0 rgba(0,0,0,0.1);
}

.ul_form
{
    list-style:none;
    text-align:center;
    margin-left:0px;
    padding-left:0px;
}

.ul_entry
{
    list-style:none;
    margin-left:0px;
    padding-left:0px;
}

.ul_entry li
{
    display:inline-block;
    padding:5px;
    text-align:left;
}

.li_field_name
{
     width:120px;
}

.div_login .li_field_input input[type="text"], .li_field_input input[type="password"]
{
    height:30px;
    width:200px;
    font-size:14px;
    border-width:0px;
    border-bottom:1px solid #bbb;
}

.div_login .li_field_name 
{
   font-family:FontLight,arial;
   font-size:16px;
   color:#666;
   text-align:right;
}

.but_login
{
   box-shadow:0 0 0 0 rgba(0,0,0,0);
}

.but_submit
{
   font-family:FontBold,arial;
   font-size:16px;

   background:#444;
   border:1px solid rgba(0,0,0,0);
   border-radius:5px;
   width:90%;
   padding:5px 15px;
   margin-top:10px;
   color:#fff;
   text-align:right;
   cursor:pointer;
}

.but_reset
{
   font-family:FontBold,arial;
   font-size:15px;
   color:#000;
   border-width:0px; 
   background:transparent;
   margin-top:10px;
   cursor:pointer;
}

/**** standard screen ****/

.top_header
{
   text-align:left;
   width:100%;
   height:50px;
   position:relative;
   background:#444;
   vertical-align:middle;
}

.top_header > *
{
   vertical-align:middle;
   margin-top:10px;
}

.top_header #but_logout
{
   background:transparent;
   border:1px solid #fff;
   font-size:16px;
   font-family:FontCn,arial;
   color:#fff;
   padding:5px 10px;
   margin-right:15px;
   float:right;
   vertical-align:middle;
}

.top_header #btn_menu
{
   padding:0px 5px;
   vertical-align:middle;
   font-size:24px;
}

.top_header .sp_username, .sp_username
{
   display:inline-block;
   font-size:1em;
   font-family:FontBoldItalic,arial;
   color:#fff;
   vertical-align:middle;
   padding:0px 10px;
}

.top_header2 ._right * { display:inline-block;vertical-align:middle;cursor:pointer; }
 

.top_header2
{
   width:100%;
   height:71px;
   position:relative;
   background:#009a4e;
   vertical-align:middle;
}

.top_header2 > *
{
   vertical-align:middle;
}

.top_header2 > table { padding:10px;:middle;width:100%; }

.top_header2  ._left { text-align:left;width:25%; }
.top_header2  ._right { text-align:right;width:25%; }
.top_header2  ._center { text-align:center;width:50%; }

.top_header2  .div_title { 

   font-family:FontBoldItalic,arial;
   color:#fff;
   font-size:2em;
}

.top_header2 img
{
   max-height:41px;
   cursor:pointer;
}

.ul_home_button
{
   list-style:none;
   text-align:center;
   margin-top:20%;
}

.ul_home_button li
{
  display:inline-block;
  text-align:center;
  
}

.ul_home_button li img
{
   width:80%;
}

.ul_home_button .but_home_sel
{
   border:0px solid #fff;
   background:#525759;
   border-radius:20px;
   color:#fff;
   font-family:FontCn,arial;
   font-size:1.5em;
   width:120px;
   padding-top:8px;
   margin-top:10px;
   cursor:pointer;
}

#but_profile { cursor:pointer; }

.div_profile
{
   display:none;
   font-family:FontRegular,arial;
   font-size:1.0em;
   position:absolute;
   top:30px;
   right:80px;
   width:240px;
   background:rgba(255,255,255,0.8);
   border:0px solid #ddd;
   z-index:10;
   box-shadow:0px 0px 10px 2px rgba(0,0,0,0.3);
}

.div_profile .ul_profile
{
   list-style:none;
   padding:0px;
   margin:0px;
}

.div_profile .ul_profile li
{
   text-align:center;
   padding:3px 10px;
   padding-top:5px;
}

.div_profile .ul_profile li input[type="password"]
{
   font-size:1em;
   padding:5px;
   height:20px;
   border:1px solid #bbb !important;
   outline:none;
   max-width:80%;
}

.div_profile .ul_profile li input[type="button"]
{
   background:#000;
   color:#fff;
   border-width:0px;
   padding:4px;
   width:80px;
   padding-top:10px;
   margin:5px;
   font-family:FontRegular,arial;
   font-size:1em;
   cursor:pointer;
   outline:none;
}

.but_ok
{
   background:#525759 !important;
}

.but_cancel
{
   background:#ed1b2f !important;
}

.div_profile .ul_profile .li_title
{
   padding:5px;
   padding-top:10px;
   background:#009a4e;
   color:#fff;

}


/***********************************************************************/
.ul_summary 
{
   list-style:none;
   margin:0px;
   padding:0px;
   width:100%;
}

.ul_summary li
{
   display:inline-block;
}

.li_summary_left
{
   width:22%;
   max-width:250px;
   min-width:250px;
}

.div_summary_thisweek
{
  position:relative;
  width:100%;
}

.div_summary_thisweek2
{
  display:none;
  font-family:FontRegular,arial;
  color:#fff;
  position:relative;
  width:100%;
  background:#5E6A6B;
  vertical-align:top;
}

.div_h1
{
  font-family:FontBlack;
  font-size:30px;
  padding:10px;
}


.div_summary_thisweek img
{
  width:100%;
  padding:5px;
}

.div_summary_thisweek div { color:#fff;font-family:FontBold,arial; }

#div_week_total 
{
   left:100px;
   top:90px;
   font-size:30px;
   position:absolute;
} 

#div_week_no { position:absolute;font-size:50px;left:120px;top:310px;font-family:FontBoldItalic,arial; }
#div_week_p { position:absolute;font-size:20px;left:160px;top:140px;font-family:FontBold,arial; }
#div_week_g { position:absolute;font-size:20px;left:160px;top:180px;font-family:FontBold,arial; }
#div_week_s { position:absolute;font-size:20px;left:160px;top:215px;font-family:FontBold,arial; }

.li_chart
{
  width:50%; 
}

.li_summary_right
{
   vertical-align:top;
} 

.div_summary_coupon
{
  padding:10px;
  margin-top:20px;
}

.div_summary_coupon .img_coupon_total
{
  width:80%;
}

.li_sales_summary
{
  padding:15px;
}

.div_sales_summary
{
}

.img_sales_summary
{
   max-height:260px;
   max-width:100%;
}

.li_other_summary
{
  padding:15px;
}

.but_channel { background:#009a4e; }
.but_region { background:#009a4e; }
.but_region_channel { background:#6a8db6; }
.but_channel:hover { background:#009a4e; }
.but_region:hover { background:#009a4e; }
.but_region_channel:hover { background:#6a8db6; }

/***********************************************************************/

.div_footer
{
   /*background:#009a4e; */
   background:url(../images/bg.png);
   width:100%; 
   height:90px;
   bottom:0px;
   left:0px;
   position:relative;
}

.div_footer .img_logo
{
   margin-right:10px;
   max-height:70%;
   max-width:40%;
   float:right;
   margin-top:10px;
}

.ul_footer_menu
{
   vertical-align:top;
   font-size:1em;
   font-family:FontCn,arial;
   color:#fff;
   display:inline-block;
}

.ul_footer_menu li {

   display:inline-block;
   padding:10px;
}

.ul_footer_menu li input[type="button"]
{
   border-width:0px;
   background:transparent;
   font-family:FontCnLight,arial;
   font-size:20px;
   color:#fff;
}

.sp_menu
{
   position:absolute;
   top:15px;
   left:10px;
   color:#fff;
   font-family:FontCnLight,arial;
   font-size:1.3em;
   letter-spacing:0.0em;
}

.sp_menu_item
{
   display:inline-block;
   cursor:pointer;
   padding:0px 10px;
}

.sp_menu_item:hover
{
}

.input_field
{
   font-family:FontRegular,arial;
   padding:1px !important;
   padding-left:5px !important;
   outline:none;
   background:#fff !important;
}

.input_field:focus
{
   border:1px solid #000;
}

.div_login input[type="password"]:focus,
.div_login input[type="password"]:active,
.div_login input[type="text"]:focus,
.div_login input[type="text"]:active
{
   box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
   border-bottom:1px solid #888 !important;
}

.div_login input[type="password"]:active + label,
.div_login input[type="password"]:focus + label,
.div_login input[type="text"]:active + label,
.div_login input[type="text"]:focus + label
{
   color:#555 !important;
}

.div_login input[type="text"] + label,
.div_login input[type="password"] + label
{
   -webkit-transform:none !important;
   transform:none !important; 
   margin-top:-23px;
   color:#777;
}

.tr_item_partner td
{
   padding:5px 5px !important;
}

@media only screen and (max-width:600px) {
 
   .ul_home_button
   {
     padding:0px;
     margin-top:20%;
   }

   .ul_home_button img
   {
      max-width:80%;
   }

   .ul_home_button .but_home_sel
   {
   }

   .ul_footer_menu { padding-left:0px; } 
   .ul_footer_menu li { padding:0px; }
   .ul_footer_menu li input[type="button"]
   {
      font-size:17px;
      margin:0px;
   }

   .ul_summary { width:100%; }
   .li_summary_left
   {
     width:100%;
     max-width:100%;
     background:red;
   }

   .div_summary_thisweek
   {
     display:none;
   } 

   .div_summary_thisweek2
   {
     display:inline-block;
   }

   .top_header2  .div_title { 
      font-size:1.4em;
   }
}

footer 
{
   padding:1em 2em;
}

.content { 
   padding:0em; 
}

#li_user_profile { padding:0px 1em;cursor:pointer; }

#li_user_profile .sp_img {
   vertical-align:middle;
   display:inline-block;
   height:30px;
   width:30px;
   background:url('../images/main-logo.png') #fff;
   background-size:contain;
   background-repeat:no-repeat;
   background-position:center;
   border-radius:50%;
}

#sp_user_name { vertical-align:middle;display:inline-block;margin:0px 10px;font-size:0.9em; }

#div_profile_popup
{
    position: absolute;
    right: 1em;
    top: 4em;
    background: #fff;
    color: #000;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 20%);
    display:none;
}

#ul_right_menu li
{
    display: block;
    float: none;
    padding: 15px 20px;
    margin: 0px;
    height: fit-content !important;
    border-bottom: 1px solid #ccc;
    line-height: 1em;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}

#ul_right_menu li:hover
{
   background:rgba(0,0,0,0.1);
}

#modal_my_profile input[type='text']
{
   height:2em;
}

#btn_save_my_profile
{

}

nav .navbar-nav .nav-link {
    font-family:"FontLight";
    font-size:0.9em;
}

nav .navbar-nav .nav-link.active {
   font-family:"Roboto";
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}

html {
  position: relative;
  min-height: 100%;
  padding-bottom:48px;
}

body {
  margin-bottom:48px;
}

footer {
  background:#000;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3em;
  color:#fff;
}

footer .copyright {
  font-size:0.8em;
}

.navbar-toggler { border-color:transparent; }
.navbar-toggler i {  color:#fff; }


.section {
   xbackground:#fff;
   xborder:1px solid #ccc;
   padding:1em;
   border-radius:5px;
   margin-bottom:1em;
}

.div_profile_details {
   background:#fff;
   border-radius:10px;
   box-shadow:0 0 15px 0 rgba(0,0,0,0.1);
}

/* end of file */
