body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

body, table, td, tr, th, thead, tbody, a, div, span, form, input, textarea {
  font-family: 'Quicksand', sans-serif;
}

body {
  background-color: #b3d1ff;
}

body, html {
  height: 100%;
}

thead tr th {
  position: sticky;
  top: 0;
}

td {
  vertical-align: top;
}

a, a:hover, a:visited, a:active, a:checked, a:default {
  text-decoration:none;
  cursor: pointer;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}

textarea {
  padding: 2px;
  border: 1px solid #80b3ff;
  background-color: #e6f2ff;
  outline: none;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

textarea:focus{
  border: 1px solid #0073e6;
}

.input {
  padding: 2px;
  border:0;
  border-bottom: 1px solid #008ae6;
  background-color: inherit;
  outline: none;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.input:focus {
  border-bottom: 1px solid #2ebd85;
}

.input option {
  background-color: #005c99;
  color:white;
}

.smallinput {
  padding: 2px;
  border:0;
  border-bottom: 1px solid #008ae6;
  background-color: inherit;
  width: 40px;
  outline: none;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.smallinput:focus {
  border-bottom: 1px solid #2ebd85;
}

.selectproduct {
  width:18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid #ccc;
  vertical-align: bottom;
  cursor: pointer;
}

.editingbox {
  position:absolute;
  left:50%;
  margin-left:-300px;
  top:20%;
  width:600px;
  height: 100px;
  z-index:999999;
  padding:10px;
  background-color: #005c99;
  font-weight:600;
  font-size: 20px;
  color:#fff;
  border-radius:8px;
  box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.editingbox:focus {
  border:3px solid #fff;
}

.ordernotes {
  display: none;
  position: absolute;
  margin-top:0;
  width:auto;
  min-width: 400px;
  max-width: 600px;
  padding:10px;
  box-shadow:0 1px 8px rgba(0,0,0,0.5);
  margin:0px 10px 0 0;
  border-radius:8px;
  padding:10px;
  background-color: #009cdc;
  color:#fff;
  z-index: 999;
}
.rightside {
    right:0;
}
.leftside {
  left: 0;
}
.tooltip {
    display:inline-block;
    position:relative;
    text-align:left;
}

.tooltip h3 {margin:12px 0;}

.tooltip .top {
    width: auto;
    top:-20px;
    left:50%;
    transform:translate(-30%,-100%);
    padding:10px;
    color:#ffffff;
    background-color:#009cdc;
    font-weight:normal;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    display:none;
}

.tooltip:hover .top {
    display:block;
}

.tooltip .top i {
    position:absolute;
    top:100%;
    left:30%;
    margin-left:-15px;
    width:30px;
    height:15px;
    overflow:hidden;
    z-index:99999999;
}

.tooltip .top i::after {
    content:'';
    position:absolute;
    width:15px;
    height:15px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#009cdc;
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    z-index:99999999;
}

.wrapper {
  width: 100%;
  height: 100%;
  background-color: #b3d1ff;
  border:0;
  padding:0;
  margin:0;
}

.cancelbox {
  display: none;
  position:fixed;
  background-color: #ffcccc;
  color:#333;
  font-size: 16px;
  font-weight: 600;
  width:500px;
  top:20%;
  left:50%;
  margin-left:-250px;
  height:120px;
  z-index:99999;
  text-align:center;
  padding:10px;
  border-radius:5px;
  box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.overlay{
  display: none;
  position: fixed;
  width:100%;
  height: 100%;
  z-index:9999;
  background-color:#999;
  opacity:0.8
}

.login {
  border:0;
  padding:0;
  width:400px;
  margin: 50px auto 0 auto;
  background-color: #ffffff;
}
.login td {
  padding:5px;
}

.rightcolumn {
  position: relative;
  background-color: #fff;
  vertical-align: top;
  border:0;
  margin:0;
  padding:0;
}

.leftcolumn {
  background-color: #005c99;
  width:200px;
  vertical-align: top;
}

.maincontent {
  margin:0;
  border:0;
  padding:0;
  overflow: auto;
}

.avatar {
  border: 5px solid #99c2ff;
  -webkit-border-radius: 50%;
  /* Firefox 1-3.6 */
  -moz-border-radius: 50%;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 50%;
}

.naviname {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-top:10px;
}

.smalltext {
  font-size:14px;
}
.mediumtext {
  font-size: 20px;
}
.largetext {
  font-size: 25px;
}

.bold600 {
  font-weight: 600;
}
.bold700 {
  font-weight: 700;
}

.white {
  color: #fff;
}

.menu {
  display: block;
  border-bottom:1px solid #006bb3;
  padding:10px 5px 10px 5px;
  color: #fff;
  cursor: pointer;
  transition: all 500ms;
  text-decoration: none;
  font-weight: 500;
}

.menu:hover {
  background-color: #007acc;
  padding-left:20px;
  transition: all 500ms;
}

.listcategory {
  display: block;
  border-bottom:1px solid #006bb3;
  padding:10px 5px 10px 5px;
  color: #005c99;
  cursor: pointer;
  transition: all 600ms;
  text-decoration: none;
  background-color: #e6f2ff;
  z-index: 9999;
}

.listcategory:hover {
  background-color: #fff;
  transition: all 600ms;
}

.listcategory.active {
  background-color: #fff;
  font-weight: 700;
}

.listproductonsearch {
  display: block;
  border-bottom:1px solid #006bb3;
  padding:10px 5px 10px 5px;
  color: #005c99;
  cursor: pointer;
  text-decoration: none;
  background-color: #e6f2ff;
  z-index: 9999;
}

.listproductonsearch:hover {
  background-color: #fff;
}

.showdropcategorylist:hover .dropcategorylist {
  display: block;
  transition: all 600ms;
}
.dropcategorylist {
  position: absolute;
  z-index: 9999;
  background-color: #fff;
  width:300px;
  height: 400px;
  overflow: auto;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  transition: all 600ms;
}

.createnewcategory {
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  width:300px;
  padding:5px;
}

.listproduct {
   background-color: #e6f2ff;
   border-bottom:1px solid #d9d9d9;
   cursor: pointer;
}
.listproduct:hover {
  background-color: #FFF;
}

.tools {
  display: none;
  width:100%;
  position:absolute;
  background-color:#fff;
  z-index:999;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  padding:10px 0 10px 0;
}

.searchresult {
  display: none;
  width:600px;
  max-height: 300px;
  overflow: auto;
  position:absolute;
  background-color:#fff;
  z-index:999;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  border:1px solid #cdcdcd;
}
.searchresultmobile {
  position:absolute;
  width:100%;
  max-height:200px;
  overflow:auto;
  top:35px;
  background-color:#fff;
  display: none;
  z-index:999999;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  border:1px solid #cdcdcd;
}

.stickyhead {
  position: -webkit-sticky;
  position: sticky;
  top:0;
}

.copyright {
  position: fixed;
  bottom: 0;
  font-size: 14px;
  color: #99c2ff;
  padding:5px;
}

.menuname {
  display: inline-block;
  background-color: #fff;
  color: #005c99;
  padding:10px;
  font-weight: 700;
  font-size: 25px;
}

.button {
  color: #fff;
  text-decoration: none;
  padding: 5px 15px 5px 15px;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none !important;
  transition: all 500ms;
}

.smallbutton {
  color: #fff;
  text-decoration: none;
  padding: 2px 8px 2px 8px;
  font-size: 13px;
  font-weight: bold;
  border: 0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none !important;
  transition: all 500ms;
}

.largebutton {
  color: #fff;
  text-decoration: none;
  padding: 5px 15px 5px 15px;
  font-size: 16px;
  font-weight: bold;
  border: 0;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none !important;
  transition: all 500ms;
}

.button:hover, .largebutton:hover, .smallbutton:hover {
  color: #fff;
  background-color: #005c99;
  transition: all 500ms;
}

.pfixed {
  position: fixed;
  width:100%;
}

.pointer {
  cursor: pointer;
}
.tcenter {
  text-align: center;
}
.tright {
  text-align: right;
}
.tleft {
  text-align: left;
}

.bgwhite {
  background-color: #fff;
}
.bggreen {
  background-color: #2ebd85;
  background-color: rgb(46, 189, 133);
  background-color: hsl(157, 61%, 46%);
  color: white;
}
.bgred {
  background-color: #f7556a;
  background-color: rgb(247, 85, 106);
  background-color: hsl(352, 91%, 65%);
  color: white;
}
.bggray{
  background-color: #e6e6e6;
  color: #333;
}
.bgdarkgray {
  background-color: #999999;
  color: white;
}
.bglightgray {
  background-color:#f2f2f2;
  color: #333;
}
.bgpurple {
  background-color:#ff66d9;
  color: #fff;
}
.bgblue {
  background-color:#005c99;
  color: #fff;
}
.bgorange {
  background-color: #ff8533;
}
.bglightgreen {
  background-color:#e6ffe6;
  color: #333;
}
.bglightred {
  background-color:#ffcccc;
  color: #333;
}
.bglightyellow {
  background-color: #FFF9E5;
  color: #333;
}
.bglightblue {
  background-color: #e6f2ff;
  color: #333;
}
.green {
  color: #2ebd85;
}
.red {
  color: #f6465d;
}
.purple {
  background-color: #e600ac;
}
.darkgrey {
  color: #333;
}
.lightgrey {
  color: #666666;
}
.black {
  color: #000;
}
.white {
  color: #fff;
}
.blue {
  color: #005c99;
}
.yellow {
  color: yellow;
}
.striked {
  text-decoration: line-through;
}
.tab {
  color: #fff;
  text-decoration: none;
  padding: 5px 15px 5px 15px;
  margin:0;
  font-size: 16px;
  font-weight: bold;
  border-top:1px solid #005c99;
  border-left:1px solid #005c99;
  border-right:1px solid #005c99;
  border-bottom:0;
  border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -khtml-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -khtml-border-top-left-radius: 5px;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none !important;
  background-color: #005c99;
}

.tab:hover, .tabactive {
  color: #005c99;
  background-color: #fff;
  padding-top:10px;
  box-shadow: 0px -15px 10px -15px #999;
  border-top:1px solid #ccc;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
}

.tabcontent {
  display: none;
  background-color:#fff;
  padding:10px;
  box-shadow: 0px -15px 10px -15px #999;
  box-shadow: 0px 15px 10px -15px #666;
  position: relative;
}

.tabcontentactive {
  display: block;
}