/* try my own css for often used elements */

html {
  font-size: 14px;
}

body {
  font-family: Helvetica, Tahoma, Arial, “STXihei”, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif !important;
  font-weight: 400 !important;
  /*-webkit-font-smoothing: antialiased; */
}

* {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
}

:root {
  /* flatUI */
  --green: #16a085;
  --lightgreen: #1abc9c;
  --blue: #2980b9;
  --lightblue: #3498db;
  --yellow: #f39c12;
  --lightyellow: #f1c40f;
  --orange: #d35400;
  --lightorange: #e67e22;
  --red: #c0392b;
  --lightred: #e74c3c;
  --silver: #bdc3c7;
  --lightsilver: #ecf0f1;
  --gray: #7f8c8d;
  --lightgray: #95a5a6;
  --theme_color: rgb(77, 92, 109);
}

/* user material icon from google */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 200 !important;
  src: url(../base/material/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../base/material/MaterialIcons-Regular.woff2) format('woff2'),
    url(../base/materialcom/MaterialIcons-Regular.woff) format('woff'),
    url(../base/material/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-flex;
  /* original inline-block */
  vertical-align: middle;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

/* end of material icon */


/* new icon 2020 May */
.icon-24 {height:24px;}
.icon-30 {height:30px;};
.icon-40 {height:40px;};
.icon-50 {height:50px};
.icon-100 {height:100px}

/* turn off input  spinner */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=date]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}

/* background class*/
.bk-white {
  background-color: white;
}

.bk-black {
  background-color: black;
}

.bk-green {
  background-color: var(--green)
}

.bk-lightgreen {
  background-color: var(--lightgreen)
}

.bk-blue {
  background-color: var(--blue)
}

.bk-lightblue {
  background-color: var(--lightblue)
}

.bk-yellow {
  background-color: var(--yellow)
}

.bk-lightyellow {
  background-color: var(--lightyellow)
}

.bk-orange {
  background-color: var(--orange)
}

.bk-lightorange {
  background-color: var(--lightorange)
}

.bk-red {
  background-color: var(--red)
}

.bk-lightred {
  background-color: var(--lightred)
}

.bk-silver {
  background-color: var(--silver)
}

.bk-lightsilver {
  background-color: var(--lightsilver)
}

.bk-gray {
  background-color: var(--gray)
}

.bk-lightgray {
  background-color: var(--lightgray)
}


/* font-color class */
.font-white {
  color: white
}

.font-black {
  color: black
}

.font-green {
  color: var(--green)
}

.font-lightgreen {
  color: var(--lightgreen)
}

.font-blue {
  color: var(--blue)
}

.font-lightblue {
  color: var(--lightblue)
}

.font-yellow {
  color: var(--yellow)
}

.font-lightyellow {
  color: var(--lightyellow)
}

.font-orange {
  color: var(--orange)
}

.font-lightorange {
  color: var(--lightorange)
}

.font-red {
  color: var(--red)
}

.font-lightred {
  color: var(--lightred)
}

.font-silver {
  color: var(--silver)
}

.font-lightsilver {
  color: var(--lightsilver)
}

.font-gray {
  color: var(--gray)
}

.font-lightgray {
  color: var(--lightgray)
}


/* border-color class */
.border-white {
  border: 1px solid white
}

.border-black {
  border: 1px solid black
}

.border-green {
  border: 1px solid var(--green)
}

.border-lightgreen {
  border: 1px solid var(--lightgreen)
}

.border-blue {
  border: 1px solid var(--blue)
}

.border-lightblue {
  border: 1px solid var(--lightblue)
}

.border-yellow {
  border: 1px solid var(--yellow)
}

.border-lightyellow {
  border: 1px solid var(--lightyellow)
}

.border-orange {
  border: 1px solid var(--orange)
}

.border-lightorange {
  border: 1px solid var(--lightorange)
}

.border-red {
  border: 1px solid var(--red)
}

.border-lightred {
  border: 1px solid var(--lightred)
}

.border-silver {
  border: 1px solid var(--silver)
}

.border-lightsilver {
  border: 1px solid var(--lightsilver)
}

.border-gray {
  border: 1px solid var(--gray)
}

.border-lightgray {
  border: 1px solid var(--lightgray)
}


/*Utilities */
.sm {
  font-size: 80%;
}

.nm {
  font-size: 100%
}

.lg {
  font-size: 120%
}

/* input control */
.bingo-input{
  border:none; border-radius:0; border-bottom:1px solid silver; outline:none; background:none;
}

/*
  *::placeholder {
    or user ::-webkit-input-placeholder for Chrome/Opera/Safari 
    color: var(--silver);
    font-size: 80%;
    text-align: center;
    background: none;
  }
  */

/* section specific style */

/* for search & report */
#search_menu [list]::-webkit-calendar-picker-indicator,
#report_menu [list]::-webkit-calendar-picker-indicator {
  display: none;
}

#search_menu select,
#report_menu select {
  -moz-appearance: none;
  /* for Firefox */
  -webkit-appearance: none;
  /* for Chrome */
}

/* For IE10 */
#search_menu select::-ms-expand,
#report_menu select::-ms-expand {
  display: none;
}

/* dropdown-menu background color */
.dropdown-menu>a:focus,
.dropdown-menu>a:hover {
  color: white;
  background-color: rgba(77, 92, 109, 0.3);
}

/** ***/
i {
  border-bottom:2px solid none;
  cursor:pointer;
}

ix:hover {
/*  transform: rotate(90deg);
  transition: transform 0.2s; */
  border-bottom:2px solid white;
}



/* page specific */
#shipment_form input,
#shipment_form textarea,
#shipment_form select {
  border: 1px solid rgb(210, 210, 210);
}

#shipment_form label {
  color: rgb(100, 78, 78);
}

/* animation */
.spinner {
  animation: rotator 2s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* third-party bootstrap corrections || enhancement */


/* moduel based css */

/* packinglist */
#packinglist-window{
  display:flex;
  justify-content: center;
  align-items: center;
  width:100%; 
  height:100%;
  background:rgba(200,200,200,0.3);
  position:fixed;
  top:0;
  left:0;
  z-index: 100;
}

.packinglist-form {
  width: max(80%, 1000px);
  height:max(80%);
  overflow:scroll;
  background:white;
  border:1px solid silver;
  border-radius: 8px;
  padding:10px;
  box-shadow: 3px 3px 3px black;
}