/* 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: 'FontLight';
    src:url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'FontThin';
    src:url('../fonts/roboto/Roboto-Thin.ttf') format("truetype");
}


* {
    -xwebkit-font-smoothing: antialiased;
}

.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;
   background:#F1F2F6;
}


.div_login
{
    margin-top:10%;
    max-width:400px;
    padding:10px;
}

.input-field label.active {

    font-size: 1.0rem;
}

.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:right;
   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;
}

.top_header .sp_username, .sp_username
{
   display:inline-block;
   font-size:20px;
   font-family:FontBoldItalic,arial;
   margin-right:20px;
   margin-top:15px;
   color:#fff;
}

.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;
   }
}

.div_sidebar
{
   min-height:100vh;
   xheight:100vh;
   xoverflow:auto;
   padding:0px !important;
}

.div_sidebar .ul_item .m_item a
{
}

.div_sidebar .ul_item .m_item img
{
   width:30px;
}


.div_workspace
{
}

.div_sidebar li { text-align:center !important; }
.div_sidebar li a { color:#fff !important;font-size:0.9em; }

.ul_item  li
{
   padding:10px 0px;
}

.ul_item li.selected
{
   background:#000;
}

.div_subtitle
{
   font-weight:300;
}

.div_workspace
{
   height:100vh;
   overflow:auto;
}

.tbl_item .tr_item.disabled
{
   opacity:0.3;

    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}