@font-face {
  font-family: bontenMedium;
  src: url(/assets/font/BentonSansMedium.otf);
}
.subtitle {
  font-size: 12px;
  color: #919191;
}

.img-transfer {
  width: 100px;
  height: 100px;
  object-fit: scale-down;
}

.hide {
  display: none;
}

.modal-sm {
  width: 240px;
}

.message-icon-success {
  font-size: 50px;
  margin-bottom: 5px;
}

.full-width {
  width: 100% !important;
}
.dropdown-menu {
  width: 100% !important;
}

.zoom {
  transition: transform 0.2s;
}

.zoom:hover {
  -ms-transform: scale(2.5); /* IE 9 */
  -webkit-transform: scale(2.5); /* Safari 3-8 */
  transform: scale(2.5);
}

.wrap-text {
  white-space: normal !important;
}

.font-small {
  font-size: 12px !important;
}

img[data-action="zoom"] {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
.zoom-img,
.zoom-img-wrap {
  position: relative;
  z-index: 666;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
img.zoom-img {
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
}
.zoom-overlay {
  z-index: 420;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  filter: "alpha(opacity=0)";
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
.zoom-overlay-open .zoom-overlay {
  filter: "alpha(opacity=100)";
  opacity: 1;
}
.zoom-overlay-open,
.zoom-overlay-transitioning {
  cursor: default;
}
#ui-datepicker-div {z-index:99999 !important;}

.display {
  /* background-color: #505050; */
  background-color: #0e1a2e;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.display::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.display {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.header-display {
  width: 101%;
  height: 120px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: white;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
}

.header-display-icon {
  display: flex;
  align-items: center;
}

.calendar-view {
  /*display: flex;*/
  /*align-items: end;*/
  /*justify-content: center;*/
  /*flex-direction: column;*/
}

.calendar-view #clock {
    color: #0e1a2e;
    font-size: 48px;
    margin-top: 14px;
    font-weight: bold;
}

.calendar-view #date {
  margin-top: -36px;
    color: #0e1a2e;
    font-size: 18px;
}

.container-status {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-status {
  display: flex;
  height: 76px;
  width: 76px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  /* cursor: pointer; */
  margin-left: 8px;
  margin-right: 8px;
  background-color: #0e1a2e !important;
}
.status-to-do {
  background-color:#17a2b8;
  color: white;
}
.status-progress {
  background-color: #28a745;
  color: white;
}
.status-done {
  background-color: #007bff;
  color: white;
}
.status-cancel {
  background-color: #ffc107;
  color: white;
}
.status-overdue {
  background-color: #dc3545;
  color: white;
}
.status-urgent {
  background-color: #dc3545;
  color: white;
}
.status-return {
  background-color: #dc3545;
  color: white;
}
.status-ready-stock {
  background-color: #dc3545;
  color: white;
}
.status-ready-deliver {
  background-color: #dc3545;
  color: white;
}
.item-status #total {
  font-size: 32px;
  font-weight: bold;
}
.item-status #status {
  font-size: 12px;
  text-align: center;
}

.thead-black {
  background-color: #f1f1f1;
  color: #0e1a2e;
}


.tbody-black {
  background-color: #0e1a2e;
  color: #ffffff;
  overflow-y: auto;
  width: 100%;
}

.table-view {
  margin-bottom: 36px;
}

.middle {
  vertical-align: middle !important;
}


.footer {    
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 52px;
  background-color: #f1f1f1;
  color: #0e1a2e;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-top-border {
  height: 28px;
    background-color: #0e1a2e;
    width: 100%;
    margin-top: 7px;
}

.footer-marquee {
  margin-top: 10px;
}

.text-centered {
  text-align: center;
}

.loading-image {
  width: 110px;
}

.btn-confirmation-ok {
  width: 100%;
}

.modal-message {
  margin-top: 25px;
  margin-bottom: 25px;
}

.handle-header {
  height: 120px;
}

.text-footer-marquee {
  font-weight: bold;
}

/* .header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 7.6%;
    float: left;
} */

.pointer {
  cursor: pointer;
}

 
.suggestion-list {
  list-style: none;
  padding: 0px;
  width: 100%;
  border-radius: 3px;
  z-index: 1;
  position: absolute;
}
 
 .suggestion-list li{
  margin-right: 15px;
  background: lavender;
  padding: 4px;
 }
 
 .suggestion-list  li:nth-child(even){
  background: cadetblue;
  color: white;
 }
 
 .suggestion-list  li:hover{
  cursor: pointer;
 }
 ul.ui-autocomplete {
  z-index: 1100;
}

.modal-success-message {
  margin-top: 30px;
  margin-bottom: 30px;
}

.modal-button-confirmed {
  width: 100%;
}

.marquee {
  width: 100%;
  line-height: 50px;
  background-color: #dee2e6;
  color: #0e1a2e;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.marquee p {
  font-size: 28px;
  display: inline-block;
  padding-left: 100%;
  animation: marquee 25s linear infinite;
  font-weight: bold;
}
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

.login-body {
  overflow: hidden;
}

.login-container {
  
}

.login-form-container {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.login-logo, .register-logo {
  margin-bottom: 30px;
}

.login-box, .register-box {
  width: 269px;
}

.login-bottom-link {
  text-align: center;
  margin-top: 12px;
}

.login-bottom-link a {
  color: #0e1a2e;
}

.login-welcoming {
  text-align: center;
  color: white;
  vertical-align: middle;
  width: 60%;
}

.login-welcoming h2 {
  font-family: Calibri;
}

.login-welcoming hr {
  width: 100px;
  height: 4px;
  background-color: #007bff;
  border-radius: 15px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.login-welcoming p {
  font-family: bontenMedium;
}

.login-welcome-container {
  height: 100vh;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/assets/images/bg-login.jpg');
  background-position: center;
  background-size: cover;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media only screen and (max-device-width: 640px) {
  .login-welcome-container {
    display: none;
  }
}
  
@media only screen and (max-device-width: 768px) {
  .login-welcome-container {
    display: none;
  }
}

.placeholder-red {
  background-color: red;
  height: 100vh;
  width: 100%;
}
.placeholder-blue {
  background-color: blue;
  height: 100vh;
  width: 100%;
}

.btn-sma, .btn-sma:hover, .btn-sma:active, .btn-sma:visited, .btn-sma:focus, .btn-sma:focus-visible {
  background-color: #0e1a2e !important;
  border-color: #0e1a2e !important;
  color: white;
  box-shadow: none;
}
.btn-secondary {
  color: #212529 !important;
  background-color: #e3e3e3 !important;
  border-color: #dfdfdf !important;
}
.btn-secondary:hover {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

.btn-sma:not(:disabled):not(:disabled):active {
  background-color: #0e1a2e !important;
} 

.brand-image-side {
  height: 33px;
  margin-top: -7px;
}

nav .nav-sidebar>.nav-item>.nav-link.active {
  background-color: #0e1a2e !important;
  color: #fff;
}